caoww
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

KERNEL-551 feat: 时分秒控件支持格式化配置

es6
windy 6 years ago
parent
873dec27fa
commit
941ed9bccd
7 changed files with 274 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      changelog.md
  2. 4
      demo/js/config/widget.js
  3. 48
      demo/js/widget/timecombo/demo.timecombo.js
  4. 4
      src/css/widget/timecombo/timecombo.css
  5. 8
      src/less/widget/timecombo/timecombo.less
  6. 74
      src/widget/time/time.combo.js
  7. 156
      src/widget/time/time.trigger.js

1
changelog.md
Unescape View File

@ -2,6 +2,7 @@
2.0(2019-05)
- 日期/时间/日期区间/时间区间支持自定义日期选择范围
- 日期/时间/日期区间/时间区间支持自定义日期显示格式
- 时分秒控件支持自定义时间显示格式和是否可编辑
2.0(2019-04)
- 新增`bi.multi_tree_list_combo`控件, 此下拉树勾选节点时不会影响父子节点的勾选状态

4
demo/js/config/widget.js
Unescape View File

@ -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",

48
demo/js/widget/timecombo/demo.timecombo.js
Unescape View File

@ -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);

4
src/css/widget/timecombo/timecombo.css
Unescape View File

@ -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);
}

8
src/less/widget/timecombo/timecombo.less
Unescape View File

@ -0,0 +1,8 @@
@import "../../index";
.bi-time-trigger{
& .show-text {
// ie10一下无背景色会鼠标穿透
.background-color(@background-color-default, 0);
}
}

74
src/widget/time/time.combo.js
Unescape View File

@ -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: {

156
src/widget/time/time.trigger.js
Unescape View File

@ -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;
}
});

Write Preview
Loading…
Cancel
Save