CODEWITHSUNDEEP
javascriptjqueryjquery-uidatetimepickerjquery-ui-datepicker
streetlight
streetlight

Reputation: 5968

Disabled Automatic date value changes during Next/Previous actions in jQuery DateTimePicker

I'm working with Trent Richardson's great Datetimepicker plugin for jQuery UI's datepicker.

One issue however that I wish to resolve is the fact that when you select a field, and then navigate through it, the date value changes in the input field. So, if you selected a date, and then decided to navigate to view other options, it changes the date during the process.

For an example, you can look at the examples page right here (using dropdowns instead of sliders ).

Here is my initialization code:

$('input[name=valueTextField]').addClass('datepicker');

                $( ".datepicker" ).datetimepicker({
                        dateFormat: 'm/d/yy ',
                        timeText: 'Test',
                        controlType: 'select',
                        timeFormat: "h:mm TT",
                        ampm: true,
                        onChangeMonthYear: function(year, month, dpInst, tpInst) {
                            alert(dpInst);
                            alert(dpInst.dateDefined);
                            if(!tpInst.timeDefined && !dpInst.dateDefined) {
                                this.value = '';
                                dpInst.dateDefined = null;
                            }
                            if (dpInst.dateDefined) {

                            }
                        },
                        onSelect: function(date, dpInst) {
                            dpInst.dateDefined = true;
                        }

                });
                $("#ui-datepicker-div").addClass("meta_datepicker");
                $('input[name=valueTextField]').attr('readonly', 'readonly');

You can see a JSFiddle here.

Upvotes: 1

Views: 2277

Answers (1)

mgibsonbr
mgibsonbr

Reputation: 22007

You could save the previous value after each keyup and select, and restore it during a changeMonthYear or close:

$( ".datepicker" ).datetimepicker({
    ...
    onSelect: function() {
        $(this).data("oldValue",this.value);
    },
    onChangeMonthYear: function(year, month, dpInst, tpInst) {
        this.value = $(this).data("oldValue");
    },
    onClose: function() {
        this.value = $(this).data("oldValue");
    }
}).keyup(function() {
    $(this).data("oldValue",this.value);
});

Working example. Not pretty, but gets the job done... Some edge cases:

  • While you're navigating the pop-up, everything works fine, but if you try to edit the text field it goes back to the current month (not really a problem though).
  • If you paste some date into the text field using your mouse and then immediatly click "next" or "previous", it won't keep the correct value (don't know an easy cross-browsers solution for that though).
  • If you change months and then select a time, the date will also change to the current month, as pointed out by @streetlight. To prevent that, a custom controlType might be used, but a full implementation is beyond the scope of this answer.

Update: as @streetlight pointed out yet another problem - after using the "Now" button everything seems to become "glitchy" (sometimes it uses the old value, sometimes the new) - I'm reaching the conclusion this is too much work to do in user code. Assuming that in fact it's better for usability not to automatically change the value while navigating the calendar, I'd suggest a RFE be opened with the jQuery team to propose this option.

Upvotes: 1

Related Questions