Upgrade to Bootstrap 4.

Upgrade to Font Awesome 5.
Restructure modules.

3 files changed, 649 insertions, 0 deletions

diff --git a/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/KVManagerDatetime.kt b/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/KVManagerDatetime.kt
new file mode 100644
index 00000000..41f8620f
--- /dev/null
+++ b/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/KVManagerDatetime.kt
@@ -0,0 +1,75 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package pl.treksoft.kvision
+
+internal val kVManagerDatetimeInit = KVManagerDatetime.init()
+
+/**
+ * Internal singleton object which initializes and configures KVision datetime module.
+ */
+internal object KVManagerDatetime {
+    init {
+        require("bootstrap-datetime-picker/css/bootstrap-datetimepicker.min.css")
+        require("bootstrap-datetime-picker/js/bootstrap-datetimepicker.min.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.ar.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.az.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.bg.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.bn.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.ca.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.cs.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.da.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.de.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.ee.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.el.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.es.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.fi.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.fr.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.he.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.hr.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.hu.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.hy.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.id.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.is.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.it.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.ja.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.ko.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.lt.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.lv.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.nl.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.no.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.pl.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.pt.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.ro.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.rs.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.ru.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.sk.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.sl.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.sv.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.th.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.tr.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.ua.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.uk.js")
+        require("./js/locales/bootstrap-datetime-picker/bootstrap-datetimepicker.zh.js")
+    }
+
+    internal fun init() {}
+}
diff --git a/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTime.kt b/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTime.kt
new file mode 100644
index 00000000..7fb35057
--- /dev/null
+++ b/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTime.kt
@@ -0,0 +1,246 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package pl.treksoft.kvision.form.time
+
+import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.core.StringBoolPair
+import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.form.DateFormControl
+import pl.treksoft.kvision.form.FieldLabel
+import pl.treksoft.kvision.form.InvalidFeedback
+import pl.treksoft.kvision.panel.SimplePanel
+import pl.treksoft.kvision.utils.SnOn
+import kotlin.js.Date
+
+/**
+ * Form field date/time chooser component.
+ *
+ * @constructor
+ * @param value date/time input value
+ * @param name the name attribute of the generated HTML input element
+ * @param format date/time format (default YYYY-MM-DD HH:mm)
+ * @param label label text bound to the input element
+ * @param rich determines if [label] can contain HTML code
+ */
+open class DateTime(
+    value: Date? = null, name: String? = null, format: String = "YYYY-MM-DD HH:mm", label: String? = null,
+    rich: Boolean = false
+) : SimplePanel(setOf("form-group")), DateFormControl {
+
+    /**
+     * Date/time input value.
+     */
+    override var value
+        get() = input.value
+        set(value) {
+            input.value = value
+        }
+    /**
+     * Date/time format.
+     */
+    var format
+        get() = input.format
+        set(value) {
+            input.format = value
+        }
+    /**
+     * The placeholder for the date/time input.
+     */
+    var placeholder
+        get() = input.placeholder
+        set(value) {
+            input.placeholder = value
+        }
+    /**
+     * Determines if the date/time input is automatically focused.
+     */
+    var autofocus
+        get() = input.autofocus
+        set(value) {
+            input.autofocus = value
+        }
+    /**
+     * Determines if the date/time input is read-only.
+     */
+    var readonly
+        get() = input.readonly
+        set(value) {
+            input.readonly = value
+        }
+    /**
+     * Day of the week start. 0 (Sunday) to 6 (Saturday).
+     */
+    var weekStart
+        get() = input.weekStart
+        set(value) {
+            input.weekStart = value
+        }
+    /**
+     * Days of the week that should be disabled. Multiple values should be comma separated.
+     */
+    var daysOfWeekDisabled
+        get() = input.daysOfWeekDisabled
+        set(value) {
+            input.daysOfWeekDisabled = value
+        }
+    /**
+     * Determines if *Clear* button should be visible.
+     */
+    var clearBtn
+        get() = input.clearBtn
+        set(value) {
+            input.clearBtn = value
+        }
+    /**
+     * Determines if *Today* button should be visible.
+     */
+    var todayBtn
+        get() = input.todayBtn
+        set(value) {
+            input.todayBtn = value
+        }
+    /**
+     * Determines if the current day should be highlighted.
+     */
+    var todayHighlight
+        get() = input.todayHighlight
+        set(value) {
+            input.todayHighlight = value
+        }
+    /**
+     * The increment used to build the hour view.
+     */
+    var minuteStep
+        get() = input.minuteStep
+        set(value) {
+            input.minuteStep = value
+        }
+    /**
+     * Determines if meridian views are visible in day and hour views.
+     */
+    var showMeridian
+        get() = input.showMeridian
+        set(value) {
+            input.showMeridian = value
+        }
+    /**
+     * The label text bound to the input element.
+     */
+    var label
+        get() = flabel.content
+        set(value) {
+            flabel.content = value
+        }
+    /**
+     * Determines if [label] can contain HTML code.
+     */
+    var rich
+        get() = flabel.rich
+        set(value) {
+            flabel.rich = value
+        }
+
+    private val idc = "kv_form_time_$counter"
+    final override val input: DateTimeInput = DateTimeInput(value, format).apply {
+        this.id = idc
+        this.name = name
+    }
+    final override val flabel: FieldLabel = FieldLabel(idc, label, rich)
+    final override val invalidFeedback: InvalidFeedback = InvalidFeedback().apply { visible = false }
+
+    init {
+        @Suppress("LeakingThis")
+        input.eventTarget = this
+        this.addInternal(flabel)
+        this.addInternal(input)
+        this.addInternal(invalidFeedback)
+        counter++
+    }
+
+    override fun getSnClass(): List<StringBoolPair> {
+        val cl = super.getSnClass().toMutableList()
+        if (validatorError != null) {
+            cl.add("text-danger" to true)
+        }
+        return cl
+    }
+
+    @Suppress("UNCHECKED_CAST")
+    override fun <T : Widget> setEventListener(block: SnOn<T>.() -> Unit): Widget {
+        input.setEventListener(block)
+        return this
+    }
+
+    override fun setEventListener(block: SnOn<Widget>.() -> Unit): Widget {
+        input.setEventListener(block)
+        return this
+    }
+
+    override fun removeEventListeners(): Widget {
+        input.removeEventListeners()
+        return this
+    }
+
+    /**
+     * Open date/time chooser popup.
+     */
+    open fun showPopup() {
+        input.showPopup()
+    }
+
+    /**
+     * Hides date/time chooser popup.
+     */
+    open fun hidePopup() {
+        input.hidePopup()
+    }
+
+    override fun getValueAsString(): String? {
+        return input.getValueAsString()
+    }
+
+    override fun focus() {
+        input.focus()
+    }
+
+    override fun blur() {
+        input.blur()
+    }
+
+    companion object {
+        internal var counter = 0
+
+        /**
+         * DSL builder extension function.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.dateTime(
+            value: Date? = null, name: String? = null, format: String = "YYYY-MM-DD HH:mm", label: String? = null,
+            rich: Boolean = false, init: (DateTime.() -> Unit)? = null
+        ): DateTime {
+            val dateTime = DateTime(value, name, format, label, rich).apply { init?.invoke(this) }
+            this.add(dateTime)
+            return dateTime
+        }
+    }
+}
diff --git a/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt b/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt
new file mode 100644
index 00000000..66cb6cc0
--- /dev/null
+++ b/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt
@@ -0,0 +1,328 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package pl.treksoft.kvision.form.time
+
+import com.github.snabbdom.VNode
+import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.core.StringBoolPair
+import pl.treksoft.kvision.core.StringPair
+import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.form.FormInput
+import pl.treksoft.kvision.form.InputSize
+import pl.treksoft.kvision.form.ValidationStatus
+import pl.treksoft.kvision.i18n.I18n
+import pl.treksoft.kvision.types.toDateF
+import pl.treksoft.kvision.types.toStringF
+import pl.treksoft.kvision.utils.obj
+import kotlin.js.Date
+
+internal const val DEFAULT_MINUTE_STEP = 5
+internal const val MAX_VIEW = 4
+
+/**
+ * Basic date/time chooser component.
+ *
+ * @constructor
+ * @param value date/time input value
+ * @param format date/time format (default YYYY-MM-DD HH:mm)
+ * @param classes a set of CSS class names
+ */
+@Suppress("TooManyFunctions")
+open class DateTimeInput(
+    value: Date? = null, format: String = "YYYY-MM-DD HH:mm",
+    classes: Set<String> = setOf()
+) : Widget(classes + "form-control"), FormInput {
+
+    private var initialized = false
+
+    init {
+        this.setInternalEventListener<DateTimeInput> {
+            change = {
+                self.changeValue()
+            }
+        }
+    }
+
+    /**
+     * Date/time input value.
+     */
+    var value by refreshOnUpdate(value) { refreshState() }
+    /**
+     * Date/time format.
+     */
+    var format by refreshOnUpdate(format) { refreshDatePicker() }
+    /**
+     * The placeholder for the date/time input.
+     */
+    var placeholder: String? by refreshOnUpdate()
+    /**
+     * The name attribute of the generated HTML input element.
+     */
+    override var name: String? by refreshOnUpdate()
+    /**
+     * Determines if the field is disabled.
+     */
+    override var disabled by refreshOnUpdate(false) { refresh(); checkDisabled() }
+    /**
+     * Determines if the text input is automatically focused.
+     */
+    var autofocus: Boolean? by refreshOnUpdate()
+    /**
+     * Determines if the date/time input is read-only.
+     */
+    var readonly: Boolean? by refreshOnUpdate()
+    /**
+     * The size of the input.
+     */
+    override var size: InputSize? by refreshOnUpdate()
+    /**
+     * The validation status of the input.
+     */
+    override var validationStatus: ValidationStatus? by refreshOnUpdate()
+    /**
+     * Day of the week start. 0 (Sunday) to 6 (Saturday).
+     */
+    var weekStart by refreshOnUpdate(0) { refreshDatePicker() }
+    /**
+     * Days of the week that should be disabled. Multiple values should be comma separated.
+     */
+    var daysOfWeekDisabled by refreshOnUpdate(arrayOf<Int>()) { refreshDatePicker() }
+    /**
+     * Determines if *Clear* button should be visible.
+     */
+    var clearBtn by refreshOnUpdate(true) { refreshDatePicker() }
+    /**
+     * Determines if *Today* button should be visible.
+     */
+    var todayBtn by refreshOnUpdate(false) { refreshDatePicker() }
+    /**
+     * Determines if the current day should be highlighted.
+     */
+    var todayHighlight by refreshOnUpdate(false) { refreshDatePicker() }
+    /**
+     * The increment used to build the hour view.
+     */
+    var minuteStep by refreshOnUpdate(DEFAULT_MINUTE_STEP) { refreshDatePicker() }
+    /**
+     * Determines if meridian views are visible in day and hour views.
+     */
+    var showMeridian by refreshOnUpdate(false) { refreshDatePicker() }
+
+    override fun render(): VNode {
+        return render("input")
+    }
+
+    override fun getSnClass(): List<StringBoolPair> {
+        val cl = super.getSnClass().toMutableList()
+        validationStatus?.let {
+            cl.add(it.className to true)
+        }
+        size?.let {
+            cl.add(it.className to true)
+        }
+        return cl
+    }
+
+    override fun getSnAttrs(): List<StringPair> {
+        val sn = super.getSnAttrs().toMutableList()
+        sn.add("type" to "text")
+        placeholder?.let {
+            sn.add("placeholder" to translate(it))
+        }
+        name?.let {
+            sn.add("name" to it)
+        }
+        autofocus?.let {
+            if (it) {
+                sn.add("autofocus" to "autofocus")
+            }
+        }
+        readonly?.let {
+            if (it) {
+                sn.add("readonly" to "readonly")
+            }
+        }
+        if (disabled) {
+            sn.add("disabled" to "disabled")
+            value?.let {
+                sn.add("value" to it.toStringF(format))
+            }
+        }
+        return sn
+    }
+
+    private fun checkDisabled() {
+        if (disabled) {
+            if (initialized) {
+                getElementJQueryD()?.datetimepicker("remove")
+                initialized = false
+            }
+        } else {
+            if (!initialized) {
+                this.initDateTimePicker()
+                this.initEventHandlers()
+                this.refreshState()
+                initialized = true
+            }
+        }
+    }
+
+    @Suppress("UnsafeCastFromDynamic")
+    protected open fun refreshState() {
+        value?.let {
+            getElementJQueryD()?.datetimepicker("update", it)
+        } ?: run {
+            getElementJQueryD()?.`val`(null)
+            getElementJQueryD()?.datetimepicker("update", null)
+        }
+    }
+
+    protected open fun refreshDatePicker() {
+        getElementJQueryD()?.`val`(null)
+        getElementJQueryD()?.datetimepicker("remove")
+        initDateTimePicker()
+        refreshState()
+    }
+
+    protected open fun changeValue() {
+        val v = getElementJQuery()?.`val`() as String?
+        if (v != null && v.isNotEmpty()) {
+            this.value = v.toDateF(format)
+        } else {
+            this.value = null
+        }
+    }
+
+    /**
+     * Open date/time chooser popup.
+     */
+    open fun showPopup() {
+        if (initialized) getElementJQueryD()?.datetimepicker("show")
+    }
+
+    /**
+     * Hides date/time chooser popup.
+     */
+    open fun hidePopup() {
+        if (initialized) getElementJQueryD()?.datetimepicker("hide")
+    }
+
+    @Suppress("UnsafeCastFromDynamic")
+    override fun afterInsert(node: VNode) {
+        if (!this.disabled) {
+            this.initDateTimePicker()
+            this.initEventHandlers()
+            this.refreshState()
+            initialized = true
+        }
+    }
+
+    override fun afterDestroy() {
+        if (initialized) {
+            getElementJQueryD()?.datetimepicker("remove")
+            initialized = false
+        }
+    }
+
+    private fun initDateTimePicker() {
+        val datePickerFormat = format.toDatePickerFormat()
+        val minView = if (format.contains("HH") || format.contains("mm")) 0 else 2
+        val maxView = if (format.contains("YY") || format.contains("M") || format.contains("D")) MAX_VIEW else 1
+        val startView = if (maxView < 2) maxView else 2
+        val language = I18n.language
+        getElementJQueryD()?.datetimepicker(obj {
+            this.format = datePickerFormat
+            this.startView = startView
+            this.minView = minView
+            this.maxView = maxView
+            this.minuteStep = minuteStep
+            this.todayHighlight = todayHighlight
+            this.clearBtn = clearBtn
+            this.todayBtn = todayBtn
+            this.weekStart = weekStart
+            this.showMeridian = showMeridian
+            this.daysOfWeekDisabled = daysOfWeekDisabled
+            this.autoclose = true
+            this.language = language
+        })
+    }
+
+    private fun initEventHandlers() {
+        this.getElementJQuery()?.on("changeDate") { e, _ ->
+            @Suppress("UnsafeCastFromDynamic")
+            this.dispatchEvent("change", obj { detail = e })
+        }
+        this.getElementJQuery()?.on("show") { e, _ ->
+            @Suppress("UnsafeCastFromDynamic")
+            this.dispatchEvent("showBsDateTime", obj { detail = e })
+        }
+        this.getElementJQuery()?.on("hide") { e, _ ->
+            @Suppress("UnsafeCastFromDynamic")
+            this.dispatchEvent("hideBsDateTime", obj { detail = e })
+        }
+    }
+
+    /**
+     * Get value of date/time input control as String
+     * @return value as a String
+     */
+    fun getValueAsString(): String? {
+        return value?.toStringF(format)
+    }
+
+    /**
+     * Makes the input element focused.
+     */
+    override fun focus() {
+        getElementJQuery()?.focus()
+    }
+
+    /**
+     * Makes the input element blur.
+     */
+    override fun blur() {
+        getElementJQuery()?.blur()
+    }
+
+    companion object {
+
+        private fun String.toDatePickerFormat(): String {
+            return this.replace("YY", "yy").replace("m", "i").replace("MMMM", "{----}").replace("MMM", "{---}")
+                .replace("M", "m").replace("{----}", "MM").replace("{---}", "M").replace("H", "{-}")
+                .replace("h", "H").replace("{-}", "h").replace("D", "d").replace("a", "p").replace("A", "P")
+        }
+
+        /**
+         * DSL builder extension function.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.dateTimeInput(
+            value: Date? = null, format: String = "YYYY-MM-DD HH:mm", classes: Set<String> = setOf(),
+            init: (DateTimeInput.() -> Unit)? = null
+        ): DateTimeInput {
+            val dateTimeInput = DateTimeInput(value, format, classes).apply { init?.invoke(this) }
+            this.add(dateTimeInput)
+            return dateTimeInput
+        }
+    }
+}