How do I trigger onchange from a default SharePoint 2010 date field?

Question

I am currently running a function on change when a user changes the value of a choice field. This function uses the date (previously selected) to filter items for another drop-down list. However, in the event that a user has already selected "Yes" from the choice field and wishes to change the date, I would also like to trigger that filtering function when the date is changed on the default SharePoint date field.

I can get it to work if the user manually types in the date box and clicks off of it: (this is sitting in document ready)

            $('#specificDateFieldID').on('change', function(){              
               var date = this.value;
               queryEvents(date);        
            });

Does anyone know how to trigger this event listener when a user clicks the little calendar icon and changes the date there instead of just typing in the box manually?

I can post more code if this is not enough. Thanks!

Answer 1

Yes this is possible. I have successfully used the the onvaluesetfrompicker function of a Date field, like so:

$('#specificDateFieldID').get(0).onvaluesetfrompicker = DatePickerChanged;

function DatePickerChanged() {
    // Do stuff
}

But this was in SharePoint 2013. It seems from this that it should also work in SharePoint 2010 with custom forms, but not in a Calendar form.

Answer 2

This was bugging me for days. The cursor is added to the field every time you select a date. Listen on the input field date picker prints your date to using "focus".

    $("[title='Date Received']").on("focus", function(event){
        var daterecieved = $(event.target).val();
        console.log(daterecieved)
    });

Answer 3

There is no straight forward way to do this. The reason being when you click the calendar icon. It open the calendar control in an IFRAME.

It is not possible to attach any event to elements inside the iframe. And thus we can't capture date click event.

When we click on a date, there is a JavaScript running behind the scene which will update the INPUT control. Hence your onchange event is not getting fired.

I believe your only option is to use a timer along with the calendar button click and monitor the values in the input box.