Disable Past dates (shortcode +3d) not working
-
Hi,
I want the date calendar to allow users to pick the date 3 days from the current date.
Documentation shows to enter a date or use shortcode +3d to achieve the same. But it does not work. I have disabled Jquery date-picker as it give me error.
Please see the screenshot here
Also tried updating the plugin to latest version. I do not want to purchase the PRO until I get a confirmation that this can be fixed in the PRO version.
Could you please confirm. Happy to purchase the PRO version if it helps.
Thanks
-
This topic was modified 5 years, 10 months ago by
limedigital.
-
This topic was modified 5 years, 10 months ago by
limedigital.
The page I need help with: [log in to see the link]
-
This topic was modified 5 years, 10 months ago by
-
The date field isn’t a PRO field and it won’t matter if you get PRO.
The shortcode (+3d) only works for the jQuery datepicker. It doesn’t work with the HTML5 date field. HTML5 date fields can only be set to a “min” (earliest possible date) with a valid date string (e.g. 2020-08-10).
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
If the value of the min attribute isn’t a possible date string in the format yyyy-mm-dd, then the element has no minimum date value.The only way to set a min date on an HTML5 date field with PPOM right now would be to add some custom JavaScript to update the date fields on page load.
Something like this:
<script type="text/javascript"> var dateControl = document.querySelector('input[type="date"]'); let current_datetime = new Date(); let formatted_date = current_datetime.getFullYear() + "-" + (current_datetime.getMonth() + 1) + "-" + current_datetime.getDate(); minDate.setDate(formatted_date.getDate()+3); dateControl.setAttribute("min",minDate); </script>I haven’t tested this but it should work. To make it more element specific, you could use
document.getElementById('input_data_name')instead of querySelector to target individual date fields.An alternate solution is to modify two PPOM plugin core files:
inc/hooks.php (function ppom_hooks_input_args())
inc/nmInput.class.php (function Regular())Add this to function ppom_hooks_input_args() in inc/hooks.php at line 436 just after the if statement for jquery_dp:
else { // html5 date input if (isset($field_meta['past_dates'])) { $past_dates = $field_meta['past_dates']; if (strpos($past_dates, "+") > -1) { $increment_number = preg_replace("/[^0-9]/",'',$past_dates); $past_dates_format = preg_replace("/[0-9]+/",'',$past_dates); $increment_direction = substr($past_dates_format,0,1); $increment_step = substr($past_dates_format,1,1); $increment_suffix = ''; switch ($increment_step) { case "d": $increment_suffix = ($increment_number > 1) ? "days" : "day"; break; case "w": $increment_suffix = ($increment_number > 1) ? "weeks" : "week"; break; case "m": $increment_suffix = ($increment_number > 1) ? "months" : "month"; break; case "y": $increment_suffix = ($increment_number > 1) ? "years" : "year"; break; } if ($increment_number > 0) { $field_setting['min'] = date("Y-m-d", strtotime( $increment_direction.$increment_number.' '.$increment_suffix)); } else { $field_setting['min'] = date("Y-m-d"); } } } if (isset($field_meta['year_range'])) { $yrParts = explode(":", $field_meta['year_range']); if (isset($yrParts[1])) { $endYear = $yrParts[1]; if (strpos($yrParts[1], "c+") > -1 && strlen($yrParts[1]) > 2) { $yrAddParts = explode("+", $endYear); $eySuffix = ($yrAddParts[1] > 1) ? "years" : "year"; $endYear = date("Y-m-d", strtotime('+'.$yrAddParts[1] . ' '.$eySuffix)); } $field_setting['max'] = $endYear; } else { $field_setting['max'] = $field_meta['year_range']; } } }Add this to public function Regular() in inc/nmInput.class.php at line 183 between the
$type=="number"anduse_regexif statements:// Adding min/max for date input if ($type == 'date') { $html .= 'min="' . esc_attr($num_min) . '" '; $html .= 'max="' . esc_attr($num_max) . '" '; }Of course any changes in the PPOM plugin core files will be erased when a new version is released unless @nmedia decides it’s a good idea to add what I’ve provided here.
I tested the JavaScript and found it didn’t work. Here’s an updated script if you decide to go with the JavaScript route:
<script type="text/javascript"> var dateControl = document.querySelector('input[type="date"]'); let current_datetime = new Date(); let minDateMonth = current_datetime.getMonth() + 1; if (minDateMonth < 10) { minDateMonth = "0"+minDateMonth; } let minDate = current_datetime.getFullYear() + "-" + minDateMonth + "-" + (current_datetime.getDate() + 3); dateControl.setAttribute("min",minDate); </script>Hi @brozra,
thanks for the update.
Hi @brozra,
Thanks for the detailed explanation. I have decided to take the Javascript method to tackle this issue.
Its works perfectly. Thanks a ton.
Just a last query, can we tweak this script to disable sundays only? And both saturday and sunday in the calendar? And set date format to dd/mm/YYYY.
I tried changing the script, but no luck! Would be glad if you could assist me here please. My working script is as below:
Once again thank you so much for your time. I was stuck with this for a week now.
<script type="text/javascript"> var dateControl = document.getElementById('date_required'); let current_datetime = new Date(); let minDateMonth = current_datetime.getMonth() + 1; if (minDateMonth < 10) { minDateMonth = "0"+minDateMonth; } let minDate = current_datetime.getFullYear() + "-" + minDateMonth + "-" + (current_datetime.getDate() + 3); dateControl.setAttribute("min",minDate); </script>Link to the working calendar is here.
-
This reply was modified 5 years, 10 months ago by
limedigital.
-
This reply was modified 5 years, 10 months ago by
limedigital.
-
This reply was modified 5 years, 10 months ago by
limedigital.
-
This reply was modified 5 years, 10 months ago by
limedigital.
-
This reply was modified 5 years, 10 months ago by
limedigital.
-
This reply was modified 5 years, 10 months ago by
limedigital.
Unfortunately there is no way to disable particular days, more specifically weekends, for an HTML5 date field. The only available controlling attributes are “min”, “max” and “step”. “min” is the earliest available date and “max” is the latest available date. “step” only affects the spinner for selecting the next date.
The date display is set to ISO standard (YYYY-mm-dd) and can’t be changed.
From mozilla.org:
The displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user’s browser, but the parsed value is always formatted yyyy-mm-dd.You’re welcome. If you want to be able to disable weekends, try figuring out why the jQuery datepicker isn’t working. More than likely it is a problem with your theme or a JavaScript conflict / error.
-
This reply was modified 5 years, 10 months ago by
The topic ‘Disable Past dates (shortcode +3d) not working’ is closed to new replies.