forked from fanruan/fineui
Browse Source
# Conflicts: # bi/base.js # bi/widget.css # bi/widget.js # demo/js/config/widget.js # docs/base.js # docs/demo.js # docs/widget.jsmaster
刘荣歆
8 years ago
27 changed files with 2782 additions and 352 deletions
@ -0,0 +1,30 @@
|
||||
/** |
||||
* Created by Urthur on 2017/7/18. |
||||
*/ |
||||
Demo.CustomDateTime = BI.inherit(BI.Widget, { |
||||
props: { |
||||
}, |
||||
render: function () { |
||||
var self = this; |
||||
return { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.custom_date_time_combo", |
||||
ref: function (_ref) { |
||||
self.customDateTime = _ref; |
||||
self.customDateTime.on(BI.CustomDateTimeCombo.EVENT_CONFIRM, function () { |
||||
BI.Msg.alert("日期", this.getValue().text); |
||||
}); |
||||
self.customDateTime.on(BI.CustomDateTimeCombo.EVENT_CANCEL, function () { |
||||
BI.Msg.alert("日期", this.getValue().text); |
||||
}); |
||||
} |
||||
}, |
||||
top: 200, |
||||
left: 200 |
||||
}] |
||||
}; |
||||
} |
||||
}); |
||||
BI.shortcut("demo.custom_date_time", Demo.CustomDateTime); |
@ -0,0 +1,132 @@
|
||||
/** |
||||
* Created by Urthur on 2017/7/14. |
||||
*/ |
||||
BI.DateTimeCombo = BI.inherit(BI.Single, { |
||||
constants: { |
||||
popupHeight: 290, |
||||
popupWidth: 270, |
||||
comboAdjustHeight: 1, |
||||
border: 1, |
||||
DATE_MIN_VALUE: "1900-01-01", |
||||
DATE_MAX_VALUE: "2099-12-31" |
||||
}, |
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.DateTimeCombo.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: 'bi-date-time-combo', |
||||
height: 24 |
||||
}); |
||||
}, |
||||
_init: function () { |
||||
BI.DateTimeCombo.superclass._init.apply(this, arguments); |
||||
var self = this; |
||||
var date = new Date(); |
||||
this.storeValue = { |
||||
value: { |
||||
year: date.getFullYear(), |
||||
month: date.getMonth(), |
||||
day: date.getDate(), |
||||
hour: date.getHours(), |
||||
minute: date.getMinutes(), |
||||
second: date.getSeconds() |
||||
} |
||||
}; |
||||
this.trigger = BI.createWidget({ |
||||
type: 'bi.date_time_trigger' |
||||
}); |
||||
|
||||
this.trigger.on(BI.DateTrigger.EVENT_TRIGGER_CLICK, function () { |
||||
self.combo.toggle(); |
||||
}); |
||||
|
||||
this.popup = BI.createWidget({ |
||||
type: "bi.date_time_popup", |
||||
min: this.constants.DATE_MIN_VALUE, |
||||
max: this.constants.DATE_MAX_VALUE |
||||
}); |
||||
self.setValue(this.storeValue); |
||||
|
||||
this.popup.on(BI.DateTimePopup.BUTTON_CANCEL_EVENT_CHANGE, function () { |
||||
self.setValue(self.storeValue); |
||||
self.combo.hideView(); |
||||
self.fireEvent(BI.DateTimeCombo.EVENT_CANCEL); |
||||
}); |
||||
this.popup.on(BI.DateTimePopup.BUTTON_OK_EVENT_CHANGE, function () { |
||||
self.storeValue = self.popup.getValue(); |
||||
self.setValue(self.storeValue); |
||||
self.combo.hideView(); |
||||
self.fireEvent(BI.DateTimeCombo.EVENT_CONFIRM); |
||||
}); |
||||
this.popup.on(BI.DateTimePopup.CALENDAR_EVENT_CHANGE, function () { |
||||
self.trigger.setValue(self.popup.getValue()); |
||||
}); |
||||
this.combo = BI.createWidget({ |
||||
type: 'bi.combo', |
||||
toggle: false, |
||||
isNeedAdjustHeight: false, |
||||
isNeedAdjustWidth: false, |
||||
el: this.trigger, |
||||
adjustLength: this.constants.comboAdjustHeight, |
||||
popup: { |
||||
el: this.popup, |
||||
maxHeight: this.constants.popupHeight, |
||||
width: this.constants.popupWidth, |
||||
stopPropagation: false |
||||
} |
||||
}); |
||||
this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { |
||||
self.popup.setValue(self.storeValue); |
||||
self.fireEvent(BI.DateTimeCombo.EVENT_BEFORE_POPUPVIEW); |
||||
}); |
||||
|
||||
var triggerBtn = BI.createWidget({ |
||||
type: "bi.trigger_icon_button", |
||||
cls: "chart-date-normal-font bi-border-left bi-border-top bi-border-bottom", |
||||
width: 30, |
||||
height: 25 |
||||
}); |
||||
triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () { |
||||
if (self.combo.isViewVisible()) { |
||||
self.combo.hideView(); |
||||
} else { |
||||
self.combo.showView(); |
||||
} |
||||
}); |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.htape", |
||||
element: this, |
||||
items: [{ |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: this.combo, |
||||
top: 0, |
||||
left: 0, |
||||
right: 0, |
||||
bottom: 0 |
||||
}, { |
||||
el: triggerBtn, |
||||
top: 0, |
||||
left: 0 |
||||
}] |
||||
}] |
||||
}) |
||||
}, |
||||
|
||||
setValue: function (v) { |
||||
this.storeValue = v; |
||||
this.popup.setValue(v); |
||||
this.trigger.setValue(v); |
||||
}, |
||||
getValue: function () { |
||||
return { |
||||
value: this.storeValue, |
||||
text: this.trigger.getValue() |
||||
}; |
||||
} |
||||
}); |
||||
|
||||
BI.DateTimeCombo.EVENT_CANCEL = "EVENT_CANCEL"; |
||||
BI.DateTimeCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; |
||||
BI.DateTimeCombo.EVENT_CHANGE = "EVENT_CHANGE"; |
||||
BI.DateTimeCombo.EVENT_BEFORE_POPUPVIEW = "BI.DateTimeCombo.EVENT_BEFORE_POPUPVIEW"; |
||||
BI.shortcut('bi.date_time_combo', BI.DateTimeCombo); |
@ -0,0 +1,38 @@
|
||||
/** |
||||
* Created by Urthur on 2017/7/14. |
||||
*/ |
||||
BI.CustomDateTimeCombo = BI.inherit(BI.Widget, { |
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.CustomDateTimeCombo.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-custom-date-time-combo" |
||||
}) |
||||
}, |
||||
|
||||
_init: function () { |
||||
BI.CustomDateTimeCombo.superclass._init.apply(this, arguments); |
||||
var self = this; |
||||
this.DateTime = BI.createWidget({ |
||||
type: "bi.date_time_combo", |
||||
element: this |
||||
}); |
||||
this.DateTime.on(BI.DateTimeCombo.EVENT_CANCEL, function () { |
||||
self.fireEvent(BI.CustomDateTimeCombo.EVENT_CANCEL); |
||||
}); |
||||
|
||||
this.DateTime.on(BI.DateTimeCombo.EVENT_CONFIRM, function () { |
||||
self.fireEvent(BI.CustomDateTimeCombo.EVENT_CONFIRM); |
||||
}); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return this.DateTime.getValue(); |
||||
}, |
||||
|
||||
setValue: function (v) { |
||||
this.DateTime.setValue(v); |
||||
} |
||||
}); |
||||
BI.CustomDateTimeCombo.EVENT_CHANGE = "EVENT_CHANGE"; |
||||
BI.CustomDateTimeCombo.EVENT_CANCEL = "EVENT_CANCEL"; |
||||
BI.CustomDateTimeCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; |
||||
BI.shortcut("bi.custom_date_time_combo", BI.CustomDateTimeCombo); |
@ -0,0 +1,175 @@
|
||||
/** |
||||
* Created by Urthur on 2017/7/14. |
||||
*/ |
||||
BI.DateTimePopup = BI.inherit(BI.Widget, { |
||||
constants: { |
||||
|
||||
|
||||
triggerHeight: 24, |
||||
buttonWidth: 90, |
||||
buttonHeight: 25, |
||||
popupHeight: 290, |
||||
popupWidth: 270, |
||||
comboAdjustHeight: 1, |
||||
lgap: 2, |
||||
border: 1 |
||||
}, |
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.DateTimePopup.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: 'bi-date-time-popup', |
||||
width: 268, |
||||
height: 290 |
||||
}); |
||||
}, |
||||
_init: function () { |
||||
BI.DateTimePopup.superclass._init.apply(this, arguments); |
||||
var self = this; |
||||
this.cancelButton = BI.createWidget({ |
||||
type: 'bi.text_button', |
||||
forceCenter: true, |
||||
cls: 'bi-multidate-popup-button bi-border-top bi-border-right', |
||||
shadow: true, |
||||
text: BI.i18nText("BI-Basic_Cancel") |
||||
}); |
||||
this.cancelButton.on(BI.TextButton.EVENT_CHANGE, function () { |
||||
self.fireEvent(BI.DateTimePopup.BUTTON_CANCEL_EVENT_CHANGE); |
||||
}); |
||||
|
||||
this.okButton = BI.createWidget({ |
||||
type: "bi.text_button", |
||||
forceCenter: true, |
||||
cls: 'bi-multidate-popup-button bi-border-top', |
||||
shadow: true, |
||||
text: BI.i18nText("BI-Basic_OK") |
||||
}); |
||||
this.okButton.on(BI.TextButton.EVENT_CHANGE, function () { |
||||
self.fireEvent(BI.DateTimePopup.BUTTON_OK_EVENT_CHANGE); |
||||
}); |
||||
|
||||
this.dateCombo = BI.createWidget({ |
||||
type: "bi.date_calendar_popup", |
||||
min: self.options.min, |
||||
max: self.options.max |
||||
}); |
||||
self.dateCombo.on(BI.DateCalendarPopup.EVENT_CHANGE, function () { |
||||
self.fireEvent(BI.DateTimePopup.CALENDAR_EVENT_CHANGE); |
||||
}); |
||||
|
||||
this.dateSelect = BI.createWidget({ |
||||
type: "bi.horizontal", |
||||
cls: "bi-border-top", |
||||
items: [{ |
||||
type: "bi.label", |
||||
text: BI.i18nText("BI-Basic_Time"), |
||||
width: 45 |
||||
},{ |
||||
type: "bi.date_time_select", |
||||
max: 23, |
||||
min: 0, |
||||
width: 60, |
||||
height: 30, |
||||
ref: function (_ref) { |
||||
self.hour = _ref; |
||||
self.hour.on(BI.DateTimeSelect.EVENT_CONFIRM, function () { |
||||
self.fireEvent(BI.DateTimePopup.CALENDAR_EVENT_CHANGE); |
||||
}); |
||||
} |
||||
},{ |
||||
type: "bi.label", |
||||
text: ":", |
||||
width: 15 |
||||
},{ |
||||
type: "bi.date_time_select", |
||||
max: 59, |
||||
min: 0, |
||||
width: 60, |
||||
height: 30, |
||||
ref: function (_ref) { |
||||
self.minute = _ref; |
||||
self.minute.on(BI.DateTimeSelect.EVENT_CONFIRM, function () { |
||||
self.fireEvent(BI.DateTimePopup.CALENDAR_EVENT_CHANGE); |
||||
}); |
||||
} |
||||
},{ |
||||
type: "bi.label", |
||||
text: ":", |
||||
width: 15 |
||||
},{ |
||||
type: "bi.date_time_select", |
||||
max: 59, |
||||
min: 0, |
||||
width: 60, |
||||
height: 30, |
||||
ref: function (_ref) { |
||||
self.second = _ref; |
||||
self.second.on(BI.DateTimeSelect.EVENT_CONFIRM, function () { |
||||
self.fireEvent(BI.DateTimePopup.CALENDAR_EVENT_CHANGE); |
||||
}); |
||||
} |
||||
}] |
||||
}); |
||||
|
||||
this.dateButton = BI.createWidget({ |
||||
type: "bi.grid", |
||||
items: [[this.cancelButton, this.okButton]] |
||||
}); |
||||
BI.createWidget({ |
||||
element: this, |
||||
type: "bi.vtape", |
||||
items: [{ |
||||
el: this.dateCombo |
||||
}, { |
||||
el: this.dateSelect, |
||||
height: 50 |
||||
},{ |
||||
el: this.dateButton, |
||||
height: 30 |
||||
}] |
||||
}); |
||||
}, |
||||
|
||||
setValue: function (v) { |
||||
var value, date; |
||||
if (BI.isNotNull(v)) { |
||||
value = v.value; |
||||
if(BI.isNull(value)){ |
||||
date = new Date(); |
||||
this.dateCombo.setValue({ |
||||
year: date.getFullYear(), |
||||
month: date.getMonth(), |
||||
day: date.getDate() |
||||
}); |
||||
this.hour.setValue(date.getHours()); |
||||
this.minute.setValue(date.getMinutes()); |
||||
this.second.setValue(date.getSeconds()); |
||||
} else { |
||||
this.dateCombo.setValue({ |
||||
year: value.year, |
||||
month: value.month, |
||||
day: value.day |
||||
}); |
||||
this.hour.setValue(value.hour); |
||||
this.minute.setValue(value.minute); |
||||
this.second.setValue(value.second); |
||||
} |
||||
} |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return { |
||||
value: { |
||||
year: this.dateCombo.getValue().year, |
||||
month: this.dateCombo.getValue().month, |
||||
day: this.dateCombo.getValue().day, |
||||
hour: this.hour.getValue(), |
||||
minute: this.minute.getValue(), |
||||
second: this.second.getValue() |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
BI.DateTimePopup.BUTTON_OK_EVENT_CHANGE = "BUTTON_OK_EVENT_CHANGE"; |
||||
BI.DateTimePopup.BUTTON_CANCEL_EVENT_CHANGE = "BUTTON_CANCEL_EVENT_CHANGE"; |
||||
BI.DateTimePopup.CALENDAR_EVENT_CHANGE = "CALENDAR_EVENT_CHANGE"; |
||||
BI.shortcut('bi.date_time_popup', BI.DateTimePopup); |
||||
|
@ -0,0 +1,106 @@
|
||||
/** |
||||
* Created by Urthur on 2017/7/14. |
||||
*/ |
||||
BI.DateTimeSelect = BI.inherit(BI.Widget, { |
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.DateTimeSelect.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-date-time-select bi-border", |
||||
max: 23, |
||||
min: 0 |
||||
}) |
||||
}, |
||||
|
||||
_init: function () { |
||||
BI.DateTimeSelect.superclass._init.apply(this, arguments); |
||||
var self = this, o = this.options; |
||||
this.editor = BI.createWidget({ |
||||
type: "bi.sign_editor", |
||||
value: this._alertInEditorValue(o.min), |
||||
errorText: BI.i18nText("BI-Please_Input_Natural_Number"), |
||||
validationChecker: function(v){ |
||||
return BI.isNaturalNumber(v); |
||||
} |
||||
}); |
||||
this.editor.on(BI.TextEditor.EVENT_CONFIRM, function(){ |
||||
self._finetuning(0); |
||||
self.fireEvent(BI.DateTimeSelect.EVENT_CONFIRM); |
||||
}); |
||||
this.topBtn = BI.createWidget({ |
||||
type: "bi.icon_button", |
||||
cls: "column-pre-page-h-font top-button bi-border-left bi-border-bottom" |
||||
}); |
||||
this.topBtn.on(BI.IconButton.EVENT_CHANGE, function(){ |
||||
self._finetuning(1); |
||||
self.fireEvent(BI.DateTimeSelect.EVENT_CONFIRM); |
||||
}); |
||||
this.bottomBtn = BI.createWidget({ |
||||
type: "bi.icon_button", |
||||
cls: "column-next-page-h-font bottom-button bi-border-left" |
||||
}); |
||||
this.bottomBtn.on(BI.IconButton.EVENT_CHANGE, function(){ |
||||
self._finetuning(-1); |
||||
self.fireEvent(BI.DateTimeSelect.EVENT_CONFIRM); |
||||
}); |
||||
this._finetuning(0); |
||||
BI.createWidget({ |
||||
type: "bi.htape", |
||||
element: this, |
||||
items: [this.editor, { |
||||
el: { |
||||
type: "bi.grid", |
||||
columns: 1, |
||||
rows: 2, |
||||
items: [{ |
||||
column: 0, |
||||
row: 0, |
||||
el: this.topBtn |
||||
}, { |
||||
column: 0, |
||||
row: 1, |
||||
el: this.bottomBtn |
||||
}] |
||||
}, |
||||
width: 30 |
||||
}] |
||||
}); |
||||
}, |
||||
|
||||
_alertOutEditorValue: function(v){ |
||||
if (v > this.options.max){ |
||||
v = this.options.min; |
||||
} |
||||
if (v < this.options.min){ |
||||
v = this.options.max |
||||
} |
||||
return BI.parseInt(v); |
||||
}, |
||||
|
||||
_alertInEditorValue: function(v){ |
||||
if (v > this.options.max){ |
||||
v = this.options.min; |
||||
} |
||||
if (v < this.options.min){ |
||||
v = this.options.max; |
||||
} |
||||
v = v < 10 ? "0" + v : v; |
||||
return v; |
||||
}, |
||||
|
||||
_finetuning: function(add){ |
||||
var v = BI.parseInt(this._alertOutEditorValue(this.editor.getValue())); |
||||
this.editor.setValue(this._alertInEditorValue(v + add)); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
var v = this.editor.getValue(); |
||||
return this._alertOutEditorValue(v); |
||||
}, |
||||
|
||||
setValue: function (v) { |
||||
this.editor.setValue(this._alertInEditorValue(v)); |
||||
this._finetuning(0); |
||||
} |
||||
|
||||
}); |
||||
BI.DateTimeSelect.EVENT_CONFIRM = "EVENT_CONFIRM"; |
||||
BI.shortcut("bi.date_time_select", BI.DateTimeSelect); |
@ -0,0 +1,68 @@
|
||||
/** |
||||
* Created by Urthur on 2017/7/14. |
||||
*/ |
||||
BI.DateTimeTrigger = BI.inherit(BI.Trigger, { |
||||
_const: { |
||||
hgap: 4, |
||||
vgap: 2, |
||||
triggerWidth: 30 |
||||
}, |
||||
|
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.DateTimeTrigger.superclass._defaultConfig.apply(this, arguments), { |
||||
extraCls: "bi-date-time-trigger", |
||||
height: 25, |
||||
width: 180 |
||||
}); |
||||
}, |
||||
_init: function () { |
||||
BI.DateTimeTrigger.superclass._init.apply(this, arguments); |
||||
var self = this, o = this.options, c = this._const; |
||||
this.text = BI.createWidget({ |
||||
type: "bi.label", |
||||
cls: "bi-border", |
||||
textAlign: "left", |
||||
height: o.height, |
||||
width: o.width, |
||||
hgap: c.hgap, |
||||
vgap: c.vgap |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.htape", |
||||
element: this, |
||||
items: [{ |
||||
el: BI.createWidget(), |
||||
width: 30 |
||||
}, { |
||||
el: this.text |
||||
}] |
||||
}) |
||||
}, |
||||
|
||||
_printTime: function (v) { |
||||
return v < 10 ? "0" + v : v; |
||||
}, |
||||
|
||||
setValue: function (v) { |
||||
var self = this; |
||||
if (BI.isNotNull(v)) { |
||||
var value = v.value, dateStr; |
||||
if(BI.isNull(value)){ |
||||
value = new Date(); |
||||
dateStr = value.getFullYear() + "-" + self._printTime(value.getMonth() + 1) + "-" + self._printTime(value.getDate()) |
||||
+ " " + self._printTime(value.getHours()) + ":" + self._printTime(value.getMinutes()) + ":" + self._printTime(value.getSeconds()); |
||||
} else { |
||||
dateStr = value.year + "-" + self._printTime(value.month + 1) + "-" + self._printTime(value.day) |
||||
+ " " + self._printTime(value.hour) + ":" + self._printTime(value.minute) + ":" + self._printTime(value.second); |
||||
} |
||||
this.text.setText(dateStr); |
||||
this.text.setTitle(dateStr); |
||||
} |
||||
}, |
||||
getValue: function () { |
||||
return this.text.getText(); |
||||
} |
||||
|
||||
}); |
||||
BI.DateTrigger.EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK"; |
||||
BI.shortcut("bi.date_time_trigger", BI.DateTimeTrigger); |
Loading…
Reference in new issue