• Resolved limedigital

    (@limedigital)


    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]

Viewing 8 replies - 1 through 8 (of 8 total)
  • 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" and use_regex if 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.

    • This reply was modified 5 years, 10 months ago by brozra. Reason: code correction
    • This reply was modified 5 years, 10 months ago by brozra. Reason: corrected code

    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.

    Thread Starter limedigital

    (@limedigital)

    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.

    Thread Starter limedigital

    (@limedigital)

    Thanks @brozra.

    You have been a massive help.

    Hope you a great week ahead.

    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.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Disable Past dates (shortcode +3d) not working’ is closed to new replies.