cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
NewcombR
Advocate III
Advocate III

Datepicker change event

Hello,

 

I have a requirement to compare two dates on the client side. 

I need to pass Date A and Date B through a validation function on the change event of either field.  However, I’m having difficulty because the addEventListener method don’t seem to be working for the datepicker controls.

After spending some time on this, I’ve found that I must use jQuery to add the event listener... not on the field itself but on its div.control’s “dp.change” event. 

 

I’m on my mobile right now, so please forgive the formatting here.  The code looks similar to this (from my head).

 

$(“#myField”).closest(“div.control”).on(“dp.change“, myFunc);

 

Is there a way to setup an event listener to the datepicker’s change event using vanilla JS?  We prefer to use standard JS instead of jQuery (for a variety of reasons).  

 

 

4 REPLIES 4
hardikv
Impactful Individual
Impactful Individual

Hi @NewcombR

 

Please try below code:

$(document).ready(function() {

("#myField").next().data("DateTimePicker").on("dp.change", function (e) {

//Compare your date here

});

}) ;

 

--------------------------
If you like this post, give a Thumbs up. Where it solved your query, Mark as a Solution so it can help other people!

Fubar
Solution Sage
Solution Sage

Use jQuery as per @hardikv post.

 

Some other useful date picker

// disable the date field and picker
$("#your_fieldname")  // input control
   .next()   // the date picker container
   .data("DateTimePicker") // the date picker object
   .disable();

// enable the control after disabling
$("#your_fieldname").next().data("DateTimePicker").enable();

// show the date picker (like someone clicked the icon)
$("#your_fieldname").next().data("DateTimePicker").show();

// disable dates in the past
$("#your_fieldname").next().data("DateTimePicker").minDate(moment()) 

// disable dates in the future (5 days in this example)
$("#your_fieldname").next().data("DateTimePicker").maxDate(moment().add(5,'days')) 

// set a default date
$("#your_fieldname")  // input control
   .next()   // the date picker container
   .data("DateTimePicker") // the date picker object
   .defaultDate(new Date("2020-01-01"));
NewcombR
Advocate III
Advocate III

Thanks, guys.  I was aware of the dp.change event; however, I was hoping to use a vanilla JS listener that doesn’t require jQuery...

The Portal is jQuery heavy anyway (and the lbraries etc are already loaded by default) - so it is easier to just use it and not have to worry about writing code that will work with multiple browser differences etc.

 

Edit: if you were doing it from scratch it would be someting similar to https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events where the custom event is already defined as dp.change 

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

MBAS Attendee Badge

Claim Your Badge & Digital Swag!

Check out how to claim yours today!

secondImage

Are Your Ready?

Test your skills now with the Cloud Skill Challenge.

secondImage

Demo Extravaganza is Back!

We are excited to announce that Demo Extravaganza for 2021 has started!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Top Solution Authors
Users online (91,556)