Skip Navigation

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

This support ticket is created Il y a 4 années et 12 mois. 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
- 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 réponse, has 2 voix.

Last updated by Luo Yang Il y a 4 années et 12 mois.

Assisted by: Luo Yang.

Auteur
Publications
#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

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