Page 4 of 7 FirstFirst ... 23456 ... LastLast
Results 31 to 40 of 68

Thread: Ext.ux.DateTimeField - DateTimePicker for ext4, also DateTimeMenu, TimePickerField

  1. #31
    Sencha User
    Join Date
    Jan 2011
    Posts
    1
    Vote Rating
    0
      0  

    Default IE7,IE8 BUG TEST

    this plugin display Normal on Chrome ,but on ie7,ie8 ,ie9 display
    1.jpg, Ask for help

  2. #32
    Sencha User
    Join Date
    Sep 2010
    Posts
    1
    Vote Rating
    0
      0  

    Default

    thanks??????

  3. #33
    Sencha Premium Member
    Join Date
    Sep 2012
    Location
    Argentina
    Posts
    34
    Vote Rating
    1
      0  

    Default

    I have a problem with Extj 4.1.1
    Tested in Chrome 21.0.1180.89 m
    Uncaught TypeError: Cannot read property 'dom' of null


    TimePickerField.js:111
    Code:
    {    
                        xtype: 'timepickerfield',
                        name:'fechaNac'
                    },
    Code:
    callSpinnersFunction: function(funName, args) {
              for(var i = 0; i < this.spinners.length; i++) {
                  this.spinners[i][funName](args);
              }
          }
    The fix:
    Code:
    spinnerWrapDom = Ext.dom.Query.select('td', this.getEl().dom)[1]; // 4.0 ->4.1 div->td
    		  if (!spinnerWrapDom ) {
    			spinnerWrapDom = Ext.dom.Query.select('td', this.getEl().dom)[0];
    		  }

  4. #34
    Sencha User
    Join Date
    Dec 2011
    Posts
    24
    Vote Rating
    2
      1  

    Default

    Datetimepicker needs an override for the selected date to have the right class (atleast in 4.1.1).

    Code:
     selectedUpdate: function (date) {
      this.callParent([Ext.Date.clearTime(date, true)]);
     }

  5. #35
    Sencha User
    Join Date
    Aug 2011
    Posts
    1
    Vote Rating
    0
      0  

    Default Very good

    It's very good! Thank you!

  6. #36
    Sencha User
    Join Date
    Dec 2011
    Posts
    24
    Vote Rating
    2
      0  

    Default

    And here is TimePicker version with AM/PM selector. It will be added automatically if it is in the timeFormat. Same with seconds selector, which is now only shown if it is in the timeFormat. (Notice timeformat parsing is extremely basic)

    Code:
    /**
     * ?????, ??????????,?,?.
     * @author wangzilong
     * update Ext - 4.1 2012/04/27
     */
    Ext.define('Cg.ux.form.field.TimePicker', {
     extend: 'Ext.form.field.Base',
     alias: 'widget.timepicker',
     requires: ['Ext.form.field.Number'],
    
     timeFormat: 'H:i:s',
    
     // ??BaseField???? , hidden basefield's input
     inputType: 'hidden',
    
     style: 'padding:4px 0 0 0;margin-bottom:0px',
    
     /**
     * @cfg {String} value
     * initValue, format: 'H:i:s'
     */
     value: null,
    
     /**
     * @cfg {Object} spinnerCfg
     * ???????, number input config
     */
     spinnerCfg: {
      width: 40
     },
    
     /** Override. */
     initComponent: function () {
      var me = this;
    
      me.value = me.value || Ext.Date.format(new Date(), me.timeFormat);
    
      me.callParent(); // called setValue
    
      var cfg = Ext.apply({}, me.spinnerCfg, {
       readOnly: me.readOnly,
       disabled: me.disabled,
       style: 'float: left',
       listeners: {
        change: {
         fn: me.onSpinnerChange,
         scope: me
        }
       }
      });
    
      me.hoursSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {
       minValue: 0,
       maxValue: me.timeFormat.toLowerCase().indexOf("a") >= 0 ? 11 : 23
      }));
      me.minutesSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {
       minValue: 0,
       maxValue: 59
      }));
      if (me.timeFormat.toLowerCase().indexOf("s") >= 0) {
       me.secondsSpinner = Ext.create('Ext.form.field.Number', Ext.apply({ }, cfg, {
        minValue: 0,
        maxValue: 59
       }));
      }
      if (me.timeFormat.toLowerCase().indexOf("a") >= 0) {
       var ampm = Ext.create('Ext.data.Store', {
        fields: ['abbr', 'name'],
        data: [
         { "abbr": "AM", "name": "AM" },
         { "abbr": "PM", "name": "PM" }
        ]
       });
    
       // Create the combo box, attached to the states data store
       me.ampm = Ext.create('Ext.form.ComboBox', {
        store: ampm,
        readOnly: me.readOnly,
        disabled: me.disabled,
        queryMode: 'local',
        displayField: 'name',
        valueField: 'abbr',
        width: 50,
        style: 'float: right',
        listeners: {
         select: {
          fn: me.onSpinnerChange,
          scope: me
         }
        }
       });
      }
      me.spinners = [me.hoursSpinner, me.minutesSpinner];
      if (me.secondsSpinner)
       me.spinners.push(me.secondsSpinner);
      if (me.ampm)
       me.spinners.push(me.ampm);
    
     },
     /**
     * @private
     * Override.
     */
     onRender: function () {
      var me = this, spinnerWrapDom, spinnerWrap;
      me.callParent(arguments);
    
      // render to original BaseField input td
      // spinnerWrap = Ext.get(Ext.DomQuery.selectNode('div', this.el.dom)); // 4.0.2
      spinnerWrapDom = Ext.dom.Query.select('td', this.getEl().dom)[1]; // 4.0 ->4.1 div->td
      spinnerWrap = Ext.get(spinnerWrapDom);
      me.callSpinnersFunction('render', spinnerWrap);
    
      Ext.core.DomHelper.append(spinnerWrap, {
       tag: 'div',
       cls: 'x-form-clear-left'
      });
    
      this.setRawValue(this.value);
     },
    
     _valueSplit: function (v) {
      if (Ext.isDate(v)) {
       v = Ext.Date.format(v, this.timeFormat);
      }
      var split = Ext.Date.parse(v, this.timeFormat);
      return {
       h: split.getHours(),
       m: split.getMinutes(),
       s: split.getSeconds()
      };
     },
     onSpinnerChange: function () {
      if (!this.rendered) {
       return;
      }
      this.fireEvent('change', this, this.getValue(), this.getRawValue());
     },
     // ??????????, call each spinner's function
     callSpinnersFunction: function (funName, args) {
      for (var i = 0; i < this.spinners.length; i++) {
       this.spinners[i][funName](args);
      }
     },
     // @private get time as object,
     getRawValue: function () {
      var me = this;
      if (!me.rendered) {
       var date = me.value || new Date();
       return me._valueSplit(date);
      } else {
       return {
        h: me.ampm && me.ampm.getValue() == "PM" ? me.hoursSpinner.getValue() + 12 : me.hoursSpinner.getValue(),
        m: me.minutesSpinner.getValue(),
        s: me.secondsSpinner ? me.secondsSpinner.getValue() : 0
       };
      }
     },
    
     // private
     setRawValue: function (value) {
      var me = this;
      value = me._valueSplit(value);
      if (me.hoursSpinner) {
       if (me.ampm) {
        if (value.h >= 12) {
         me.ampm.setValue("PM");
         value.h = value.h - 12;
        } else
         me.ampm.setValue("AM");
       }
       me.hoursSpinner.setValue(value.h);
       me.minutesSpinner.setValue(value.m);
       if (me.secondsSpinner) me.secondsSpinner.setValue(value.s);
      }
     },
     // overwrite
     getValue: function () {
      var v = this.getRawValue();
      return Ext.String.leftPad(v.h, 2, '0') + ':' + Ext.String.leftPad(v.m, 2, '0') + ':'
                + Ext.String.leftPad(v.s, 2, '0');
     },
     // overwrite
     setValue: function (value) {
      this.value = Ext.isDate(value) ? Ext.Date.format(value, this.timeFormat) : value;
      if (!this.rendered) {
       return;
      }
      this.setRawValue(this.value);
      this.validate();
     },
     // overwrite
     disable: function () {
      this.callParent(arguments);
      this.callSpinnersFunction('disable', arguments);
     },
     // overwrite
     enable: function () {
      this.callParent(arguments);
      this.callSpinnersFunction('enable', arguments);
     },
     // overwrite
     setReadOnly: function () {
      this.callParent(arguments);
      this.callSpinnersFunction('setReadOnly', arguments);
     },
     // overwrite
     clearInvalid: function () {
      this.callParent(arguments);
      this.callSpinnersFunction('clearInvalid', arguments);
     },
     // overwrite
     isValid: function (preventMark) {
      return this.hoursSpinner.isValid(preventMark) && this.minutesSpinner.isValid(preventMark)
                && (!this.secondsSpinner || this.secondsSpinner.isValid(preventMark)) && (!this.ampm || this.ampm.isValid(preventMark));
     },
     // overwrite
     validate: function () {
      return this.hoursSpinner.validate() && this.minutesSpinner.validate() && (!this.secondsSpinner || this.secondsSpinner.validate()) && (!this.ampm || this.ampm.validate());
     }
    });

  7. #37
    Sencha User
    Join Date
    Dec 2011
    Posts
    24
    Vote Rating
    2
      0  

    Default

    Validation of the field didn't work, so here is the fix:

    Code:
     getErrors: function(value) {
      var me = this,
          format = Ext.String.format,
          errors = me.superclass.superclass.getErrors.apply(me, arguments),
          disabledDays = me.disabledDays,
          disabledDatesRE = me.disabledDatesRE,
          minValue = me.minValue,
          maxValue = me.maxValue,
          len = disabledDays ? disabledDays.length : 0,
          i = 0,
          svalue,
          fvalue,
          day,
          time;
    
      value = me.formatDate(value || me.processRawValue(me.getRawValue()));
    
      if (value === null || value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
       return errors;
      }
    
      svalue = value;
      value = me.parseDate(value);
      if (!value) {
       errors.push(format(me.invalidText, svalue, Ext.Date.unescapeFormat(me.format)));
       return errors;
      }
    
      time = value.getTime();
      if (minValue && time < minValue.getTime()) {
       errors.push(format(me.minText, me.formatDate(minValue)));
      }
    
      if (maxValue && time > maxValue.getTime()) {
       errors.push(format(me.maxText, me.formatDate(maxValue)));
      }
    
      if (disabledDays) {
       day = value.getDay();
    
       for (; i < len; i++) {
        if (day === disabledDays[i]) {
         errors.push(me.disabledDaysText);
         break;
        }
       }
      }
    
      fvalue = me.formatDate(value);
      if (disabledDatesRE && disabledDatesRE.test(fvalue)) {
       errors.push(format(me.disabledDatesText, fvalue));
      }
    
      return errors;
     }

  8. #38
    Sencha User
    Join Date
    Jan 2013
    Posts
    1
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by liliang268 View Post
    this plugin display Normal on Chrome ,but on ie7,ie8 ,ie9 display
    1.jpg, Ask for help

    In datetimepicker.js,

    replace line 32:

    var table = Ext.get(Ext.DomQuery.selectNode('table', this.el.dom));

    to

    var table = Ext.get(Ext.DomQuery.selectNode('table[class="x-datepicker-inner"]', this.el.dom));

    Because the selector in IE chooses a wrong table to insert the timefield.

  9. #39
    Sencha User
    Join Date
    May 2013
    Posts
    1
    Vote Rating
    0
      0  

    Default How to change default hours time in date time picker?

    Hi i'm using Ext.ux.form.DateTimeField here showing default system time field (H:i) but i need default time hours giving user it's possible or not?

  10. #40
    Sencha User
    Join Date
    Jul 2013
    Posts
    1
    Vote Rating
    0
      0  

    Default

    thank you !

Page 4 of 7 FirstFirst ... 23456 ... LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •