How do you call a function (or trigger blur()) for an inline datepicker upon date selection?

scottharris@helixmail.com

Allan,

I have a dateTime field inside of an inline DataTables Editor. I have a custom function when the datepicker.blur() event occurs; however, I need to fire said function when a valid date (as defined by the minDate/maxDate options) is selected. Currently, you have to initiate the datepicker, select a date, and click outside of the table's cell in order to trigger the onBlur functionality.

I have tried setting the 'opts' with an onSelect: function(text, inst){...}, using onBackground, setting the $('#table').datepicker({onSelect: function(text, inst){...}});, and everything else which I can find to try from both the DataTables site and general research. Is there a built-in way to trigger a function when a date is selected from the datepicker's UI?

Thank you very much in advance!

allan

You can use dependent for this sort of thing:

editor.dependent( 'start_date', function ( val, data, callback ) {
  ...
} )

Allan

scottharris@helixmail.com

Thank you so much, Allan!!

This truly is an incredible and amazing library you have created!

scottharris@helixmail.com

For some reason, this is firing the function as soon as I click on the cell. I have tried explicitly setting { event: 'change' }, but to no avail. The calendar flashes for a fraction of a second before the function is called, but immediately disappears.

I have looked through the documentation for the dependent API, but do not see any other options to set for this.

allan

I haven't been able to reproduce that in this example I'm afraid. If you load the page and then in the browser's console enter:

editor.dependent( 'start_date', function ( val, data, callback ) {
  console.log('dependent')
} )

It will correctly show the message when the form is opened, not when you click on the date element but will again when a date value is selected.

Is that not happening for you?

Thanks,
Allan

scottharris@helixmail.com

Sorry for the delayed reply, @allan!

I have put some alerts in, and the dependent fires once when I click in the cell, but that is it. I need to resubmit the table data locally as soon as the user clicks on a date from the calendar, so I believe that is what is preventing the calendar from staying open more than a fraction of a second.

I will keep working at it and let you know what I find!

scottharris@helixmail.com

I wound up having to bypass the editor completely in order to fire a function as soon as the user selects a date. Here's how I did it in case it can help anyone else:

```//cell's render option adds divs inside the cell

//click a cell
table.on('click', 'td', function(e) {
$(this).datepicker({//options}).on('changeDate', function(date) {
//parse date here

      //replace current date inside cell's div
      $(this).find('#date').html(formattedDate);
 }).show();

});```

When a separate "save" button is clicked, the table is parsed for updated data and submits to the server, then an AJAX reload occurs on the table.

Thanks for all of the help, Allan!!