Updated DateTime form control (#89)

53 files changed, 262 insertions, 1021 deletions

diff --git a/kvision-modules/kvision-bootstrap-datetime/build.gradle b/kvision-modules/kvision-bootstrap-datetime/build.gradle
index fb440934..8cb14799 100644
--- a/kvision-modules/kvision-bootstrap-datetime/build.gradle
+++ b/kvision-modules/kvision-bootstrap-datetime/build.gradle
@@ -7,7 +7,7 @@ dependencies {
 kotlinFrontend {
 
     npm {
-        dependency("bootstrap-datetime-picker", "2.4.4")
+        dependency("pc-bootstrap4-datetimepicker", "4.17.50")
     }
 
 }
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
index 41f8620f..c02a116d 100644
--- 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
@@ -28,47 +28,8 @@ internal val kVManagerDatetimeInit = KVManagerDatetime.init()
  */
 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")
+        require("pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.min.css")
+        require("pc-bootstrap4-datetimepicker/build/js/bootstrap-datetimepicker.min.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
index 7fb35057..b7cf18ec 100644
--- 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
@@ -87,14 +87,6 @@ open class DateTime(
             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
@@ -105,42 +97,82 @@ open class DateTime(
     /**
      * Determines if *Clear* button should be visible.
      */
-    var clearBtn
-        get() = input.clearBtn
+    var showClear
+        get() = input.showClear
         set(value) {
-            input.clearBtn = value
+            input.showClear = value
         }
     /**
-     * Determines if *Today* button should be visible.
+     * Determines if *Close* button should be visible.
      */
-    var todayBtn
-        get() = input.todayBtn
+    var showClose
+        get() = input.showClose
         set(value) {
-            input.todayBtn = value
+            input.showClose = value
         }
     /**
-     * Determines if the current day should be highlighted.
+     * Determines if *Today* button should be visible.
      */
-    var todayHighlight
-        get() = input.todayHighlight
+    var showTodayButton
+        get() = input.showTodayButton
         set(value) {
-            input.todayHighlight = value
+            input.showTodayButton = value
         }
     /**
      * The increment used to build the hour view.
      */
-    var minuteStep
-        get() = input.minuteStep
+    var stepping
+        get() = input.stepping
+        set(value) {
+            input.stepping = value
+        }
+    /**
+     * Prevents date selection before this date.
+     */
+    var minDate
+        get() = input.minDate
+        set(value) {
+            input.minDate = value
+        }
+    /**
+     * Prevents date selection after this date.
+     */
+    var maxDate
+        get() = input.maxDate
+        set(value) {
+            input.maxDate = value
+        }
+    /**
+     * Shows date and time pickers side by side.
+     */
+    var sideBySide
+        get() = input.sideBySide
+        set(value) {
+            input.sideBySide = value
+        }
+    /**
+     * An array of enabled dates.
+     */
+    var enabledDates
+        get() = input.enabledDates
         set(value) {
-            input.minuteStep = value
+            input.enabledDates = value
         }
     /**
-     * Determines if meridian views are visible in day and hour views.
+     * An array of disabled dates.
      */
-    var showMeridian
-        get() = input.showMeridian
+    var disabledDates
+        get() = input.disabledDates
         set(value) {
-            input.showMeridian = value
+            input.disabledDates = value
+        }
+    /**
+     * Allow date picker for readonly component..
+     */
+    var ignoreReadonly
+        get() = input.ignoreReadonly
+        set(value) {
+            input.ignoreReadonly = value
         }
     /**
      * The label text bound to the input element.
@@ -214,6 +246,13 @@ open class DateTime(
         input.hidePopup()
     }
 
+    /**
+     * Toggle date/time chooser popup.
+     */
+    open fun togglePopup() {
+        input.togglePopup()
+    }
+
     override fun getValueAsString(): String? {
         return input.getValueAsString()
     }
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
index 66cb6cc0..e0da98f8 100644
--- 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
@@ -24,19 +24,20 @@ 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.form.text.TextInput
+import pl.treksoft.kvision.html.Div
+import pl.treksoft.kvision.html.Icon
+import pl.treksoft.kvision.html.Icon.Companion.icon
+import pl.treksoft.kvision.html.Span.Companion.span
 import pl.treksoft.kvision.i18n.I18n
+import pl.treksoft.kvision.panel.SimplePanel
 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
+internal const val DEFAULT_STEPPING = 5
 
 /**
  * Basic date/time chooser component.
@@ -50,22 +51,32 @@ internal const val MAX_VIEW = 4
 open class DateTimeInput(
     value: Date? = null, format: String = "YYYY-MM-DD HH:mm",
     classes: Set<String> = setOf()
-) : Widget(classes + "form-control"), FormInput {
+) : SimplePanel(classes + "input-group" + "date"), FormInput {
 
     private var initialized = false
 
-    init {
-        this.setInternalEventListener<DateTimeInput> {
-            change = {
-                self.changeValue()
-            }
+    internal val input = TextInput(value = value?.toStringF(format))
+    private lateinit var icon: Icon
+    private val addon = Div(classes = setOf("input-group-append")) {
+        span(classes = setOf("input-group-text", "datepickerbutton")) {
+            icon = icon(getIconClass(format))
         }
     }
 
+    init {
+        addInternal(input)
+        addInternal(addon)
+    }
+
     /**
      * Date/time input value.
      */
-    var value by refreshOnUpdate(value) { refreshState() }
+    var value
+        get() = input.value?.toDateF(format)
+        set(value) {
+            input.value = value?.toStringF(format)
+            refreshState()
+        }
     /**
      * Date/time format.
      */
@@ -73,35 +84,60 @@ open class DateTimeInput(
     /**
      * The placeholder for the date/time input.
      */
-    var placeholder: String? by refreshOnUpdate()
+    var placeholder
+        get() = input.placeholder
+        set(value) {
+            input.placeholder = value
+        }
     /**
      * The name attribute of the generated HTML input element.
      */
-    override var name: String? by refreshOnUpdate()
+    override var name
+        get() = input.name
+        set(value) {
+            input.name = value
+        }
     /**
      * Determines if the field is disabled.
      */
-    override var disabled by refreshOnUpdate(false) { refresh(); checkDisabled() }
+    override var disabled
+        get() = input.disabled
+        set(value) {
+            input.disabled = value
+        }
     /**
      * Determines if the text input is automatically focused.
      */
-    var autofocus: Boolean? by refreshOnUpdate()
+    var autofocus
+        get() = input.autofocus
+        set(value) {
+            input.autofocus = value
+        }
     /**
      * Determines if the date/time input is read-only.
      */
-    var readonly: Boolean? by refreshOnUpdate()
+    var readonly
+        get() = input.readonly
+        set(value) {
+            input.readonly = value
+        }
     /**
      * The size of the input.
      */
-    override var size: InputSize? by refreshOnUpdate()
+    override var size
+        get() = input.size
+        set(value) {
+            input.size = value
+        }
     /**
      * 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() }
+    override var validationStatus
+        get() = input.validationStatus
+        set(value) {
+            input.validationStatus = value
+            refresh()
+        }
     /**
      * Days of the week that should be disabled. Multiple values should be comma separated.
      */
@@ -109,26 +145,54 @@ open class DateTimeInput(
     /**
      * Determines if *Clear* button should be visible.
      */
-    var clearBtn by refreshOnUpdate(true) { refreshDatePicker() }
+    var showClear by refreshOnUpdate(true) { refreshDatePicker() }
     /**
-     * Determines if *Today* button should be visible.
+     * Determines if *Close* button should be visible.
      */
-    var todayBtn by refreshOnUpdate(false) { refreshDatePicker() }
+    var showClose by refreshOnUpdate(true) { refreshDatePicker() }
     /**
-     * Determines if the current day should be highlighted.
+     * Determines if *Today* button should be visible.
      */
-    var todayHighlight by refreshOnUpdate(false) { refreshDatePicker() }
+    var showTodayButton by refreshOnUpdate(true) { refreshDatePicker() }
     /**
      * The increment used to build the hour view.
      */
-    var minuteStep by refreshOnUpdate(DEFAULT_MINUTE_STEP) { refreshDatePicker() }
+    var stepping by refreshOnUpdate(DEFAULT_STEPPING) { refreshDatePicker() }
+    /**
+     * Prevents date selection before this date.
+     */
+    var minDate: Date? by refreshOnUpdate { refreshDatePicker() }
     /**
-     * Determines if meridian views are visible in day and hour views.
+     * Prevents date selection after this date.
      */
-    var showMeridian by refreshOnUpdate(false) { refreshDatePicker() }
+    var maxDate: Date? by refreshOnUpdate { refreshDatePicker() }
+    /**
+     * Shows date and time pickers side by side.
+     */
+    var sideBySide by refreshOnUpdate(false) { refreshDatePicker() }
+    /**
+     * An array of enabled dates.
+     */
+    var enabledDates by refreshOnUpdate(arrayOf<Date>()) { refreshDatePicker() }
+    /**
+     * An array of disabled dates.
+     */
+    var disabledDates by refreshOnUpdate(arrayOf<Date>()) { refreshDatePicker() }
+    /**
+     * Allow date picker for readonly component.
+     */
+    var ignoreReadonly by refreshOnUpdate(false) { refreshDatePicker() }
 
-    override fun render(): VNode {
-        return render("input")
+    private fun refreshState() {
+        if (initialized) getElementJQueryD().data("DateTimePicker").date(value)
+    }
+
+    private fun getIconClass(format: String): String {
+        return if (format.contains("YYYY") || format.contains("MM") || format.contains("DD")) {
+            "fas fa-calendar-alt"
+        } else {
+            "fas fa-clock"
+        }
     }
 
     override fun getSnClass(): List<StringBoolPair> {
@@ -136,146 +200,137 @@ open class DateTimeInput(
         validationStatus?.let {
             cl.add(it.className to true)
         }
-        size?.let {
-            cl.add(it.className to true)
-        }
         return cl
     }
 
-    override fun getSnAttrs(): List<StringPair> {