You are viewing limited content. For full access, please sign in.

Question

Question

Constraint for date picker

asked on September 22, 2020

I have a few forms where customers are not able to backdate to a date other then same day or a future date and where they are not able to select Saturday or Sunday. I have tried a few scripts that I have found and they are not working. I am very new to scripting so I could be doing something wrong. 

 

0 0

Replies

replied on September 22, 2020

The date picker validation only goes based on ranges as far as I know, but setting the range is pretty easy since the Moment.js library is loaded in Forms.

    // get date
    var d = new Date();
  
    // set minimum date
    var minDate = moment(d,'MM/DD/YYYY').format('YYYY-MM-DD');
    $('.dateField input').attr('min',minDate);

    // set maximum date
    var maxDate = moment(d.setMonth(d.getMonth() + 3)).format('YYYY-MM-DD');
    $('.dateField input').attr('max',maxDate);

That code sets a min date of "today" and a max date 3 months in the future for a date input that has the class 'dateField' added, but you could also target it by id.

 

As for blocking weekends, you can hide them from the pop-up menu/calendar with CSS, but that won't prevent someone from typing them in manually.

Since the built-in validation is based on range only, you may have to add custom validators that translate the input date into a "day of the week" and go from there.

The CSS for hiding weekends should be as follows since they're using the jQueryUI datepicker.

th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
    display: none;
}

 

1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.