Skip Navigation

[Resolved] Disable certain datepicker dates depended on another datepicker value

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.

Tagged: 

This topic contains 20 replies, has 2 voices.

Last updated by GeorgeM4735 6 years, 2 months ago.

Assigned support staff: Minesh.

Author
Posts
#330404

I have 2 datepicker custom fields(start-date, end-date) and I am trying to disable certain dates from the end-date picker accordingly to the value of the first start-date field using jQuery. Currently I am using this code which disables all previous dates from today's date for both pickers:

jQuery(document).ready(function($) {
    setTimeout(function() {
        if($( "input.js-wpt-date" )) {
            $("input.js-wpt-date").each(function() {
                val = $(this).val();
                $(this).datepicker("option", "minDate", 0);
                $(this).val(val);
            });
        }
    }, 500 );
});

How could I modify the code so I could have the second end-date picker grey out previous dates from the date selected in the first one?

#330428

Minesh
Supporter

Languages: English (English )

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

Hello and thank you for contacting Toolset support.

Could you please share a link where I can see your date fields.

*** Please take FULL BACKUP of your database and your website.***
In order to investigate your issue if we require to check things on your install in order to see what could be going wrong there.

If you agree to this please use the form fields I have enabled below this comment box to provide temporary access details (wp-admin and FTP)?

I have set next reply as private.

#330458

Hi, I believe there is no need to do that, I could just tell you the field classes(I've tested them).

.cred-field-event-end-date input
.cred-field-event-end-date input

I think that should be enough, they are just datepicker fields.

I was also checking this example out, maybe it would help!
hidden link

In this example, the from date also updates if the users selects the "to" field first which is what I would like to do!

#330580

Minesh
Supporter

Languages: English (English )

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

Could you please try to use following Javascript code and add it to CRED forms JS section.:

jQuery(document).ready(function($){
  
  from = jQuery('input[name="wpcf-from[display-only]"').attr('id');
  
  to = jQuery('input[name="wpcf-to[display-only]"').attr('id');

    $( "#"+from ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#"+to ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#"+to ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#"+from ).datepicker( "option", "maxDate", selectedDate );
      }
    });
});

Note:
wpcf-from[display-only] : please try to change to your original "From" date field.
wpcf-to[display-only] : Please try to change to your original "To" date field.

#330664

Great advice, Minesh! Almost there:

1) Is it possible to have the first date restricted to todays date as a minimum? Meaning users won't be able to select a past date. At the moment, if no end date is selected, it's possible for users to select any dates. When users select end date first, the start date calendar gets adjusted correctly.
2) With this code, the clear date buttons that were visible when a date was selected, are gone now and the dates cannnot bet cleared anymore. Is there anyway of getting that back?

Here is my code so far:

  from = jQuery('input[name="wpcf-event-start-date[display-only]"').attr('id');
  to = jQuery('input[name="wpcf-event-end-date[display-only]"').attr('id');
    $( "#"+from ).datepicker({
      changeMonth: true,
      changeYear: true,
      onClose: function( selectedDate ) {
        $( "#"+to ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#"+to ).datepicker({
      changeMonth: true,
      changeYear: true,
      onClose: function( selectedDate ) {
       $( "#"+from ).datepicker( "option", "maxDate", selectedDate );
      }
    });
#330680

Another thing that also happens now is that the date fields fail required field validation now! It says that these fields are required even though dates are selected.

#330695

Minesh
Supporter

Languages: English (English )

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

1) Is it possible to have the first date restricted to todays date as a minimum? Meaning users won't be able to select a past date. At the moment, if no end date is selected, it's possible for users to select any dates. When users select end date first, the start date calendar gets adjusted correctly.
=> I have added following attribute:

    minDate: 0 

2) With this code, the clear date buttons that were visible when a date was selected, are gone now and the dates cannnot bet cleared anymore. Is there anyway of getting that back?
=> I have added following code:

    if($( "#"+from ).val() !=''){
      $('.cred-field-event-start-date .js-wpt-date-clear').show();
      }else{
       $('.cred-field-event-start-date .js-wpt-date-clear').hide();
    }
    
  });
  
  $( "#"+to ).on('change',function(){
    
    if($( "#"+to ).val() !=''){
      $('.cred-field-event-end-date .js-wpt-date-clear').show();
     }else{
       $('.cred-field-event-end-date .js-wpt-date-clear').hide();
    }
    
  });

So, finally it looks like as given under, could you please try to use following code:

from = jQuery('input[name="wpcf-event-start-date[display-only]"').attr('id');
to = jQuery('input[name="wpcf-event-end-date[display-only]"').attr('id');


$( "#"+from ).on('change',function(){
    
    if($( "#"+from ).val() !=''){
      $('.cred-field-event-start-date .js-wpt-date-clear').show();
      }else{
       $('.cred-field-event-start-date .js-wpt-date-clear').hide();
    }
    
  });
  
  $( "#"+to ).on('change',function(){
    
    if($( "#"+to ).val() !=''){
      $('.cred-field-event-end-date .js-wpt-date-clear').show();
     }else{
       $('.cred-field-event-end-date .js-wpt-date-clear').hide();
    }
    
  });
  

  $( "#"+from ).datepicker({
    changeMonth: true,
    changeYear: true,
   minDate: 0,
    onClose: function( selectedDate ) {
      $( "#"+to ).datepicker( "option", "minDate", selectedDate );
    }
  });
  $( "#"+to ).datepicker({
    changeMonth: true,
    changeYear: true,
    minDate: 0,
    onClose: function( selectedDate ) {
     $( "#"+from ).datepicker( "option", "maxDate", selectedDate );
    }
  });
#330698

Yeah, issues are fixed, it still fails required field validation though...

#330743

Minesh
Supporter

Languages: English (English )

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

what is the issue with required field validation?

is it the case that you have already selected the date and still its showing that error message "Please enter date."?

#330770

Yes, it shows a message that the field is required since I set it as a required custom field in the Types admin!

#330782

Minesh
Supporter

Languages: English (English )

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

Could you please try to use following code:


from = jQuery('input[name="wpcf-event-start-date[display-only]"').attr('id');
to = jQuery('input[name="wpcf-event-end-date[display-only]"').attr('id');

  from1 = jQuery('input[name="wpcf-event-start-date[datepicker]"').attr('id');
  to1 = jQuery('input[name="wpcf-event-end-date[datepicker]"').attr('id');
  
$( "#"+from ).datepicker({
    changeMonth: true,
    changeYear: true,
   minDate: 0,
    onClose: function( selectedDate ) {
      $( "#"+to ).datepicker( "option", "minDate", selectedDate );
       jQuery('#'+from1).val(selectedDate);
        
       if(jQuery('#'+from1).val()!= '')
          $('.cred-field-event-start-date .js-wpt-date-clear').show();
    }
  });

  $( "#"+to ).datepicker({
    changeMonth: true,
    changeYear: true,
    minDate: 0,
    onClose: function( selectedDate ) {
     $( "#"+from ).datepicker( "option", "maxDate", selectedDate );
       
         jQuery('#'+to1).val(selectedDate);
        
        if(jQuery('#'+to1).val()!= '')
          $('.cred-field-event-end-date .js-wpt-date-clear').show();
    }
  });

#330798

Hi, really appreciate your patience on this!

No, still the same:
"This field is required". It keeps displaying the message even when I select a date from the picker whereas before the code, this message would go away. Another thing I noticed is that once I set the field NOT to be required, and the post gets published, the dates are actually not saved with the post. It makes me think that somehow we change the date variables in a way that CRED doesn't understand them anymore...

#330995

Minesh
Supporter

Languages: English (English )

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

"This field is required". It keeps displaying the message even when I select a date from the picker whereas before the code, this message would go away.

=> Please try to use following code:

from = jQuery('input[name="wpcf-event-start-date[display-only]"').attr('id');
to = jQuery('input[name="wpcf-event-end-date[display-only]"').attr('id');
 
  from1 = jQuery('input[name="wpcf-event-start-date[datepicker]"').attr('id');
  to1 = jQuery('input[name="wpcf-event-end-date[datepicker]"').attr('id');
   
$( "#"+from ).datepicker({
    changeMonth: true,
    changeYear: true,
   minDate: 0,
    onClose: function( selectedDate ) {
      $( "#"+to ).datepicker( "option", "minDate", selectedDate );
       jQuery('#'+from1).val(selectedDate);
         
       if(jQuery('#'+from1).val()!= '') {
  $('label[for="'+from1+'"]').hide();
          $('.cred-field-event-start-date .js-wpt-date-clear').show();
       }

   }
  });
 
  $( "#"+to ).datepicker({
    changeMonth: true,
    changeYear: true,
    minDate: 0,
    onClose: function( selectedDate ) {
     $( "#"+from ).datepicker( "option", "maxDate", selectedDate );
        
         jQuery('#'+to1).val(selectedDate);
         
        if(jQuery('#'+to1).val()!= ''){
          $('label[for="'+to1+'"]').hide();
          $('.cred-field-event-end-date .js-wpt-date-clear').show();
        }
    }
  });

Another thing I noticed is that once I set the field NOT to be required, and the post gets published, the dates are actually not saved with the post. It makes me think that somehow we change the date variables in a way that CRED doesn't understand them anymore...
=> You can use CRED hook 'cred_before_save_data' OR 'cred_save_data' to manipulate fields value. You will get all the information in $_POST variable and then you should assign it to your respective value.
=> https://toolset.com/documentation/user-guides/cred-api/#cbsd
=> https://toolset.com/documentation/user-guides/cred-api/#csd

***Please note:
You need to convert CRED date field value to unix timestamp, that is you need to use php function strtotime to do that.

More info:
=> hidden link

Have a great weekend!!

#331210

I think the timestamp conversion might be an issue since the validation kicks in instantly when I hit submit so none of the hooks have time to run. Am I right in thinking that the conversion needs to happen on the javascript are of the form?

#331248

I am attempting to run a code in a cred_before_save_data hook. Previously I had debugged the wpcf-event-start-date field before we added the javascript code and got:

Array ( [0] => Array ( [display-only] => September 3, 2015 [datepicker] => 1441238400 [hour] => 0 [minute] => 0 [datetime] => 2015-09-03 [timestamp] => 1441238400 ) )

Thus I tried:

// Convert dates to unix timestamp
add_action('cred_before_save_data', 'convert_date_to_unix_timestamp',10,1);
function convert_date_to_unix_timestamp($form_data)
{
	$_POST['wpcf-event-start-date[display-only]'] = date("F d, Y", strtotime($_POST['wpcf-event-start-date[display-only]']));
	$_POST['wpcf-event-end-date[display-only]'] = date("F d, Y", strtotime($_POST['wpcf-event-end-date[display-only]']))
}

but get 0 as a result when I display the field in my view...

[types field="event-start-date" style="text" format="jS F Y"][/types]