web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Pages / Prevent Users from ent...
Power Pages
Unanswered

Prevent Users from entering date prior to 1900 and greater than Today in Calendar

(0) ShareShare
ReportReport
Posted on by 6

I am a Jquery/JS newbiew and I have a date of birth field (abcd_dateofbirth) in an advanced form and I don't want people to enter in a date of birth prior to 1/1/1900 and I don't want them to enter in a date greater than today.  I have the following code setup for the DateTImePicker so that it doesn't allow them to select any values in those ranges and that works great:

$(document).ready(function() {
$("#abcd_dateofbirth").next().data("DateTimePicker").minDate(moment("1900-01-01"));
$("#abcd_dateofbirth").next().data("DateTimePicker").maxDate(moment());
});
 
However, people can type in values that are earlier than 1900 or greater than today and I want validation on the field so that they can't move on to the next page unless it is a valid date of birth.  Ideally it would be an onchange event, but it is also ok if the validation happens when they click the next button.  I've read this article - add custom javascript but have been unable to get it to work.  Any help with the code to validate it would be greatly appreciated.

Thanks,
Ken
Categories:
I have the same question (0)
  • oliver.rodrigues Profile Picture
    9,368 Most Valuable Professional on at

    I feel like with the code above users shouldn't be able to enter anything earlier than 1900-01-01

    how are you managing to get around? I will give it a go on my side here tomorrow to see if I can reproduce

    did you try adding validation to the onchange? 

    would this help?: OnChange event handler in Dataverse entity form - Power Platform Community (microsoft.com)

  • Fubar Profile Picture
    8,338 Super User 2025 Season 2 on at

    @OliverRodrigues think the code is only for the Datepicker control itself, if the input field is enabled for editing the user can still manually enter their own date (and so may also need to add some validation code on the Input). (it is possible to force the use of the picker control, but may not always be desirable) 

    Don't know where it is but I think something similar has been raised on the forums before.

  • kostrows Profile Picture
    6 on at

    Correct Fubar.  The code I am using enforces the Datepicker control, but you can manually type in a date outside that range.  


    I'm looking for help to write that validation code for the dates that people type in manually and not allow them to move on with an invalid DOB.  Does that make sense?

  • Verified answer
    Inogic Profile Picture
    1,135 Super User 2025 Season 2 on at

    Hi,

     

    We can use Javascript code to validate dates on the Basic Form. For example purpose i have considered Account entity.

    • Step 1: Add the below code to the Basic Form in Custom Javascript Section under the Additional Settings tab. And save it.

     

    Inogic_0-1673521866408.jpeg

     

    Below is the code you shown in above screenshot.Posting it here so that you can use as is in your Basic Form

     

    $(document).ready(function() {

     

        //Create date validator

        var dateValidator = document.createElement('span');

     

        //setup validator property and associated field

        dateValidator.style.display = "none";

        dateValidator.id = "DateFormatValidatortct_dateofdischarge";

        dateValidator.controltovalidate = "tct_dateofdischarge"; //datetime field

        dateValidator.evaluationfunction = function() {

     

            var returnValue = true; //set default value as true

     

            //get date of discharge

            var dateofdischarge = $("#tct_dateofdischarge").val();

            var converteddate=new Date(dateofdischarge);

     

            var todaydate = new Date();

            //check if entered date is todays date

            if (converteddate.getDate() == todaydate.getDate() && converteddate.getMonth() == todaydate.getMonth() && converteddate.getFullYear() == todaydate.getFullYear()){

                 returnValue = false;

     

                //setup custom validation message

                this.errormessage = "<a href='#tct_dateofdischarge_label'> Date selected should be in the past</a>";

                returnValue = false;

     

            }

            //check 1900 year

            else if(converteddate.getFullYear() < 1900){

                returnValue = false;

     

                //setup custom validation message

                this.errormessage = "<a href='#tct_dateofdischarge_label'> The Year In The Date Of Discharge cannot be less than 1900. So please change date</a>";

                returnValue = false;

            }

     

            return returnValue;

     

        };

        // Add the validator to the page validators array:

        Page_Validators.push(dateValidator);

     

        // Wire up the click event handler of the validation summary link

        $("a[href='#tct_dateofdischarge_label']").on("click", function() {

            scrollToAndFocus('tct_dateofdischarge_label', 'tct_dateofdischarge');

        });

     

    });

     

    • Step 2: Clear the portal cache and view the result.

     

           If we Entered “Date of Discharged” today’s date then it will show the error validation message.

     

    Inogic_1-1673521866421.jpeg

     

    Error message:

    Inogic_2-1673521866430.jpeg

     

    • Step 3: If we Entered “Date of Discharged” earlier than 1900 year then it will show the error validation message.

    Inogic_3-1673521866450.jpeg

     

    Error Message :-

    Inogic_4-1673521866472.jpeg

     

    It validates for both earlier than 1900 or greater than today.

     

    Hope this helps!!!

     

    If you find this solution helpful, please mark it as accepted solution.

     

    Thanks!
    Inogic Professional Services
    An expert technical extension for your techno-functional business needs
    Power Platform/Dynamics 365 CRM
    Drop an email at crm@inogic.com 
    Service: http://www.inogic.com/services/ 
    Power Platform/Dynamics 365 CRM Tips and Tricks: http://www.inogic.com/blog/ 

  • kostrows Profile Picture
    6 on at

    Thank you @Inogic.  That was extremely helpful.  I had to make one minor change to the code to throw an error for all future dates and that was:

     

    var todaydate = new Date();
    //check if entered date is todays date
    if (converteddate.getDate() > todaydate.getDate()){
    returnValue = false;

     

    I appreciate everyones assistance!

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Leaderboard > Power Pages

#1
Jerry-IN Profile Picture

Jerry-IN 71

#2
Fubar Profile Picture

Fubar 62 Super User 2025 Season 2

#3
sannavajjala87 Profile Picture

sannavajjala87 31

Last 30 days Overall leaderboard