Results 1 to 4 of 4

Thread: Datepicker: space key does not select today's date

    You found a bug! We've classified it as EXTJS-20401 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Feb 2015
    Posts
    44

    Default Datepicker: space key does not select today's date

    According to http://docs.sencha.com/extjs/6.0/6.0...-cfg-showToday, spacebar should be the keyboard shortcut for selecting "today" in the datepicker, but space has an inconsistent behavior instead, and there does not seem to be a keyboard only way to press the "today" button.

    https://fiddle.sencha.com/#fiddle/15cj

    My current workaround:

    Code:
    Ext.define('MyDateField', {
        extend: 'Ext.form.DateField',
        (...)
        initComponent: function () {
            var me = this;
            (...)
            this.callParent();
    
            this.getPicker().on('afterrender', function () {
                this.el.on('keydown', me.nOnDatepickerKeydown, me); // add key listener to datepicker
            });
        },
        nOnDatepickerKeydown: function (e) {
            var close = false;
            switch (e.keyCode) {
                case e.SPACE:
                    this.setValue(new Date()); // set value to 'today'
                    close = true;
                    break;
                case e.DELETE:
                    this.setValue(null); // remove value
                    close = true;
                    break;
            }
            if (close)
            {
                this.getPicker().hide(); // hide datepicker
                this.focus(); // focus datefield
                e.preventDefault(); // stop default space key handling
            }
        }
    }

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha User
    Join Date
    Aug 2016
    Posts
    2

    Default

    Thanks for the quick response and useful workaround.

  4. #4
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,102

    Default

    The bug is apparently still there in ExtJS 6.5.2.463. Thanks for the workaround. Since I only needed the spacebar functionality, I have adapted it like this for ExtJS 6.5.x (in case someone else also stumbles upon the same problem):

    Code:
    Ext.override(Ext.form.field.Date, {
      initComponent: function() {
            var me = this,
                isString = Ext.isString,
                min, max;
            min = me.minValue;
            max = me.maxValue;
            if (isString(min)) {
                me.minValue = me.parseDate(min);
            }
            if (isString(max)) {
                me.maxValue = me.parseDate(max);
            }
            me.disabledDatesRE = null;
            me.initDisabledDays();
            me.callParent();
            me.getPicker().on('afterrender', function () {
                this.el.on('keydown', me.nOnDatepickerKeydown, me); // add key listener to datepicker
            });
        },
        nOnDatepickerKeydown: function (e) {
            if(e.keyCode==e.SPACE) 
            {
              this.setValue(new Date()); // set value to 'today'
              this.getPicker().hide(); // hide datepicker
              this.focus(); // focus datefield
              this.blur();  // we have to blur and then focus again otherwise down key stops working!
              this.focus(); // focus datefield
              e.preventDefault(); // stop default space key handling
            }
        }
    });
    I had to make a further small change. After calling this.focus(), the down button stopped working unless the user goes out of the field and then back. As a quick fix, I added this.blur() and this.focus() again and that solves this as well.

Similar Threads

  1. [FIXED] DateField doesn't select today on SPACE
    By m.k in forum Ext:Bugs
    Replies: 1
    Last Post: 13 Mar 2014, 6:33 AM
  2. Setting custom date in DatePicker rather than the default today's date
    By SabaSarwat in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 13 Apr 2012, 5:28 AM
  3. Replies: 2
    Last Post: 4 Jan 2012, 10:10 AM
  4. limit date in Ext.form.DatePicker to dates before today?
    By adana325 in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 17 Aug 2011, 10:21 AM

Tags for this Thread

Posting Permissions

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