Skip Navigation

[Resolved] I need a form's date pickers to only allow dates in ranges that I want to show

This support ticket is created 5 years, 6 months ago. 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.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9: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/Hong_Kong (GMT+08:00)

This topic contains 1 reply, has 2 voices.

Last updated by Luo Yang 5 years, 6 months ago.

Assisted by: Luo Yang.

Author
Posts
#1237423

Hey guys,

Ok so i am trying to change my date inputs in Toolset form to allow date selections only on dates that are available, There is a hook that generates a list of unavailable dates for me...

It looks like the date generation is working correctly, butwhen I submit, it keeps telling me that the 2 date fields are empty even though dates are selected...

I would love some assistance, The hook code is as follows 🙂

<?php

toolset_snippet_security_check() or die( 'Direct access is not allowed' );

add_shortcode( 'item_available_from', function( $atts ){
global $post;
global $wpdb;

$postid = (isset($atts['equipment_id']) ? $atts['equipment_id'] : $post->ID);
$date_ranges = [];

$child_posts = toolset_get_related_posts($postid, 'equipment-booking-request', array( 'query_by_role' => 'parent', 'return' => 'post_object' ) );

foreach($child_posts as $post){
$post_data = (array) get_post_meta( $post->ID);
if($post_data['wpcf-booking-status'][0]=="Approved" || $post_data['wpcf-booking-status'][0]=="Pending"){
$date_ranges[] = [
'start_date' => $post_data['wpcf-starting-date'][0],
'end_date' => $post_data['wpcf-end-date'][0],
];
}
}

$date = '';
$date_plus = 0;

while($date==''){
$date_plus++;
$found = false;
foreach($date_ranges as $date_range){
if((time() + (86400*$date_plus)>=$date_range['start_date']) && (time() + (86400*$date_plus)<=$date_range['end_date'])){
$found = true;
break;
}
}
if($found == false) $date = date("Y-m-d", time() + (86400*$date_plus));
}

$disabled_dates = [];
$disabled_dates_string = [];
foreach($date_ranges as $date_range){
$current = $date_range['start_date'];
while($current<$date_range['end_date']){
$cur_date = date('j-n-Y', $current);
if(!in_array($cur_date, $disabled_dates)) $disabled_dates[] = $cur_date;
$current+=86400;
}
}

$disabled_dates_string = '[';
foreach($disabled_dates as $key => $date_item){
$disabled_dates_string .= ($key>0 ? ',"'.$date_item.'"' : '"'.$date_item.'"');
}
$disabled_dates_string.= ']';

echo "<script>
function get_available_dates(date) {
var unavailableDates = ".json_encode($disabled_dates).";
dmy = date.getDate() + \"-\" + (date.getMonth()+1) + \"-\" + date.getFullYear();
if (jQuery.inArray(dmy, unavailableDates) < 0) {
return [true, 'available'];
} else {
return [false, 'unavailable'];
}
}

jQuery(document).on('cred_form_ready', function() {
jQuery('.js-wpt-date[name^=\"wpcf-end-date\"]').datepicker('option', 'minDate', 0);
jQuery('.js-wpt-date[name^=\"wpcf-starting-date\"]').datepicker('option', 'minDate', 0);

jQuery('.js-wpt-date[name^=\"wpcf-end-date\"]').datepicker( 'option', 'beforeShowDay', get_available_dates);
jQuery('.js-wpt-date[name^=\"wpcf-starting-date\"]').datepicker( 'option', 'beforeShowDay', get_available_dates);
});
</script>";

echo "<script>
jQuery(document).on('cred_form_ready', function() {
var unavailableDates = ".json_encode($disabled_dates).";

jQuery('.js-wpt-date[name^=\"wpcf-end-date\"]').datepicker({
minDate: 0,
beforeShowDay: function(date) {
dmy = date.getDate() + \"-\" + (date.getMonth()+1) + \"-\" + date.getFullYear();
if (jQuery.inArray(dmy, unavailableDates) < 0) {
return [true, 'available'];
} else {
return [false, 'unavailable'];
}
}
});

jQuery('.js-wpt-date[name^=\"wpcf-starting-date\"]').datepicker({
minDate: 0,
beforeShowDay: function(date) {
dmy = date.getDate() + \"-\" + (date.getMonth()+1) + \"-\" + date.getFullYear();
if (jQuery.inArray(dmy, unavailableDates) < 0) {
return [true, 'available'];
} else {
return [false, 'unavailable'];
}
}
});
});</script>";

return $date;

});

#1237493
datepicker.JPG

Hello,

This is a custom JS codes problem.

I assume we are talking about this page:
hidden link

Please check the source HTML code, after each jQuery datepicker , there is a hidden field, for example:

<input ... name="wpcf-starting-date[datepicker]" ...>

After user pick a date in jQuery datepicker instance, you will need to update above hidden field value(timestamp) format. see screenshot:
datepicker.JPG