Skip Navigation

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

Este hilo está resuelto. Aquí tiene una descripción del problema y la solución.

Problem:
Select a date that is not before the first date field with Toolset form

Solution:
To edit the date picker options, you will require to add the custom JS code to your form's JS editor.

You can find the proposed solution in this case with the following reply:
https://toolset.com/forums/topic/select-a-date-that-is-not-before-the-first-date-field/#post-1780111

Relevant Documentation:

This support ticket is created hace 3 años, 6 meses. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

This topic contains 5 respuestas, has 2 mensajes.

Last updated by leilaG hace 3 años, 6 meses.

Assisted by: Minesh.

Autor
Mensajes
#1777423

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>

#1778217

Minesh
Supporter

Languages: Inglés (English )

Timezone: Asia/Kolkata (GMT+05:30)

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.

#1778509

Minesh
Supporter

Languages: Inglés (English )

Timezone: Asia/Kolkata (GMT+05:30)

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.

#1780029

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.

#1780111

Minesh
Supporter

Languages: Inglés (English )

Timezone: Asia/Kolkata (GMT+05:30)

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.

#1780271

Works perfectly. Thank you!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.