Unanswered

Date picker: Disable past dates in forms

(0) Share

Report

Posted on by Community Power Pla...

I have a form in a PowerPortal page with date picker fields.

I want to add validation to the date picker fields to disable past dates.

From my research, I have added some custom javascript code to the page and the form via portal management but it did not work for me.

My code:

$(document).ready(function() {
 $("#crdd8_trip1_departure_date")
 .next()
 .data("DateTimePicker")
 .setMinDate(moment());
});

Questions:

Is the above correct or is there a different code that should do this for me?

I have been inserting the code under the javascript section in the additional settings tab, is this the correct place?

Any suggestions will be appreciated.

Categories:

Design & build

I have the same question (0)

All responses (11)

Answers (1)

Haritha222 113 on at

Like (0)

Report

Hi,

Please try below jQuery code,
Date_picker instead paste your date field

$(document).ready(function () { $("#date_picker").datepicker({ minDate: 0 }); });

Regards
Haritha

Was this reply helpful? Yes No
Haritha222 113 on at

Like (0)

Report

If answer is accepted means please make it as verifies

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

Thanks for your response but that code did not work for me.

Was this reply helpful? Yes No
Fubar 8,338 Super User 2025 Season 2 on at

Like (1)

Report
Please provide more details:
If you open the date picker can a user pick a date that is in the past (from the picker)? or
are you meaning the user can manually enter a date that is in the past into the input field?
The following is correct for disabling the dates within the picker control (you have to do the Imput seperately if the input is enabled)
// depending on where you place this it may also be wrapped in a JQuery document ready // and <script> tags $("#your_fieldname").next().data("DateTimePicker").minDate(moment());

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

Thank you so much Fubar.

Yes users are able to pick a date that is in the past.
They are also able to type a date in the past.

Your code worked for me but they are still able to type a date in the past.
Is there a code that can stop that and also grey out dates from the past in the date picker.

Was this reply helpful? Yes No
Fubar 8,338 Super User 2025 Season 2 on at

Like (0)

Report
You will have to add code to pickup the on change (note: they use a custom event dp.change not a standard onchange)
// change of date field - will pick up both manually typed date and selection from datepiker control var myDateControl = $("#your_fieldname").closest("div.control")[0]; $(myDateControl).on("dp.change",function(e){ alert("The onchange event of datepicker is fired"); });

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

Hi Fubar,

Thanks for your effort in helping me but the code is not working as expected.
What the code is doing is that it pops up the alert message both when past and future date is selected.

It just flags on any change made on the date field and after clicking okay, it still retains any data populated in the field.

Screenshots:
On selecting a future date:
On selecting a past date:
On clicking "OK", it populate the field with the already selected data:
This is the same on manual data entry.

I think the best thing to do here will be to totally disable manual entry of data in a date field, any code while validating past dates on a date picker.

Any code for that will be highly appreicated.

Thanks,

Chux

Was this reply helpful? Yes No
Haritha222 113 on at

Like (1)

Report

Hi,

As i have achieved before ,on submit form it will not allow paste dates.it will allow only today and future date. If it is okay please try once.

$(document).ready(function() {
    //Create date date validator
    var futuredatevalidation = document.createElement('span');
    //setup validator property and associated field
    futuredatevalidation.style.display = "none";
    futuredatevalidation.id = "dr_futuredatevalidation";
    futuredatevalidation.controltovalidate = "dr_date"; //datetime field
    futuredatevalidation.evaluationfunction = function() {
        var returnValue = true; //set default value as true
        //get   date done
        var date = $("#dr_date").val();
        //check if date is missing
        if (date == "101")
            returnValue = false; //if date is blank return false
        //format date using moment
date = moment(new Date(date), 'DD/MM/YYYY');
         //current date
         var currentDate = new Date();
         currentdate = moment(new Date(currentDate), 'DD/MM/YYYY');

        //get day from date
        //var daynumber = new Date( date).getDay();
        //validation for saturday and sunday
        if (date < currentdate ) {
            //setup custom validation message
            this.errormessage = "<a href='#dr_dateoftheprocedure_label'> Date should be greaterthan Current Date.</a>";
            returnValue = false;
        }
        return returnValue;
    };
    // Add the validator to the page validators array:
    Page_Validators.push(futuredatevalidation);
    // Wire up the click event handler of the validation summary link
    $("a[href='#dr_date_label']").on("click", function() {
        scrollToAndFocus('dr_date_label', 'dr_date');
    });
});

Was this reply helpful? Yes No
Verified answer

Haritha222 113 on at

Like (2)

Report

Hi Chuxmbcn

I have achieved using below code

Step 1: Goto portal management
Step 2: Goto form
Step 3: Additional settings
Step 4: custom Javascript(paste below code)
"dr_dateoccured" instead of this field please paste your filed schema name.

// disable dates in the past
$("#dr_dateoccured").next().data("DateTimePicker").minDate(moment())

Output:
Using above code i am not able to select past date.

Please try above code,it will work.

Regards
Haritha

Pastdate disabled...

Was this reply helpful? Yes No
Fubar 8,338 Super User 2025 Season 2 on at

Like (0)

Report

The code I provided is to capture the onchange event, the logic you apply inside it is up to you to code - my code applies no logic just alerts you that it has been triggered, you need to code your date comparison etc inside it and return true/false .

The code provided by Haritha is to do the validation on form submit (i.e. user can still type in an invalid date, but on submitting the form the user will see an error message).

Was this reply helpful? Yes No