Calendar: Add onAfterSelect callback

[PhilippGrashoff]

Feature Request

Currently, there is the onSelect Callback. This callback is called BEFORE the selected date is transferred into the input field.
It would be nice to have a callback which is called AFTER the selected date was transferred to the input field.
My use case is simple: I implemented an auto-Submit form which submits whenever there is a sensible change in an input. Especially for a date, not every input is sensible, e.g. if someone types a date by keyboard. Here, submitting is only sensible when the enter key is pressed.
At the moment, I cant simply call the form submit in onSelect, as the value was not transferred to the input field at that point yet. Hence it is not sent to the server. A onAfterSelect callback would fix this.

At the moment I try to work around this in onSelect by something like:

                    function(date, mode) {
                        if(!date) {
                            return;
                        }
                       //set date to input before submitting the form
                        $(this).find('input').val(dateTodmY(date));
                        $("#someForm").form('submit');
                    }

[lubber-de]

There exists two additional callbacks for the change of the inputfield

onChange (will be called AFTER value has changed)
onBeforeChange (will be called BEFORE value will be changed and can be cancelled by returning false
Both are called after the onSelect callback, so you can still cancel the date selection or do anything before the datefield gets really updated

Does this help ? I think the onChange callback is what you are looking for, because it is called after the value has been updated in the input field

[PhilippGrashoff]

Hi,
no, this does not really help, as onChange is triggered by any keyboard input and also does behave funny, see #1517

If that issue was solved, I could theoretically use onChange, though I still could not handle the case that I would like the form to be only submitted by the enter key if someone enters a date by keyboard.

[PhilippGrashoff]

Date inputs are really tricky IMO to offer a good useage to the user, as input by keyboard and input by selecting a date in the calendar differ so much... Worked with HTML5 date inputs before and basically had the same questions to answer.

[lubber-de]

What you can do is to offer a button as Date selector instead of an input field.
This way the user simply cannot type anything manually but is forced to select a date from the calendar popup

See https://jsfiddle.net/pL5tvwdg/1/

[PhilippGrashoff]

But I do not want to disable the manual date input. Its very handy in case you have to enter the date which is for Example 3 Years in the future. Would need 36 clicks in the calendar.

[lubber-de]

Regarding the 36 clicks, its not necessary as i mentioned here #1517 (comment)
We may put those two issues together into one to avoid postig the same ?

I still believe that additional suggested "AfterSelection" Event is not necessary because onChange and onBeforeChange are called right after onSelect is.
So, according to the usecase to do something after the input field has been updated, you go with onChange

I understand, it's tricky to find out when the user has actually stopped typing when onChange triggers, but this is part of your other issue #1517

I would not even know where to call such an additional "afterSelect" in the code ( after onChange? after onBeforeChange? after onSelect (as said, the input field is not updated at that time)

[PhilippGrashoff]

Could we pass an additional parameter to onChange like source which would e.g. "keyboard" or "calendar" (when someone clicks a date)? This would make working in onChange easier.
I still think the most important part is that incomplete dates are not guessed and transformed into actual dates.

[lubber-de]

@PhilippGrashoff Possibly 😉
But you can already figure this out by checking for the onSelect event. If it was called right before the onChange you know the value came from a cell selection. Otherwise it was a pure keyboard entry and you should validate the date value against your desired format.
See https://jsfiddle.net/lubber/18gwompk/11/

[PhilippGrashoff]

Yes, that is a nice idea setting some property using onSelect handler. Now only the wild date guessing needs to be fixed :) And thats issue #1517