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;

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!

3 Answers 3


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();

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.

  • This is very close... it works great for an already existing value and it runs my function based on that pre-existing value (this is a custom edit form). However, it doesn't trigger if I change the date. I'll start reading through that article you linked to see if there's anything in there I can use unless you have any ideas!
    – Caola
    Apr 15, 2015 at 18:33
  • Do you mean it doesn't trigger if you change the date manually by typing in the input box? In this case you could either make the input field readonly, therefore forcing the user to pick the date via the date picker, or you could set up an additional event as in your original post, pointing it also to the 'DatePickerChanged' function.
    – Submits
    Apr 15, 2015 at 18:51
  • It doesn't trigger at all, with typing in text or using the date picker. The only time it triggers is when the document loads with a date already in the field. On change works for the text box itself, already.
    – Caola
    Apr 15, 2015 at 19:28
  • Are you sure you haven't inadvertently done this: $('#specificDateFieldID').get(0).onvaluesetfrompicker = DatePickerChanged()? Notice the parentheses at the end.
    – Submits
    Apr 16, 2015 at 9:47
  • I did put the parentheses at the end by mistake. I just removed them and tried again, and now I get an "unrecognized expression" error.
    – Caola
    Apr 16, 2015 at 13:38

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.