diff --git a/changelog.md b/changelog.md index 75ef9bf55..b3d791d9c 100644 --- a/changelog.md +++ b/changelog.md @@ -2,6 +2,7 @@ 2.0(2019-05) - 日期/时间/日期区间/时间区间支持自定义日期选择范围 - 日期/时间/日期区间/时间区间支持自定义日期显示格式 +- 时分秒控件支持自定义时间显示格式和是否可编辑 2.0(2019-04) - 新增`bi.multi_tree_list_combo`控件, 此下拉树勾选节点时不会影响父子节点的勾选状态 diff --git a/demo/js/config/widget.js b/demo/js/config/widget.js index 32139ce0b..0b6ddc771 100644 --- a/demo/js/config/widget.js +++ b/demo/js/config/widget.js @@ -170,6 +170,10 @@ Demo.WIDGET_CONFIG = [{ pId: 412, text: "bi.date_time", value: "demo.date_time" +}, { + pId: 412, + text: "bi.time_combo", + value: "demo.time_combo" }, { pId: 412, text: "bi.time_interval", diff --git a/demo/js/widget/timecombo/demo.timecombo.js b/demo/js/widget/timecombo/demo.timecombo.js new file mode 100644 index 000000000..4808c6c33 --- /dev/null +++ b/demo/js/widget/timecombo/demo.timecombo.js @@ -0,0 +1,48 @@ +/** + * Created by Dailer on 2017/7/13. + */ +Demo.TimeCombo = BI.inherit(BI.Widget, { + props: { + baseCls: "" + }, + + render: function () { + var self = this; + return { + type: "bi.horizontal_auto", + items: [{ + type: "bi.time_combo", + ref: function (_ref) { + self.timeCombo = _ref; + }, + // allowEdit: true, + // format: "%H:%M:%S", // HH:mm:ss + // format: "%I:%M:%S", // hh:mm:ss + // format: "%l:%M:%S", // h:mm:ss + // format: "%k:%M:%S", // H:mm:ss + // format: "%l:%M:%S %p", // h:mm:ss a + // format: "%l:%M", // h:mm + // format: "%k:%M", // H:mm + // format: "%I:%M", // hh:mm + // format: "%H:%M", // HH:mm + // format: "%M:%S", // mm:ss + value: { + hour: 12, + minute: 0, + second: 0 + }, + width: 300 + }, { + type: "bi.button", + text: "getValue", + handler: function () { + BI.Msg.toast(JSON.stringify(self.timeCombo.getValue())); + }, + width: 300 + }], + vgap: 20 + }; + } +}); + +BI.shortcut("demo.time_combo", Demo.TimeCombo); \ No newline at end of file diff --git a/src/css/widget/timecombo/timecombo.css b/src/css/widget/timecombo/timecombo.css new file mode 100644 index 000000000..487b89486 --- /dev/null +++ b/src/css/widget/timecombo/timecombo.css @@ -0,0 +1,4 @@ +.bi-time-trigger .show-text { + background-color: rgba(255, 255, 255, 0); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff,endColorstr=#00ffffff); +} diff --git a/src/less/widget/timecombo/timecombo.less b/src/less/widget/timecombo/timecombo.less new file mode 100644 index 000000000..e1ed24438 --- /dev/null +++ b/src/less/widget/timecombo/timecombo.less @@ -0,0 +1,8 @@ +@import "../../index"; + +.bi-time-trigger{ + & .show-text { + // ie10一下无背景色会鼠标穿透 + .background-color(@background-color-default, 0); + } +} \ No newline at end of file diff --git a/src/widget/time/time.combo.js b/src/widget/time/time.combo.js index 644ccbd08..2d4693504 100644 --- a/src/widget/time/time.combo.js +++ b/src/widget/time/time.combo.js @@ -15,12 +15,14 @@ props: { baseCls: "bi-time-combo bi-border bi-border-radius", width: 78, - height: 22 + height: 22, + format: "", + allowEdit: false }, render: function () { var self = this, opts = this.options; - + this.storeTriggerValue = ""; this.storeValue = opts.value; var popup = { @@ -63,10 +65,74 @@ isNeedAdjustWidth: false, el: { type: "bi.time_trigger", + allowEdit: opts.allowEdit, + format: opts.format, value: opts.value, ref: function (_ref) { self.trigger = _ref; - } + }, + listeners: [{ + eventName: "EVENT_KEY_DOWN", + action: function () { + if (self.combo.isViewVisible()) { + self.combo.hideView(); + } + } + }, { + eventName: "EVENT_STOP", + action: function () { + if (!self.combo.isViewVisible()) { + self.combo.showView(); + } + } + }, { + eventName: "EVENT_FOCUS", + action: function () { + self.storeTriggerValue = self.trigger.getKey(); + if (!self.combo.isViewVisible()) { + self.combo.showView(); + } + self.fireEvent("EVENT_FOCUS"); + } + }, { + eventName: "EVENT_ERROR", + action: function () { + var date = BI.getDate(); + self.storeValue = { + hour: date.getHours(), + minute: date.getMinutes(), + second: date.getSeconds() + }; + self.fireEvent("EVENT_ERROR"); + } + }, { + eventName: "EVENT_VALID", + action: function () { + self.fireEvent("EVENT_VALID"); + } + }, { + eventName: "EVENT_CHANGE", + action: function () { + self.fireEvent("EVENT_CHANGE"); + } + }, { + eventName: "EVENT_CONFIRM", + action: function () { + if (self.combo.isViewVisible()) { + return; + } + var dateStore = self.storeTriggerValue; + var dateObj = self.trigger.getKey(); + if (BI.isNotEmptyString(dateObj) && !BI.isEqual(dateObj, dateStore)) { + self.storeValue = self.trigger.getValue(); + self.setValue(self.trigger.getValue()); + } else if (BI.isEmptyString(dateObj)) { + self.storeValue = null; + self.trigger.setValue(); + } + self.fireEvent("EVENT_CONFIRM"); + } + }] }, adjustLength: this.constants.comboAdjustHeight, popup: { @@ -90,7 +156,7 @@ }, top: 0, left: 0, - right: 0, + right: 22, bottom: 0 }, { el: { diff --git a/src/widget/time/time.trigger.js b/src/widget/time/time.trigger.js index 860d2f6d7..d8e99d368 100644 --- a/src/widget/time/time.trigger.js +++ b/src/widget/time/time.trigger.js @@ -1,41 +1,163 @@ !(function () { BI.TimeTrigger = BI.inherit(BI.Trigger, { + + _const: { + COMPARE_FORMAT: "%H:%M:%S", + COMPLETE_COMPARE_FORMAT: "%Y-%M-%d %H:%M:%S", + FORMAT_ARRAY: [ + "%H:%M:%S", // HH:mm:ss + "%I:%M:%S", // hh:mm:ss + "%l:%M:%S", // h:mm:ss + "%k:%M:%S", // H:mm:ss + "%l:%M:%S %p", // h:mm:ss a + "%l:%M:%S %P", // h:mm:ss a + "%l:%M", // h:mm + "%k:%M", // H:mm + "%I:%M", // hh:mm + "%H:%M", // HH:mm + "%M:%S" // mm:ss + ], + DEFAULT_DATE_STRING: "2000-01-01" + }, + props: { extraCls: "bi-time-trigger", - height: 22, - width: 80, - value: {} + value: {}, + format: "", + allowEdit: false }, + render: function () { var self = this, o = this.options; + this.storeTriggerValue = ""; + this.storeValue = o.value; return { - type: "bi.htape", + type: "bi.absolute", items: [{ el: { - type: "bi.label", - title: function () { - return self.text.getText(); - }, - textAlign: "left", + type: "bi.sign_editor", height: o.height, - width: o.width, - text: this._formatValue(o.value), + validationChecker: function (v) { + return self._dateCheck(v); + }, + quitChecker: function () { + return false; + }, ref: function (_ref) { - self.text = _ref; - } + self.editor = _ref; + }, + value: this._formatValue(o.value), + hgap: 4, + allowBlank: true, + watermark: BI.i18nText("BI-Basic_Unrestricted"), + title: BI.bind(this._getTitle, this), + listeners: [{ + eventName: "EVENT_KEY_DOWN", + action: function () { + self.fireEvent("EVENT_KEY_DOWN"); + } + }, { + eventName: "EVENT_FOCUS", + action: function () { + self.storeTriggerValue = self.getKey(); + self.fireEvent("EVENT_FOCUS"); + } + }, { + eventName: "EVENT_STOP", + action: function () { + self.fireEvent("EVENT_STOP"); + } + }, { + eventName: "EVENT_VALID", + action: function () { + self.fireEvent("EVENT_VALID"); + } + }, { + eventName: "EVENT_ERROR", + action: function () { + self.fireEvent("EVENT_ERROR"); + } + }, { + eventName: "EVENT_CONFIRM", + action: function () { + var value = self.editor.getValue(); + if (BI.isNotNull(value)) { + self.editor.setState(value); + } + if (BI.isNotEmptyString(value) && !BI.isEqual(self.storeTriggerValue, self.getKey())) { + var date = value.match(/\d+/g); + self.storeValue = { + hour: date[0] | 0, + minute: date[1] | 0, + second: date[2] | 0 + }; + } + self.fireEvent("EVENT_CONFIRM"); + } + }, { + eventName: "EVENT_START", + action: function () { + self.fireEvent("EVENT_START"); + } + }, { + eventName: "EVENT_CHANGE", + action: function () { + self.fireEvent("EVENT_CHANGE"); + } + }] }, - hgap: 4 + left: 0, + right: 0, + top: 0, + bottom: 0 + }, { + el: { + type: "bi.text", + invisible: o.allowEdit, + cls: "show-text", + title: BI.bind(this._getTitle, this), + hgap: 4 + }, + left: 0, + right: 0, + top: 0, + bottom: 0 }] }; }, - setValue: function (v) { - this.text.setText(this._formatValue(v)); + _dateCheck: function (date) { + var c = this._const; + return BI.any(c.FORMAT_ARRAY, function (idx, format) { + return BI.print(BI.parseDateTime(c.DEFAULT_DATE_STRING + " " + date, c.COMPLETE_COMPARE_FORMAT), format) === date; + }); + }, + + _getTitle: function () { + var storeValue = this.storeValue || {}; + return BI.print(BI.getDate(storeValue.year, (storeValue.month - 1), storeValue.day), this._getFormatString()); + }, + + _getFormatString: function () { + return this.options.format || this._const.COMPARE_FORMAT; }, _formatValue: function (v) { var now = BI.getDate(); - return BI.isNotEmptyObject(v) ? BI.print(BI.getDate(now.getFullYear(), now.getMonth(), now.getDay(), v.hour, v.minute, v.second), "%H:%M:%S") : BI.i18nText("BI-Basic_Unrestricted"); + return BI.isNotEmptyObject(v) ? BI.print(BI.getDate(now.getFullYear(), now.getMonth(), now.getDay(), v.hour, v.minute, v.second), this._getFormatString()) : BI.i18nText("BI-Basic_Unrestricted"); + }, + + getKey: function () { + return this.editor.getValue(); + }, + + setValue: function (v) { + this.storeValue = v; + this.editor.setValue(this._formatValue(v)); + }, + + getValue: function () { + return this.storeValue; } });