Extjs4 date + hour/minute/second component datetimefield

Source: Internet
Author: User

The latest Ext-4.2.1.883 version provides date components xtype: 'datefield ') and time component xtype: 'timefield'), but does not provide date + hour/second components.

Paste the code of the searched cool extension component:


1. Extend the date selector datepicker component to the datetimepicker:

Ext. define ('myapp. ux. dateTimePicker ', {extend: 'ext. picker. date', alias: 'widget. datetimepicker ', todayText:' ', timeLabel: 'time', requires: ['myapp. ux. timePickerField '], initComponent: function () {// keep time part for value var value = this. value | new Date (); this. callParent (); this. value = value ;}, onRender: function (container, position) {if (! This. timefield) {this. timefield = Ext. create ('myapp. ux. timePickerField ', {fieldLabel: this. timeLabel, labelWidth: 40, value: Ext. date. format (this. value, 'H: I: s')});} this. timefield. ownerCt = this; this. timefield. on ('change', this. timeChange, this); this. callParent (arguments); var table = Ext. get (Ext. domQuery. selectNode ('table', this. el. dom); var tfEl = Ext. core. domHelper. insertAfter (table, {t Ag: 'div ', style: 'border: 0px;', children: [{tag: 'div ', cls: 'X-datepicker-footer ux-timefield '}]}, true); this. timefield. render (this. el. child ('div div. ux-timefield '); var p = this. getEl (). parent ('div. x-layer '); if (p) {p. setStyle ("height", p. getHeight () + 31) ;}}, // modify the listener time field, timefield change timeChange: function (tf, time, rawtime) {// if (! This. todayKeyListener) {// before render this. value = this. fillDateTime (this. value); //} else {// this. setValue (this. value); //}, // @ private fillDateTime: function (value) {if (this. timefield) {var rawtime = this. timefield. getRawValue (); value. setHours (rawtime. h); value. setMinutes (rawtime. m); value. setSeconds (rawtime. s);} return value;}, // @ private changeTimeFiledValue: function (value ){ This. timefield. un ('change', this. timeChange, this); this. timefield. setValue (this. value); this. timefield. on ('change', this. timeChange, this) ;},/* The TODO time value is bound to the input box. Consider creating this. timeValue saves the date and time separately. * /// overwrite setValue: function (value) {this. value = value; this. changeTimeFiledValue (value); return this. update (this. value) ;}, // overwrite getValue: function () {return this. fillDateTime (this. value) ;}, // Overwrite: fill time before setValue handleDateClick: function (e, t) {var me = this, handler = me. handler; e. stopEvent (); if (! Me. disabled & t. dateValue &&! Ext. fly (t. parentNode ). hasCls (me. disabledCellCls) {me. doCancelFocus = me. focusOnSelect = false; me. setValue (this. fillDateTime (new Date (t. dateValue); // overwrite: fill time before setValue delete me. doCancelFocus; me. fireEvent ('select', me, me. value); if (handler) {handler. call (me. scope | me, me, me. value);} me. onSelect () ;}}, // overwrite: fill time before setValue selectToday: function () {Var me = this, btn = me. todayBtn, handler = me. handler; if (btn &&! Btn. disabled) {// me. setValue (Ext. date. clearTime (new Date (); // src me. setValue (new Date (); // overwrite: fill time before setValue me. fireEvent ('select', me, me. value); if (handler) {handler. call (me. scope | me, me, me. value);} me. onSelect () ;}return me ;}});


2. Reference datetimepicker, which refers to the datefield component and extends it to the datetimefield component:

Ext.Loader.setConfig({enabled:true});Ext.Loader.setPath('MyApp', '../houtai/js');Ext.define('MyApp.ux.DateTimeField', {      extend: 'Ext.form.field.Date',      alias: 'widget.datetimefield',      requires: ['MyApp.ux.DateTimePicker'],      initComponent: function() {          this.format = this.format;          this.callParent();      },      // overwrite      createPicker: function() {          var me = this,              format = Ext.String.format;          return Ext.create('MyApp.ux.DateTimePicker', {                ownerCt: me.ownerCt,                renderTo: document.body,                floating: true,                hidden: true,                focusOnShow: true,                minDate: me.minValue,                maxDate: me.maxValue,                disabledDatesRE: me.disabledDatesRE,                disabledDatesText: me.disabledDatesText,                disabledDays: me.disabledDays,                disabledDaysText: me.disabledDaysText,                format: me.format,                showToday: me.showToday,                startDay: me.startDay,                minText: format(me.minText, me.formatDate(me.minValue)),                maxText: format(me.maxText, me.formatDate(me.maxValue)),                listeners: {                    scope: me,                    select: me.onSelect                },                keyNavConfig: {                    esc: function() {                        me.collapse();                    }                }            });      }  });

3. To use xtype: datetimefield in form, first introduce the extension class:


requires:'MyApp.ux.DateTimeField',

Specific use:

{Xtype: 'datetimefield', width: 300, labelWidth: 80, endDateField: 'etime', vtype: 'daterange ', fieldLabel: 'Minimum record time limit', format: 'Y-m-d H: I: s', name: 'stime '}, {xtype: 'datetimefield', width: 300, labelWidth: 80, startDateField: 'stime', vtype: 'daterange ', fieldLabel: 'record time ceiling', format: 'Y-m-d H: I: s', name: 'etime '},


4. Page effects:

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/1521041G2-0.jpg "style =" float: none; "title =" 1.jpg"/>

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/15210430Z-1.jpg "style =" float: none; "title =" 2.jpg"/>

5. User Experience:

You can select the input date, time, minute, and second, but the operation experience is slightly unsatisfactory. For example, the selector only has the "now" button. If the "OK" button is added, the selector disappears and the value of the date, hour, and second is filled in the box. Select the exact time that is not 'right', and end with the click date. The year, month, day, hour, minute, and second in the box are exactly the same as those in the selector.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.