Is there an onSelect Callback I can tap into to trigger an AJAX save when a new Date is selected?

[jasondavis]

Explanation of how my app uses a Date Picker library for multiple "Due Dates" in a single Task Modal DIV

I am building a Project Management application and I am working on a "Task Modal" which opens a Project Task in a Modal when clicked on in a Task List.

In my Tsk Modal I have a Due Date field in which I am going to have a Date Picker like this library when a user clicks on the Due Date, it will reveal an in-line Date Picker.

Sounds basic enough so far. My Task Modal is 1 Modal DIV in the DOM instead of # of Tasks X Modal DIVs. So when 1 Task Modal is opened, it populates all my Placeholder fields with Data from that Task record. When the Modal is closed, I empty all the fields in that 1 Modal.

So in a case like my Due Date filed in which a JavaScript library is being used, it means initializing the DatePicker library, setting the Date selection from the Task data, and then re-setting it or destroying it when possible as the Task Modal is closed.

All simple in theory, however you might be surprised as to how many GOOD DatePicker plugins worked 95% perfect and then caused many hours of headache trying to get the other 5% working in my situation.

My goal has also been to stay as light weight as possible due to the size that my app is already. So I have experimented with about 6 Date Picker libraries over the past 2 weeks.

I have got them all to work, ALMOST perfectly with the exception that all of them are missing 1 thing or another.

The Flow of my App from init of a Date Picker to Destroying it and setting up for use again:

• Task Modal opens and user clicks on Due Date which is shown as a text string 01/12/2015 or else if none is set it will show None.
• This click on the Due Date text makes the in-line Date Picker come into view.
• User clicks on a new Date which selects it in the Date Picker.
• Date Picker goes back into hiding and several areas of theDOM are updated with the new Date selection as well as some internal variables.
• AJAX request is POSTED to save the new Due Date value.
• User closes Task Modal, all Due Date related variables are reset so that no existing Task Due Date record flows over into another Task record that is opened after the current Task.
• User clicks a Task to open a new Task record in the Modal, process starts all over...

  What's missing in the other Date Picker libraries for my Project:

So my biggest issue has been some of the best light weight Date Picker plugins are lacking features such as:

• Setting a Date after the plugin is loaded already.
• Destroying the Date Picker when done with it.
• Some have actually been a real PAIN getting the previous selected Date value to clear out and re-set for the next Task Modal record.

So now that I explained how I am using "Date Picker" libraries in my project, I have to say I am really happy with the demo I saw of this library....

Some things I like about jquery-simple-datetimepicker

• Has a destroy() function
• Has a function to set a Date and get it back.
• Has a function to initialize the Date Picker on-demand as needed and then destroy when done...this truly is my dream for use in my current project...it sounds like just what I need since I am re-using the same Due Date field over and over for every Task that is opene in my Modal that gets re-used over and over.
• Clean code

  What's missing or what I need assistance with please...

There is only 1 feature that I have not seen yet that I really need, that is an onSelect() Callback. In the other libraries, this is where I make my AJAX post to save the new Date value when a user selects a Due Date..

Does such a feature/event exist already or not implemented yet?

Sorry for such a long post, I am just really excited as to how well this library seems to be built, I have been working on other Date Pickers al week, day and night and this one at first glance of the codebase seems to be the most well put together one! So Thank you!

---

Example onSelect() Callback I use on Zebra Date Picker
I am hoping I can do similar functionality with this library as I am really liking it so far! Thanks for any assistance....

/*
Callback function to be executed when a date is selected
The callback function takes 4 parameters:
– the date in the format specified by the “format” attribute;
– the date in YYYY-MM-DD format
– the date as a JavaScript Date object
– a reference to the element the date picker is attached to, as a jQuery object
Methods
*/
onSelect: function(dateInFormat, dateDefaultFormat, dateObj, datePickElem) {

    var dueDate = dateInFormat;

    console.log('Pre AJAX Due Date Save: '+dueDate);

    // Make AJAX POST to save Due Date value to the server and update DOM.
    $.ajax
    ({
        type: "post",
        url: "updateTaskDueDate",
        data: "date="+dueDate,
        success: function(result)
        {
            console.log('SUCCESS AJAX Due Date Save: '+dueDate);

            // UPDATE DOM with new DueDate value
            if(projectTaskModal.cache.isTaskListInDom){
                projectTaskModal.updateDom.updateTaskField('list', 'dueDate', dueDate);
            }
            projectTaskModal.updateDom.updateTaskField('modal', 'dueDate', dueDate);

            projectTaskModal.cache.taskDueDate = dueDate;

            // UPDATE SPAN #due-date-span with new Date value
            $('#task-modal-due-date-textinput').dataAttr('due-date', dueDate);
            $('#task-modal-due-date-span').dataAttr('due-date', dueDate);

            // Close/Hide Date Picker, until it is clicked to show again
            $('#task-modal-due-date-cal').hide();
        }
    });
},

[jasondavis]

I was able to add this in with these simple additions below. I submitted a Pull request but if it gets rejected or you want to implement yourself, here it is:

Line 1082:

    $picker.data('onSelect', opt.onSelect);

Around line 878 I added:

                // Generate the handler of a picker
                var $input = $(this);
                var handler = new PickerHandler($picker, $input);

                // Call a event-hanlder for onSelect
                var func = $picker.data('onSelect');
                if (func != null) {
                    console.log("dtpicker- Call the onSelect handler");
                    func(handler, targetDate);
                }

Line 1236

        "onSelect": null,

And now I can use this new callback like this to make AJAX saves and update DOM when Date is selected:

$('#btn_generate').click(function(){

    window.alert("Generate");

    $('#date_jit').appendDtpicker({

        "onSelect": function(handler, targetDate){
            window.alert(handler.getDate());
            console.log(targetDate);
        },

    });
});