Add today and done buttons to the datepicker

[Ryan J Ollos]

As mentioned in comment:61:ticket:10245, add Today and Done buttons to the DatePicker.

[Ryan J Ollos]

Committed to 1.0-stable in [12421] and merged to trunk in [12422].

[Ryan J Ollos]

There is still the issue mentioned in comment:63:ticket:10245, which is present after an upgrade to jQuery UI 1.8.24 and the DateTimePicker 1.4.3. I'm not sure if either behavior is a defect, but the inconsistency is not desirable.

The datetimepicker stays visible after clicking Now until the field it is bound to loses focus. Maybe it should be expected to close. The datepicker disappears after clicking Today and will not reappear until putting the focus elsewhere and then back to the element that the datepicker is bound to. It seems reasonable that the datepicker might disappear after clicking Today, but it is a little strange the clicking the mouse in the field doesn't cause it to reappear.

[Jun Omae]

The datetimepicker stays visible after clicking Now until the field it is bound to loses focus. Maybe it should be expected to close.

Related issue is ​https://github.com/trentrichardson/jQuery-Timepicker-Addon/issues/224.

The datepicker disappears after clicking Today and will not reappear until putting the focus elsewhere and then back to the element that the datepicker is bound to. It seems reasonable that the datepicker might disappear after clicking Today, but it is a little strange the clicking the mouse in the field doesn't cause it to reappear.

Workaround.

trac/htdocs/js/jquery-ui-i18n.js

@@ -1 +1 @@
 jQuery(function($){
+  var showDatepickerOnClick = function() { $(this).datepicker('show') };
   // TRANSLATOR: Format in month heading in the datepicker, extracts yearSuffix
   // and showMonthAfterYear
   var formatMonth = _("$month$year");
@@ -24 +25 @@
     isRTL: false,
     showButtonPanel: true,
     showMonthAfterYear: formatMonth.indexOf('$month') >
-                        formatMonth.indexOf('$year')
+                        formatMonth.indexOf('$year'),
+    beforeShow: function(text, datepicker) {
+      $(datepicker.input).off('click', showDatepickerOnClick);
+    },
+    onClose: function(text, datepicker) {
+      $(datepicker.input).on('click', showDatepickerOnClick);
+    }
   });
   $.timepicker.setDefaults({
     // TRANSLATOR: Heading of the standalone timepicker

The datetimepicker has the same issue. Pressing ESC key would close the picker and leave focus on the input. However, beforeShow and onClose handlers for datetimepicker don't work using $.timepicker.setDefault.

[Ryan J Ollos]

Thanks, that seems to work well. Two questions:

• Should we hide the Timepicker after clicking Now?
• For both Datepicker and Timepicker, should the focus be placed on the element it is bound to after clicking Done, and for the Datepicker should the focus be placed on the element after selecting a date? That would allow tabbing to the next field.

[Ryan J Ollos]

New ticket for issues in comment:3: #11574.

[ankitpatel.gusnai@…]

How to click event perform on "Now" button click in datetime picker. Any idea send me code in my email.

Thanks Ankit

[Ryan J Ollos]

Replying to ankitpatel.gusnai@gmail.com:

How to click event perform on "Now" button click in datetime picker. Any idea send me code in my email.

You can take a look at the ​timepicker documentation or ask on the MailingList.