From 941ed9bccddc9922d0fe21cf0c25639237c63c06 Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Fri, 10 May 2019 16:38:18 +0800 Subject: [PATCH 1/3] =?UTF-8?q?KERNEL-551=20feat:=20=E6=97=B6=E5=88=86?= =?UTF-8?q?=E7=A7=92=E6=8E=A7=E4=BB=B6=E6=94=AF=E6=8C=81=E6=A0=BC=E5=BC=8F?= =?UTF-8?q?=E5=8C=96=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- changelog.md | 1 + demo/js/config/widget.js | 4 + demo/js/widget/timecombo/demo.timecombo.js | 48 +++++++ src/css/widget/timecombo/timecombo.css | 4 + src/less/widget/timecombo/timecombo.less | 8 ++ src/widget/time/time.combo.js | 74 +++++++++- src/widget/time/time.trigger.js | 156 ++++++++++++++++++--- 7 files changed, 274 insertions(+), 21 deletions(-) create mode 100644 demo/js/widget/timecombo/demo.timecombo.js create mode 100644 src/css/widget/timecombo/timecombo.css create mode 100644 src/less/widget/timecombo/timecombo.less 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; } }); From 7fa489476e7d5f00735178c84869f78599c645b7 Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Fri, 10 May 2019 17:00:53 +0800 Subject: [PATCH 2/3] =?UTF-8?q?KERNEL-552=20feat:=20=E6=97=A5=E6=9C=9F?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E6=8E=A7=E4=BB=B6=E5=85=81=E8=AE=B8=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E6=98=AF=E5=90=A6=E5=8F=AF=E4=BB=A5=E8=BE=93=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/widget/date/demo.multidate_combo.js | 2 + src/widget/dynamicdate/dynamicdate.combo.js | 4 +- src/widget/dynamicdate/dynamicdate.trigger.js | 57 +++++++++++------- .../dynamicdatetime/dynamicdatetime.combo.js | 4 +- .../dynamicdatetime.trigger.js | 58 ++++++++++++------- src/widget/time/time.trigger.js | 3 +- 6 files changed, 85 insertions(+), 43 deletions(-) diff --git a/demo/js/widget/date/demo.multidate_combo.js b/demo/js/widget/date/demo.multidate_combo.js index 604a4a4ae..61b20892c 100644 --- a/demo/js/widget/date/demo.multidate_combo.js +++ b/demo/js/widget/date/demo.multidate_combo.js @@ -21,6 +21,7 @@ Demo.Date = BI.inherit(BI.Widget, { self.datecombo = this; }, width: 300, + // allowEdit: false, // format: "%Y-%X-%d", // yyyy-MM-dd // format: "%Y/%X/%d", // yyyy/MM/dd // format: "%Y-%x-%e", // yyyy-M-d @@ -51,6 +52,7 @@ Demo.Date = BI.inherit(BI.Widget, { self.datetimecombo = this; }, width: 300, + // allowEdit: false, // format: "%Y-%X-%d %H:%M:%S", // yyyy-MM-dd HH:mm:ss // format: "%Y/%X/%d %H:%M:%S", // yyyy/MM/dd HH:mm:ss // format: "%Y-%X-%d %I:%M:%S", // yyyy-MM-dd hh:mm:ss diff --git a/src/widget/dynamicdate/dynamicdate.combo.js b/src/widget/dynamicdate/dynamicdate.combo.js index e53ad57c5..b93cd6394 100644 --- a/src/widget/dynamicdate/dynamicdate.combo.js +++ b/src/widget/dynamicdate/dynamicdate.combo.js @@ -11,7 +11,8 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, { height: 22, minDate: "1900-01-01", maxDate: "2099-12-31", - format: "" + format: "", + allowEdit: true }, @@ -50,6 +51,7 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, { min: opts.minDate, max: opts.maxDate, format: opts.format, + allowEdit: opts.allowEdit, height: opts.height, value: opts.value, ref: function () { diff --git a/src/widget/dynamicdate/dynamicdate.trigger.js b/src/widget/dynamicdate/dynamicdate.trigger.js index e2f695457..d896c4539 100644 --- a/src/widget/dynamicdate/dynamicdate.trigger.js +++ b/src/widget/dynamicdate/dynamicdate.trigger.js @@ -13,7 +13,8 @@ BI.DynamicDateTrigger = BI.inherit(BI.Trigger, { min: "1900-01-01", // 最小日期 max: "2099-12-31", // 最大日期 height: 24, - format: "" // 显示的日期格式化方式 + format: "", // 显示的日期格式化方式 + allowEdit: true // 是否允许编辑 }, _init: function () { @@ -47,25 +48,7 @@ BI.DynamicDateTrigger = BI.inherit(BI.Trigger, { } return str; }, - title: function () { - var storeValue = self.storeValue || {}; - var type = storeValue.type || BI.DynamicDateCombo.Static; - var value = storeValue.value; - switch (type) { - case BI.DynamicDateCombo.Dynamic: - var text = self._getText(value); - var date = BI.getDate(); - date = BI.DynamicDateHelper.getCalculation(value); - var dateStr = BI.print(date, self._getFormatString()); - return BI.isEmptyString(text) ? dateStr : (text + ":" + dateStr); - case BI.DynamicDateCombo.Static: - default: - if (BI.isNull(value) || BI.isNull(value.day)) { - return ""; - } - return BI.print(BI.getDate(value.year, (value.month - 1), value.day), self._getFormatString()); - } - } + title: BI.bind(this._getTitle, this) }); this.editor.on(BI.SignEditor.EVENT_KEY_DOWN, function () { self.fireEvent(BI.DynamicDateTrigger.EVENT_KEY_DOWN); @@ -124,9 +107,43 @@ BI.DynamicDateTrigger = BI.inherit(BI.Trigger, { width: 24 }] }); + !o.allowEdit && BI.createWidget({ + type: "bi.absolute", + element: this, + items: [{ + el: { + type: "bi.text", + title: BI.bind(this._getTitle, this) + }, + left: 0, + right: 24, + top: 0, + bottom: 0 + }] + }); this.setValue(o.value); }, + _getTitle: function () { + var storeValue = this.storeValue || {}; + var type = storeValue.type || BI.DynamicDateCombo.Static; + var value = storeValue.value; + switch (type) { + case BI.DynamicDateCombo.Dynamic: + var text = this._getText(value); + var date = BI.getDate(); + date = BI.DynamicDateHelper.getCalculation(value); + var dateStr = BI.print(date, this._getFormatString()); + return BI.isEmptyString(text) ? dateStr : (text + ":" + dateStr); + case BI.DynamicDateCombo.Static: + default: + if (BI.isNull(value) || BI.isNull(value.day)) { + return ""; + } + return BI.print(BI.getDate(value.year, (value.month - 1), value.day), this._getFormatString()); + } + }, + _getStandardDateStr: function (v) { var c = this._const; var result = [0, 1, 2]; diff --git a/src/widget/dynamicdatetime/dynamicdatetime.combo.js b/src/widget/dynamicdatetime/dynamicdatetime.combo.js index 531e18f98..ee5e9429b 100644 --- a/src/widget/dynamicdatetime/dynamicdatetime.combo.js +++ b/src/widget/dynamicdatetime/dynamicdatetime.combo.js @@ -11,7 +11,8 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, { height: 22, minDate: "1900-01-01", maxDate: "2099-12-31", - format: "" + format: "", + allowEdit: true }, @@ -49,6 +50,7 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, { type: "bi.dynamic_date_time_trigger", min: opts.minDate, max: opts.maxDate, + allowEdit: opts.allowEdit, format: opts.format, height: opts.height, value: opts.value, diff --git a/src/widget/dynamicdatetime/dynamicdatetime.trigger.js b/src/widget/dynamicdatetime/dynamicdatetime.trigger.js index 819302b45..68e7463b1 100644 --- a/src/widget/dynamicdatetime/dynamicdatetime.trigger.js +++ b/src/widget/dynamicdatetime/dynamicdatetime.trigger.js @@ -13,7 +13,8 @@ BI.DynamicDateTimeTrigger = BI.inherit(BI.Trigger, { min: "1900-01-01", // 最小日期 max: "2099-12-31", // 最大日期 height: 24, - format: "" // 显示的日期格式化方式 + format: "", // 显示的日期格式化方式 + allowEdit: true // 是否允许编辑 }, _init: function () { @@ -47,25 +48,7 @@ BI.DynamicDateTimeTrigger = BI.inherit(BI.Trigger, { } return str; }, - title: function () { - var storeValue = self.storeValue || {}; - var type = storeValue.type || BI.DynamicDateCombo.Static; - var value = storeValue.value; - switch (type) { - case BI.DynamicDateCombo.Dynamic: - var text = self._getText(value); - var date = BI.DynamicDateHelper.getCalculation(value); - var dateStr = BI.print(date, self._getFormatString()); - return BI.isEmptyString(text) ? dateStr : (text + ":" + dateStr); - case BI.DynamicDateCombo.Static: - default: - if (BI.isNull(value) || BI.isNull(value.day)) { - return ""; - } - return BI.print(BI.getDate(value.year, (value.month - 1), value.day, value.hour || 0, value.minute || 0, - value.second || 0), self._getFormatString()); - } - } + title: BI.bind(this._getTitle, this) }); this.editor.on(BI.SignEditor.EVENT_KEY_DOWN, function () { self.fireEvent(BI.DynamicDateTimeTrigger.EVENT_KEY_DOWN); @@ -122,9 +105,44 @@ BI.DynamicDateTimeTrigger = BI.inherit(BI.Trigger, { width: 24 }] }); + + !o.allowEdit && BI.createWidget({ + type: "bi.absolute", + element: this, + items: [{ + el: { + type: "bi.text", + title: BI.bind(this._getTitle, this) + }, + left: 0, + right: 24, + top: 0, + bottom: 0 + }] + }); this.setValue(o.value); }, + _getTitle: function () { + var storeValue = this.storeValue || {}; + var type = storeValue.type || BI.DynamicDateCombo.Static; + var value = storeValue.value; + switch (type) { + case BI.DynamicDateCombo.Dynamic: + var text = this._getText(value); + var date = BI.DynamicDateHelper.getCalculation(value); + var dateStr = BI.print(date, this._getFormatString()); + return BI.isEmptyString(text) ? dateStr : (text + ":" + dateStr); + case BI.DynamicDateCombo.Static: + default: + if (BI.isNull(value) || BI.isNull(value.day)) { + return ""; + } + return BI.print(BI.getDate(value.year, (value.month - 1), value.day, value.hour || 0, value.minute || 0, + value.second || 0), this._getFormatString()); + } + }, + _getStandardDateStr: function (v) { var result = []; var hasSecond = false; diff --git a/src/widget/time/time.trigger.js b/src/widget/time/time.trigger.js index d8e99d368..f61dfe718 100644 --- a/src/widget/time/time.trigger.js +++ b/src/widget/time/time.trigger.js @@ -135,7 +135,8 @@ _getTitle: function () { var storeValue = this.storeValue || {}; - return BI.print(BI.getDate(storeValue.year, (storeValue.month - 1), storeValue.day), this._getFormatString()); + var date = BI.getDate(); + return BI.print(BI.getDate(date.getFullYear(), 0, 1, storeValue.hour, storeValue.minute, storeValue.second), this._getFormatString()); }, _getFormatString: function () { From 7e07f11ed26413160ea5e774dc27203787325065 Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Fri, 10 May 2019 17:03:16 +0800 Subject: [PATCH 3/3] =?UTF-8?q?KERNEL-552=20feat:=20=E6=97=A5=E6=9C=9F?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E6=8E=A7=E4=BB=B6=E5=8F=AF=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E6=98=AF=E5=90=A6=E5=8F=AF=E7=BC=96=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- changelog.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/changelog.md b/changelog.md index 6a74bc0cd..446cc57fe 100644 --- a/changelog.md +++ b/changelog.md @@ -1,8 +1,8 @@ # 更新日志 2.0(2019-05) - 时分秒控件支持自定义时间显示格式和是否可编辑 -- 日期/时间/日期区间/时间区间支持自定义日期选择范围 -- 日期/时间/日期区间/时间区间支持自定义日期显示格式 +- 日期/时间/日期区间/时间区间支持自定义日期选择范围和是否可编辑 +- 日期/时间/日期区间/时间区间支持自定义日期显示格式和是否可编辑 - 增加less函数: 字体资源添加函数addFontRe和字体激活函数activeFont > @fontList: "dec", "report";