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

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).  

 

 

6 REPLIES 6
hardikv
Memorable Member
Memorable Member

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 IV
Advocate IV

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 

NewcombR
Advocate IV
Advocate IV

Wanted to provide an update here for anyone else that might stumble upon this thread with the same question.

 

jQuery events are executed in their own layer.  While jQuery can pick-up on vanilla JS events, vanilla JS cannot listen for jQuery events.  So, you will need to actually use jQuery to dispatch the events so that native event listeners can pick them up.


Example:

Let's say I have developed some vanilla JavaScript module that doesn't want to or need to know about jQuery.  I have this code added in the Web Template or somewhere.  But it DOES need to know when a date column on the Power Apps form changes.

 

If I included the following line of code here on the Basic Form or Web Page's JavaScript areas, every time a datetime 'dp.change' jQuery event occurs, the datetimepicker component will then dispatch a native vanilla JS event.

 

 

$('#liquid_form .datetimepicker').on('dp.change', function (ev) {
    const relatedField = ev.target.previousElementSibling;
    if (relatedField) {
        const myEvent = new CustomEvent('datetimepicker-changed', {
            bubbles: true,
            detail: {
                logicalName: () => relatedField.id
            }
        });
        this.dispatchEvent(myEvent);
    }
})

 

 


Here, we are using jQuery to identify all DateTime pickers on the page, and then dispatch a custom JS Custom Event.  Notice here that I included a function in the Custom Event that will return the logical name of the Dataverse column.  This is so that you can identify which Dataverse column is changed.

Native Javascript event listeners can pickup on this.  For example:

 

 

document.addEventListener('datetimepicker-changed', function(e){
    console.log(e.detail.logicalName())
});

 

 

 

Perfect!  This allows my JS modules to be developed without needing to know anything about jQuery.  If/when Microsoft decides to upgrade the Power Apps Portals from Bootstrap3/jQuery (or decides to no longer use the boostrap3-datetimepicker component for it's Date controls...), I will only need to adjust the Custom Event dispatcher rather than having to make changes to the JS module.

Cheers!

Awesome. Thanks for sharing @NewcombR 🤝🤟

Helpful resources

Announcements
MPP IDEAS updated 768x460.png

Ideas

Discover ideas and concepts from users like you for how to use Power Pages and take your work to the next level.

Carousel News & Announcements

What's New in the Community?

Check out the latest News & Events in the community!

Top Solution Authors
Users online (2,646)