How to make sure end date is greater than start date in power apps portal entity form?

[Audreyma]

Hi everyone,

I have 2 fields to record start date and end date in the entity form of power apps portal.

Date type is set as "Date Only" for both fields.

How to make sure selected end date is greater than start date?

[OliverRodrigues]

Hi, you can add client-side validation to perform that check: https://docs.microsoft.com/en-us/powerapps/maker/portals/configure/add-custom-javascript

[Audreyma]

Hi @OliverRodrigues ,

Thank you for your sharing.

I don't know much about Javascript, is there any example for direct reference?

[Audreyma]

Hi,

I found a sample code which will alert a message when end date is smaller than start date.

The function worked itself, but there seems to be some mistakes with my "$(document).ready" writing. I tried 2 methods, neither works.

Below is the code I'm using.  Any idea about it?

function DateCheck(){
var StartDate= document.getElementById('cr_startday').value;
var EndDate= document.getElementById('cr_endday').value;
var eDate = new Date(EndDate);
var sDate = new Date(StartDate);
if(StartDate!= '' && StartDate!= '' && sDate> eDate)
{
alert("Please ensure that the End Date is greater than or equal to the Start Date.");
}
};



Method1
$(document).ready(function () {
DateCheck();
});


Method2
$(document).ready(function () {
$("#cr_endday").change(function () { DateCheck(); })
});

[OOlashyn]

Hi @Audreyma,

DateTime fields are always tricky one. You cannot just add onchange function because datetime picket on portal is complex control. Check out my article where I am explaining in depth how datetime picker works on portal.

To register onchange event you need to use next code:

$(document).ready(function () {
$("#cr_endday").next().on("dp.change", function(ev) { DateCheck(); })
});

[Audreyma]

Hi @OOlashyn 

Thank you for your help.

I use the onchange event you provided, but the function didn't work, either.

I ran the content of the function in webpage console, it worked.  So still the issue of $(document).ready writing?

[OOlashyn]

@Audreyma the code should work, so I indeed assume something is with document ready syntax. Can you share full code that you are trying to use?

[Audreyma]

Hi @OOlashyn 

Below is the full code.  I used the document-ready syntax you provided.

function DateCheck(){
var StartDate= document.getElementById('cr_startday').value;
var EndDate= document.getElementById('cr_endday').value;
var eDate = new Date(EndDate);
var sDate = new Date(StartDate);
if(StartDate!= '' && StartDate!= '' && sDate> eDate)
{
alert("Please ensure that the End Date is greater than or equal to the Start Date.");
}
};

$(document).ready(function () {
$("#cr_endday").next().on("dp.change", function(ev) { DateCheck(); })
});

[Audreyma]

Hi @OOlashyn 

Thank you for help!

May I know if there is any update about the above issue?

[Audreyma]

Hi,

I just tried another method.

When click submit button in the entity form, it will check end date and start date.

With the below code, alert will be shown when clicking button.  But the entity form will still be submitted.

Anybody know how to prevent submitting the entity form when alert happened.

I found an article about webform validator, but don't know how to coordinate with my function.

https://docs.microsoft.com/en-gb/powerapps/maker/portals/configure/add-custom-javascript

document.addEventListener('DOMContentLoaded', function　DateCheck() {
    document.getElementById("InsertButton").addEventListener('click',function DateCheck()
    {
       var StartDate= document.getElementById('cr_startday').value;
  　　  var EndDate= document.getElementById('cr_endday').value;
       var eDate = new Date(EndDate);
       var sDate = new Date(StartDate);
       if(StartDate!= '' && StartDate!= '' && sDate> eDate)
         {
          alert("Please ensure that the End Date is greater than or equal to the Start Date.");
         } 
    }  ); 
});