Tempus-dominus: Option to fire dp.change when selected date is re-clicked

[clpalmer]

I'm currently modifying the picker, after the date is changed, to show a relative date to the selected one (ie. highlight another date based on the currently selected date, to show submission vs. expected completion) and it's working ok, except for when the user clicks the same already selected date. In that case, instead of just doing nothing as it does when a disabled date is clicked, the calendar is re-created and re-drawn but since the date is the same, the dp.change event isn't fired. The end result is that the date I've manually highlighted loses it's changes and I'm never notified to recreate them.

Ideally, I would like an API to highlight a block of dates, optionally providing a class to apply to each. I could then remove all my code and just call that when it's created and on each dp.change call.

Less work, but still sufficient, would be either not doing anything when the already created date is re-clicked (as the end result is no change anyways) or provide an option to set, such as 'changeEventOnSameDateSelected: true/false', that, if set, would case dp.change to fire even if the new date was the same as the old.

In the meantime, I have just modified it and statically removed the same date checks done before firing dp.change and it's working.

Thanks! So far a fantastic picker :)

[Eonasdan]

Firing the change event when the user selects the same date seems counter-intuitive, since that's not actually a change

[clpalmer]

Yes, clearly the worst of the solutions, but also the easiest. Also not sure why the calendar is redrawing itself when the same date is clicked either, as that shouldn't be necessary and stopping it would also permit my specific case, Better solution, but still fairly simple, would be to add an additional event for 'dp.redrawn' or some such, and even better would allow for applying a custom class to a block of dates.

[Eonasdan]

each day has data-day=[...] and a class of day. you should be able to handle any extra custom functions and requirements with that

[clpalmer]

It's not that I can't add the additional markup easily enough. But that only works if I can add additional click handlers to the day that are guaranteed to fire after the built in ones so I can redraw. Otherwise, there is no way for me to know when the calendar is redrawn (which it doesn't really need to be) as a result of clicking a second time on the already selected day. After it's redrawn, any changes I've made will be lost and I won't know to remake them. To get around that, either the calendar needs to not redraw when the same already selected day is clicked again (I can catch other redraws with the change event) or there needs to be an additional redraw event.

Or, as above, more ideally and for flexibility, a way to provide something like:

{
    specialDays: [
        {
            days: ['03-12-2015', '06-12-2015', '09-12-2015'],
            classNames: 'birthdays'
        },
        {
            days: ['07-15-2015', '10-22-2015'],
            classNames: 'holidays bank-holidays'
        },
    ]
}

as a configuration object, where, when the calendar is drawn, it could check each day against the list of additional special days and if it's matched to any of the days, the additional classes are added to the day.

[gwynjudd]

I'd like to chime in on this. I agree that firing a "change" event when the user selects a date which is the same as that already selected is a little weird, but from a user perspective, sometimes you popup the picker to confirm the value that is already there, or because there is a default value that is the correct one. It would be useful to have some kind of event that fires when you have selected the default date.

The most natural action to take in a lot of cases is to close the picker if you select the current date, but currently there isn't really any way to do that

[ArktekniK]

I'd like the chime in here too with a slightly different use case
I rely on the dp.change event to do some special formatting of the date string within the input field. The format that I use is not a valid moment js display format, so can't be set on initialisation
When the same date is clicked, my handler never gets called so the string in the input field uses the format that I originally initialised the picker to, instead of my custom format. Firing dp.change or something like dp.select would solve this issue.

[ddorian]

Dear Friends,

What I did is, whenver the view is updated, I register a click event on the selected date and looks to be working:

    function register_select_same_day(){
        // since dp.change doesn't trigger if the date doesn't change, we have to check ourself
        $(".datepicker .datepicker-days td.day.active").click(function(){
            console.log('clicked same day!!');
        });
    }
    thedatetime2.on("dp.update", function (e) {
        register_select_same_day();
    });
    thedatetime2.on("dp.show", function (e) {
        register_select_same_day();
    });

[bsherrill480]

@ddorian
I might be missing something, but I can get this to work for the first click on the same day, but any subsequent clicks do not register. I believe this had to do with the calendar being redrawn when the same day is clicked.

I'm just trying to add some custom classes to dates (dynamic so I can't hard code it), and it seems that I either need to write css using javascript (which i think smells bad) or have some way to know when the calendar is being redrawn so I can reapply the changes.

I feel like any of "dp.select", "dp.redrawn", or https://github.com/Eonasdan/bootstrap-datetimepicker/pull/1605 could be added so solve this issue.

[bsherrill480]

Well in the meantime, I've gone to

            var self = this;
            datepicker.bind('DOMSubtreeModified', function(e) {
                if (e.target.innerHTML.length > 0 && !document.querySelector(".special-day-1") && !document.querySelector(".special-day-2")) {
                    self.markCalendarDays();
                }
            });

This does a lot of unnecessary checking, but on a new pc/smartphone I'm not noticing anything too slow (but it is slower).

[eonasdan-bot]

Hello. Thanks for using my project. We’re closing all tickets/prs for v4 as it is no longer supported. We’re making way for a new version. Please read this blog post