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

[kostrows]

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

[OliverRodrigues]

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]

@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]

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?

[Inogic · Accepted solution]

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.

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.

Error message:

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

Error Message :-

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]

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!