You’re offline. This is a read only version of the page.
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?
Hi @Audreyma,
I just checked the code that we talked about previously on my trial portal and everything work as intended. See code below:
Share
Report
All responses (
Answers (
function dateCheck(){
let startDate = new Date($("#hero_startdate").val());
let endDate = new Date($("#hero_enddate").val());
if(startDate > endDate) {
alert("End date need to be bigger then start date");
}
}
$( document ).ready(function() {
console.log( "ready!" );
$("#hero_enddate").next().on("dp.change", function(ev) {
console.log("Dp change",ev);
dateCheck();
});
});
Regarding form validators: it is indeed useful when you want to prevent form submission and add additional validation. In the example, in the docs, it prevents submission and adds an error span with the message. It should look like this (with your fields):
$(document).ready(function () {
if (typeof (Page_Validators) == 'undefined') return;
// Create new validator
let newValidator = document.createElement('span');
newValidator.style.display = "none";
newValidator.id = "cr_enddayValidator";
newValidator.controltovalidate = "cr_endday";
newValidator.errormessage = "<a href='#cr_endday_label'>End date must be bigger then start date.</a>";
newValidator.validationGroup = ""; // Set this if you have set ValidationGroup on the form
newValidator.initialvalue = "";
newValidator.evaluationfunction = function () {
let startDate = new Date($("#hero_startdate").val());
let endDate = new Date($("#hero_enddate").val());
if (startDate > endDate) {
return false;
} else {
return true;
}
};
// Add the new validator to the page validators array:
Page_Validators.push(newValidator);
// Wire-up the click event handler of the validation summary link
$("a[href='#cr_endday_label']").on("click", function () {
scrollToAndFocus('cr_endday_label', 'cr_endday');
});
});Can you also tell me how you add the code to the form?
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.");
}
} );
});
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 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?
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?
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(); })
});
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(); })
});
Hi @OliverRodrigues ,
Thank you for your sharing.
I don't know much about Javascript, is there any example for direct reference?
#1
Fubar
62
Super User 2025 Season 2
#2
Lucas001
48
Super User 2025 Season 2
#3
KevinGador
44
Super User 2025 Season 2
