diff options
Diffstat (limited to 'kvision-modules/kvision-bootstrap-datetime/src/main/kotlin')
3 files changed, 256 insertions, 208 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 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> { - 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 + if (initialized) { + getElementJQueryD()?.data("DateTimePicker").destroy() } + initDateTimePicker() + icon.icon = getIconClass(format) } /** * Open date/time chooser popup. */ open fun showPopup() { - if (initialized) getElementJQueryD()?.datetimepicker("show") + if (initialized) getElementJQueryD()?.data("DateTimePicker").show() } /** * Hides date/time chooser popup. */ open fun hidePopup() { - if (initialized) getElementJQueryD()?.datetimepicker("hide") + if (initialized) getElementJQueryD()?.data("DateTimePicker").hide() + } + + /** + * Toggles date/time chooser popup. + */ + open fun togglePopup() { + if (initialized) getElementJQueryD()?.data("DateTimePicker").toggle() } @Suppress("UnsafeCastFromDynamic") override fun afterInsert(node: VNode) { - if (!this.disabled) { - this.initDateTimePicker() - this.initEventHandlers() - this.refreshState() - initialized = true - } + this.initDateTimePicker() + this.initEventHandlers() + initialized = true } override fun afterDestroy() { if (initialized) { - getElementJQueryD()?.datetimepicker("remove") + getElementJQueryD()?.data("DateTimePicker").destroy() 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 + val self = this 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 + this.useCurrent = false + this.format = format + this.stepping = stepping + this.showClear = showClear + this.showClose = showClose + this.showTodayButton = showTodayButton + this.sideBySide = sideBySide + this.ignoreReadonly = ignoreReadonly + if (minDate != null) this.minDate = minDate + if (maxDate != null) this.maxDate = maxDate + if (daysOfWeekDisabled.isNotEmpty()) this.daysOfWeekDisabled = daysOfWeekDisabled + if (enabledDates.isNotEmpty()) this.enabledDates = enabledDates + if (disabledDates.isNotEmpty()) this.disabledDates = disabledDates + this.locale = language + this.icons = obj { + this.time = "far fa-clock" + this.date = "far fa-calendar" + this.up = "fas fa-arrow-up" + this.down = "fas fa-arrow-down" + this.previous = "fas fa-chevron-left" + this.next = "fas fa-chevron-right" + this.today = "fas fa-calendar-check" + this.clear = "far fa-trash-alt" + this.close = "far fa-times-circle" + } + this.tooltips = obj { + this.today = "" + this.clear = "" + this.close = "" + this.selectMonth = "" + this.prevMonth = "" + this.nextMonth = "" + this.selectYear = "" + this.prevYear = "" + this.nextYear = "" + this.selectDecade = "" + this.prevDecade = "" + this.nextDecade = "" + this.prevCentury = "" + this.nextCentury = "" + this.pickHour = "" + this.incrementHour = "" + this.decrementHour = "" + this.pickMinute = "" + this.incrementMinute = "" + this.decrementMinute = "" + this.pickSecond = "" + this.incrementSecond = "" + this.decrementSecond = "" + this.togglePeriod = "" + this.selectTime = "" + } + this.keyBinds = obj { + enter = { + self.togglePopup() + } + } }) } private fun initEventHandlers() { - this.getElementJQuery()?.on("changeDate") { e, _ -> + this.getElementJQuery()?.on("dp.change") { e, _ -> + val moment = e.asDynamic().date + if (moment) { + this.value = moment.toDate() + } else { + this.value = null + } @Suppress("UnsafeCastFromDynamic") this.dispatchEvent("change", obj { detail = e }) } - this.getElementJQuery()?.on("show") { e, _ -> + this.getElementJQuery()?.on("dp.error") { e, _ -> + this.value = null + @Suppress("UnsafeCastFromDynamic") + this.dispatchEvent("change", obj { detail = e }) + } + this.getElementJQuery()?.on("dp.show") { e, _ -> @Suppress("UnsafeCastFromDynamic") this.dispatchEvent("showBsDateTime", obj { detail = e }) } - this.getElementJQuery()?.on("hide") { e, _ -> + this.getElementJQuery()?.on("dp.hide") { e, _ -> @Suppress("UnsafeCastFromDynamic") this.dispatchEvent("hideBsDateTime", obj { detail = e }) } @@ -293,24 +348,17 @@ open class DateTimeInput( * Makes the input element focused. */ override fun focus() { - getElementJQuery()?.focus() + input.focus() } /** * Makes the input element blur. */ override fun blur() { - getElementJQuery()?.blur() + input.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. * |