[Resolved] Select a date that is not before the first date field

[Author]

Posts

[leilaG]

Hello, we have a form with a Arrival date and a Departure date, currently some users in error are selecting a departure date that is before the arrival date . How do we disallow that?

<div class="row">
<div class="col-md-4">
<label>Arrival date</label>
[cred_field field='arrival-date' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="col-md-4">
<label>Arrival time</label>
[cred_field field='arrival-time' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="col-md-4">
<label>Departure date</label>
[cred_field field='departure-date' force_type='field' class='form-control' output='bootstrap']
</div>
</div>

[Minesh]

Hello. Thank you for contacting the Toolset support.

To achieve such functionality you will require to add custom JS code to your form's JS editor.

If you can share problem URL and access details I will check your fields and happy to share the solution.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Can you please check now: hidden link

I've added the following JS code to your form's JS editor in order to set minDate for your both arrival+departure (start,end) date fields.

 jQuery(document).ready(function() {
  
 var fromId = jQuery('input[name="wpcf-arrival-date[display-only]"]').attr('id');
 var toId = jQuery('input[name="wpcf-departure-date[display-only]"]').attr('id');
  
 var $from = jQuery( '#' + fromId );
 var $to = jQuery( '#' + toId );
 
$from.datepicker('option', 'dateFormat', 'dd/mm/yy' );
 $from.datepicker('option', 'minDate',0);
 $from.datepicker('option', 'onSelect', function( selectedDate, obj ) {
    $to.datepicker( "option", "minDate", selectedDate );
 });
 
 $to.datepicker('option', 'dateFormat', 'dd/mm/yy' );
 $to.datepicker('option', 'onSelect', function( selectedDate, obj ) {
    $from.datepicker( "option", "maxDate", selectedDate );
 });
  
  
});  

Please try to remove the browser cache (do a hard refresh) before you test.

Can you please confirm its working as expected on your end as well.

[leilaG]

Hi I tested the for yesterday and today using incognito window and hard refresh but it still allows me to add a previous departure date.

[Minesh]

It seems there is issue with document.ready method.

I've changed the code to onload method as given under:

jQuery(window).load(function() {
    
  
 var fromId = jQuery('input[name="wpcf-arrival-date[display-only]"]').attr('id');
 var toId = jQuery('input[name="wpcf-departure-date[display-only]"]').attr('id');
  
 var $from = jQuery( '#' + fromId );
 var $to = jQuery( '#' + toId );
 
$from.datepicker('option', 'dateFormat', 'dd/mm/yy' );
 $from.datepicker('option', 'minDate',0);
 $from.datepicker('option', 'onSelect', function( selectedDate, obj ) {
    $to.datepicker( "option", "minDate", selectedDate );
 });
 
 $to.datepicker('option', 'dateFormat', 'dd/mm/yy' );
 $to.datepicker('option', 'onSelect', function( selectedDate, obj ) {
    $from.datepicker( "option", "maxDate", selectedDate );
 });
  
  
});  

Can you please confirm: hidden link

It works as expected now.

[leilaG]

Works perfectly. Thank you!