diff --git a/bi/widget.js b/bi/widget.js
index 89c141e2ca..6ada132565 100644
--- a/bi/widget.js
+++ b/bi/widget.js
@@ -3244,6 +3244,516 @@ BI.DatePaneWidget = BI.inherit(BI.Widget, {
 
 });
 BI.shortcut("bi.date_pane_widget", BI.DatePaneWidget);/**
+ * 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 bi-border',
+            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.combo.hideView();
+            self.fireEvent(BI.DateTimeCombo.EVENT_CANCEL);
+        });
+        this.popup.on(BI.DateTimePopup.BUTTON_OK_EVENT_CHANGE, function () {
+            self.setValue(self.popup.getValue());
+            self.combo.hideView();
+            self.fireEvent(BI.DateTimeCombo.EVENT_CONFIRM);
+        });
+        this.popup.on(BI.DateTimePopup.CALENDAR_EVENT_CHANGE, function () {
+            self.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: "bi-trigger-date-button 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 this.storeValue;
+    }
+});
+
+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);
+/**
+ * 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);
+/**
+ * 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);
+
+/**
+ * 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);
+/**
+ * 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);
+        }
+    }
+
+});
+BI.DateTrigger.EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK";
+BI.shortcut("bi.date_time_trigger", BI.DateTimeTrigger);
+/**
  * 带有方向的pathchooser
  *
  * Created by GUY on 2016/4/21.
diff --git a/demo/js/config/widget.js b/demo/js/config/widget.js
index 49aaec038f..1ec8d5c699 100644
--- a/demo/js/config/widget.js
+++ b/demo/js/config/widget.js
@@ -45,4 +45,8 @@ Demo.WIDGET_CONFIG = [{
     pId: 4,
     text: "bi.interactive_arrangement",
     value: "demo.interactive_arrangement"
+}, {
+    pId: 4,
+    text: "bi.custom_date_time",
+    value: "demo.custom_date_time"
 }];
\ No newline at end of file
diff --git a/demo/js/widget/demo.datetime.js b/demo/js/widget/demo.datetime.js
new file mode 100644
index 0000000000..66e07ddff7
--- /dev/null
+++ b/demo/js/widget/demo.datetime.js
@@ -0,0 +1,13 @@
+/**
+ * Created by Urthur on 2017/7/18.
+ */
+Demo.CustomDateTime = BI.inherit(BI.Widget, {
+    props: {
+    },
+    render: function () {
+        return {
+            type: "bi.custom_date_time_combo",
+        };
+    }
+});
+BI.shortcut("demo.custom_date_time", Demo.CustomDateTime);
\ No newline at end of file
diff --git a/demo/version.js b/demo/version.js
index 0b0ad0f02e..6b336ba168 100644
--- a/demo/version.js
+++ b/demo/version.js
@@ -8,5 +8,14 @@ BI.resourceURL = "resource/";
 BI.i18n = {
     "BI-Basic_OK": "确定",
     "BI-Basic_Sure": "确定",
-    "BI-Basic_Clears": "清空"
+    "BI-Basic_Clears": "清空",
+    "BI-Basic_Cancel": "取消",
+    "BI-Basic_Time": "时间",
+    "BI-Basic_Simple_Sunday": "日",
+    "BI-Basic_Simple_Monday": "一",
+    "BI-Basic_Simple_Tuesday": "二",
+    "BI-Basic_Simple_Wednesday": "三",
+    "BI-Basic_Simple_Thursday": "四",
+    "BI-Basic_Simple_Friday": "五",
+    "BI-Basic_Simple_Saturday": "六",
 };
\ No newline at end of file
diff --git a/docs/demo.js b/docs/demo.js
index 6c8745e71b..e214aa122e 100644
--- a/docs/demo.js
+++ b/docs/demo.js
@@ -8,7 +8,16 @@ BI.resourceURL = "resource/";
 BI.i18n = {
     "BI-Basic_OK": "确定",
     "BI-Basic_Sure": "确定",
-    "BI-Basic_Clears": "清空"
+    "BI-Basic_Clears": "清空",
+    "BI-Basic_Cancel": "取消",
+    "BI-Basic_Time": "时间",
+    "BI-Basic_Simple_Sunday": "日",
+    "BI-Basic_Simple_Monday": "一",
+    "BI-Basic_Simple_Tuesday": "二",
+    "BI-Basic_Simple_Wednesday": "三",
+    "BI-Basic_Simple_Thursday": "四",
+    "BI-Basic_Simple_Friday": "五",
+    "BI-Basic_Simple_Saturday": "六",
 };$(function () {
     var ref;
     BI.createWidget({
@@ -3384,6 +3393,10 @@ Demo.COMPONENT_CONFIG = [{
     pId: 4,
     text: "bi.interactive_arrangement",
     value: "demo.interactive_arrangement"
+}, {
+    pId: 4,
+    text: "bi.custom_date_time",
+    value: "demo.custom_date_time"
 }];Demo.Func = BI.inherit(BI.Widget, {
     props: {
         baseCls: "demo-func"
@@ -5948,6 +5961,18 @@ BI.shortcut("demo.preview", Demo.Preview);Demo.West = BI.inherit(BI.Widget, {
 });
 Demo.West.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
 BI.shortcut("demo.west", Demo.West);/**
+ * Created by Urthur on 2017/7/18.
+ */
+Demo.CustomDateTime = BI.inherit(BI.Widget, {
+    props: {
+    },
+    render: function () {
+        return {
+            type: "bi.custom_date_time_combo",
+        };
+    }
+});
+BI.shortcut("demo.custom_date_time", Demo.CustomDateTime);/**
  * Created by User on 2017/3/22.
  */
 Demo.RelationView = BI.inherit(BI.Widget, {
diff --git a/docs/resource.css b/docs/resource.css
index dfc4383636..4e785c5f0e 100644
--- a/docs/resource.css
+++ b/docs/resource.css
@@ -818,6 +818,19 @@ textarea::-webkit-scrollbar-thumb:hover {
   content: "\e600";
   color: #f07d0a;
 }
+
+.chart-date-normal-font .b-font {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xe61b;');
+}
+.chart-date-normal-font .b-font:before {
+  content: "\e61b";
+  color: inherit;
+}
+.chart-date-normal-font.native .b-font:before,
+.chart-date-normal-font.disabled .b-font:before {
+  content: "\e61b";
+  color: inherit;
+}
 .tree-collapse-icon-type1 .x-icon,
 .tree-collapse-icon-type1:hover .x-icon,
 .tree-collapse-icon-type1:active .x-icon {
diff --git a/docs/widget.js b/docs/widget.js
index 89c141e2ca..6ada132565 100644
--- a/docs/widget.js
+++ b/docs/widget.js
@@ -3244,6 +3244,516 @@ BI.DatePaneWidget = BI.inherit(BI.Widget, {
 
 });
 BI.shortcut("bi.date_pane_widget", BI.DatePaneWidget);/**
+ * 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 bi-border',
+            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.combo.hideView();
+            self.fireEvent(BI.DateTimeCombo.EVENT_CANCEL);
+        });
+        this.popup.on(BI.DateTimePopup.BUTTON_OK_EVENT_CHANGE, function () {
+            self.setValue(self.popup.getValue());
+            self.combo.hideView();
+            self.fireEvent(BI.DateTimeCombo.EVENT_CONFIRM);
+        });
+        this.popup.on(BI.DateTimePopup.CALENDAR_EVENT_CHANGE, function () {
+            self.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: "bi-trigger-date-button 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 this.storeValue;
+    }
+});
+
+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);
+/**
+ * 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);
+/**
+ * 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);
+
+/**
+ * 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);
+/**
+ * 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);
+        }
+    }
+
+});
+BI.DateTrigger.EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK";
+BI.shortcut("bi.date_time_trigger", BI.DateTimeTrigger);
+/**
  * 带有方向的pathchooser
  *
  * Created by GUY on 2016/4/21.
diff --git a/src/css/resource/font.css b/src/css/resource/font.css
index ee9d61c357..fa05dd2da7 100644
--- a/src/css/resource/font.css
+++ b/src/css/resource/font.css
@@ -684,3 +684,16 @@
   content: "\e600";
   color: #f07d0a;
 }
+
+.chart-date-normal-font .b-font {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xe61b;');
+}
+.chart-date-normal-font .b-font:before {
+  content: "\e61b";
+  color: inherit;
+}
+.chart-date-normal-font.native .b-font:before,
+.chart-date-normal-font.disabled .b-font:before {
+  content: "\e61b";
+  color: inherit;
+}
diff --git a/src/widget/datetime/datetime.combo.js b/src/widget/datetime/datetime.combo.js
new file mode 100644
index 0000000000..fcfd68b6c7
--- /dev/null
+++ b/src/widget/datetime/datetime.combo.js
@@ -0,0 +1,127 @@
+/**
+ * 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 bi-border',
+            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.combo.hideView();
+            self.fireEvent(BI.DateTimeCombo.EVENT_CANCEL);
+        });
+        this.popup.on(BI.DateTimePopup.BUTTON_OK_EVENT_CHANGE, function () {
+            self.setValue(self.popup.getValue());
+            self.combo.hideView();
+            self.fireEvent(BI.DateTimeCombo.EVENT_CONFIRM);
+        });
+        this.popup.on(BI.DateTimePopup.CALENDAR_EVENT_CHANGE, function () {
+            self.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: "bi-trigger-date-button 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 this.storeValue;
+    }
+});
+
+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);
diff --git a/src/widget/datetime/datetime.js b/src/widget/datetime/datetime.js
new file mode 100644
index 0000000000..29f704d600
--- /dev/null
+++ b/src/widget/datetime/datetime.js
@@ -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);
diff --git a/src/widget/datetime/datetime.popup.js b/src/widget/datetime/datetime.popup.js
new file mode 100644
index 0000000000..a289311fcd
--- /dev/null
+++ b/src/widget/datetime/datetime.popup.js
@@ -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);
+
diff --git a/src/widget/datetime/datetime.select.js b/src/widget/datetime/datetime.select.js
new file mode 100644
index 0000000000..d57fedc5ce
--- /dev/null
+++ b/src/widget/datetime/datetime.select.js
@@ -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);
diff --git a/src/widget/datetime/datetime.trigger.js b/src/widget/datetime/datetime.trigger.js
new file mode 100644
index 0000000000..2be7b057c4
--- /dev/null
+++ b/src/widget/datetime/datetime.trigger.js
@@ -0,0 +1,64 @@
+/**
+ * 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);
+        }
+    }
+
+});
+BI.DateTrigger.EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK";
+BI.shortcut("bi.date_time_trigger", BI.DateTimeTrigger);