XF 2.1 Changes to XF datepicker between 2.1.2 and 2.1.3

[Jake B.]

We've just come across an issue in a custom add-on we did for someone quite some time ago where we used the following JavaScript to enable Pikaday's time picker functionality:

window.addEventListener("load", function(event) {
   $(document).ready(function() {
      var $config = {
         showTime: true,
         i18n: {
            previousMonth : '',
            nextMonth     : '',
            weekdays      : [0, 1, 2, 3, 4, 5, 6].map(function(day){ return XF.phrase('day' + day) }),
            weekdaysShort : [0, 1, 2, 3, 4, 5, 6].map(function(day){ return XF.phrase('dayShort' + day) }),
            months        : [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(function(month){ return XF.phrase('month' + month) }),
            midnight: 'Midnight',
            noon: 'Noon'
         },
         onSelect: function() {
            var pad = function(number) {
               if (number < 10) { return '0' + number; }
               return number;
            };
            var date = this._d,
                  day = String(date.getDate()),
                  month = String(date.getMonth() + 1),
                  year = String(date.getFullYear()),
                  hour = String(date.getHours()),
                  minute = String(date.getMinutes());

            $(this._o.field).val(year + '-' + pad(month) + '-' + pad(day) + ' ' + pad(hour) + ':' + pad(minute));
         }
      };

      $.each($('.datetime'), function() {
         $(this).data('pikaday').config($config);
      });
   });
});

However, when upgrading from 2.0.x to 2.1.5a this feature broke, we've tracked it down to being broken in 2.1.3 and working in 2.1.2 but I cannot quite determine what exactly changed. Dumping $(this).data('pikaday') is now returning undefined when in 2.1.2 it did not.

@Chris D is there a recommended approach to make changes to the pikaday config in a cleaner manner than this? It's got quite a few built in features that would be useful, but currently don't seem to have a clean way to enable them

 

[Chris D]

Well, it's this kind of thing that happens when we make changes that we otherwise wouldn't have done without some emphatic requests insisting that we should. You may recognise it

Fixed - Clicking calendar icon for date input doesn't open the calendar

I would expect clicking the icon on a date input would open calendar so you could select a date, however this doesn't appear to be the case:

xenforo.com

We had to change the way the Pikaday object was initialised. I think actually we use its native instantiation now rather than the separate jQuery plugin.

You may want to look at using XF.extend to extend the XF.DatePicker object. There's not a great deal of flexibility here, but you'd be able to entirely overwrite the object with your custom code.

 

[Jake B.]

Thanks Chris, got it accomplished with the following:

XF.DateInput = XF.extend(XF.DateInput, {
    __backup: {
        'init': '_init',
    },
    init: function () {
        this._init();

        if (this.$target.hasClass('datetime')) {
            var config = this.picker._o;
            config.showTime = true;
            config.i18n.midnight = '12 AM';
            config.i18n.noon = '12 PM';
            this.picker.config(config);
        }
    }
});

XF.Element.register('date-input', 'XF.DateInput');

Will probably change up the internationalization to support 24 vs 12 hour as well at some point, but this works fine for my current needs