[Resolved] Disable the past date on datepicker

[Author]

Posts

[jackO]

Hi there....

I'm making a form with datetime.... The form is worked but I want to disable the past date on datepicker... so, the user cannot choose the day past.... Any suggestion for this?

Thanks...

[Nigel]

Hi there

You can update datepicker options after the form has been rendered using a little JavaScript (see hidden link for options).

Try adding this to the custom JS section of your form:

( function( $ ) {
	$( document ).ready( function(){
		$('.js-wpt-date').datepicker( "option", "minDate", "0" );
	});
})( jQuery );

But, please note the current issue described here: https://toolset.com/errata/quotes-in-the-extra-css-or-js-content-will-get-backslashed/

That will be fixed in the next Toolset Forms update.

[jackO]

I've tried the code.... but not worked... I'm try other code like this: -

( function( $ ) {
    $( document ).ready( function(){
        $('.js-wpt-date').datepicker({ minDate: 0});
    });
})( jQuery );

It's worked but not saved the data.... Any other code that I can use it?

[Nigel]

The code should work okay, I tested it and just tested it again.

With the above code when I click on the date field the datepicker opens, and earlier dates are greyed-out and inactive (see screenshot).

Then when I select a date it adds the text date to the date field. (There is also a hidden field updated with the timestamp which is the actual data that will be stored.)

Submitting the form, the chosen date is saved, as normal.

When you say your data is not saved, does it work normally when you don't use the code to modify the datepicker options?

[julieP]

@jackO

Apologies for butting in but I can't get this code to work either. I looked in & outside the forum for solutions and finally came up with this that works (thanks to this forum thread from 2017 /forums/topic/use-custom-jquery-ui-datepicker-as-the-credform-datepicker-doesnt-customize/#post-595275):-

jQuery(window).bind("load", function() {
jQuery( ".js-wpt-date" ).datepicker( "option", "yearRange", "2018:2030" , ).datepicker( "option", "minDate", "0" );
});

Notice I've implemented the year range from that thread because for some baffling reason, the datepicker goes all the way back to 1583 !!

[jackO]

Okay.... It's saved the data now... but it's not showing the data on field but it's ok... I'm display the data above the form... thanks...