Datepicker change event

[NewcombR]

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

[hardikv]

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]

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]

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

[Fubar]

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]

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!

[ragavanrajan]

Awesome. Thanks for sharing @NewcombR 🤝🤟