Disabling dates in datepicker

I hope this is the right place to post.
I currently have this in a .js file to block delivery days. It used to be, I just blocked Sundays and holidays once a year, but now client wants dates blocked on an adhoc basis. The client contacts me, to block to-morrow or the day after etc. and I edit the dates in the line var disableSpecificDays…
What I would really like is a page in backend where the client can input the dates they want blocked and these dates are then magically no longer available in the datepicker calendar.

$(document).ready(function () {
	$('#f_deliveryday').datepicker({
							 minDate: 0,
							 dateFormat : 'dd-mm-yy',
							 maxDate: 6,
		beforeShowDay: disableSpecificDaysAndSundays,


	});
		$('#f_deliveryday').keypress(function(event) {
    return ( ( event.keyCode || event.which ) === 9 ? true : false );
});


var disableSpecificDays = [ "1-31-2020", "2-1-2020", "1-30-2020" ];
function disableSpecificDaysAndSundays(date) {
	var m = date.getMonth();
	var d = date.getDate();
	var y = date.getFullYear();
	for (var i = 0; i < disableSpecificDays.length; i++) {
		if ($.inArray((m + 1) + '-' + d + '-' + y, disableSpecificDays) != -1 || new Date() > date) {
			return [false];
		}
	}
	 var day = date.getDay();
      return [(day > 0), ''];
	}
});

Any help or guidance please.

Moderator edit - use ``` (three backquotes) on a separate line before and after code samples to format them nicely. More info

4 Likes

You would need to write some PHP to make an admin page for the user to input the dates.
https://developer.wordpress.org/reference/functions/add_menu_page/
Then you need to parse the input dates and save them in an option.
https://developer.wordpress.org/reference/functions/update_option/
And when you are outputting the javascript, you would use get_option() and https://developer.wordpress.org/reference/functions/wp_localize_script/
to give the option to your javascript.

You can look at any plugin that has its own option page to see how to put things together.

Edit: I’m not sure why you would choose the dateFormat : ‘dd-mm-yy’ and not match it with your specific days format (which has a 4 digit year) and also compare dates that don’t have the year first. ??

5 Likes

Thank you for the response.
I read your references and see how far I can get over the weekend.

re the date format. Agreed they do not match The code was copied and probably not all from the same place. It does the job and blocks Sundays and specified dates from the calendar in the form. On other code I have looked at the month and date have leading 0s but if I do that it does not work. So code possibly has several errors that cancel each other out.
I’ll get the admin page created and work from there. The code is in the theme at the moment, it might be worth the trouble to move it all to a plugin.

1 Like

A lighter-weight option that I use a lot for specific sites is to move code into a mu-plugin (“must-use plugin”). This is just a PHP file with a path like wp-content/mu-plugins/yourfilename.php. These don’t need activation or a special header but they can do just about everything that a plugin can do. More info

3 Likes

If you are going with the plugin way…
Not sure if i’m wrong but you should register javascript from the plugin, because wp_localize_script needs the script to be already registered (but not enqueued).

3 Likes

Transferring the dates from the admin page to the script is the part I have not got my head around yet. That will probably dictate where everything ends up.

If you had Advanced Custom Fields Pro at the ready, I’d go with the ACF Options method.

Or you create a minimalist “event manager” using a custom post type, eg. delivery_times, set it up as non-public - see the documentation on register_post_type (parameter: public) - and use meta fields to set up “non-delivery dates”.

You may go the hard way and build the meta field stuff manually, or use a plugin like the before-mentioned ACF or any similar alternative. With this approach, the regular version of ACF should already do the trick.

You’d probably need two fields:

  1. Date / time field - eg. event_date
  2. A field to enable or disable this event - eg. event_disable

With ACF, you’d pick the the datepicker field type and the true/false field type. With regular meta fields, it’d be one field which contains the date and time (I’d go for something like date('Y-m-d') format) and another one that by default contains nothing, but if there is any kind of string inside, eg. “1” or “true”, it disables this date. Check in the code is for !empty() - which would disable the event.

I’d keep the sundays disabled as a hard-coded setting, but would them let be re-enabled using the “event manager”, so if your client decides that there is a specific one-time-per-season sunday sale, that’d be easily done.

cu, w0lf.

2 Likes

I will investigate this approach as well. Would this method would be able to do multiple dates?

As one “delivery_time” post is essentially a singular date, that be exactly that.

If you wanted to move further, you could use two fields to enable to pick a time range, and even specificy times instead of just simple dates, eg. a field for the start date and time (format: Y-m-d H:i) and another field for the end date and time.

cu, w0lf.

1 Like

Just my opinion: A custom post type is overkill for this use case.

Storing the dates in an option, then using wp_localize_script and get_option is probably the easiest way to do this.

2 Likes

Don’t know what your client needs that for.
But…
It seems like an hotel reservation calender. There are many plugins able to let you publish a calender in front-end and block dates in the back-end or when people pick them up in the front.
So why writing it all over again? You could see how these plugins are written and take some idea from there.
For example how they deal with the admin menu.
And, also… Bugs compensating one another… This is not a safe code to use imho but you can compare it to a readymade plugin and squash all bugs.

It is a delivery company.
Customers can select date for delivery in datepicker calendar. Delivery dates are restricted to “to-morrow” and following 3 days so it is always changing. When all to-morrow’s, and sometimes the day after slots are full, the client wants to be able to block the date from the calendar. If all the delivery slots are not used up client does not need to do anything.

A different site that uses woo has a plugin extension for this but it only works with woo. I have searched and been unable to find a suitable plugin.
I am open to suggestions.
I do not need a booking system, appointments diary, events tracker etc. I have used these on other sites and none of the ones I tried do what I want.

I see.
I don’t think such a plugin exists as of yet.
Let me just understand however, if woo + extension does a similar job and works for you, why not trying with ClassicCommerce + that woo extension? If it work in woo it “should” work with ClassicCommerce.
I will however look to see if something like you describe exists (strange it does not).

1 Like

The woo installation is on a different site.
On the site in question it is a form that creates the order and also sends cost details to the bank api. So no shopping cart

If you are just seeking something easy but not very user friendly you can do something like this:

  • An options page with just a text area where you can insert dates in a javascript compatible format, one per line, and a hidden nonce field.

Upon saving options:

  • chech the nonce
  • build an array breaking the textarea conten on newline
  • loop through the array and remove elements that don’t match a right date format
  • save the array in a option

When showing calendar:

  • register the script
  • load the option and pass the array to wp_localize_script
  • enqueue the script

Simone thank you for reply although I di not follow all of it.
My thoughts (possibly not worth a lot) were:
Part 1
A page in admin with a “form” consisting of date input fields, max 8, and a submit button
Client can then select individual dates from the calendar one, if needed, in each field.
On submit the “form” saves a string (containing dates) to the database
Part 2
in my .js file the line
‘‘‘ var disableSpecificDays = [ “1-31-2020”, “2-1-2020”, “1-30-2020” ]; ‘‘‘
is replaced by code to pull the previously saved string from the database and make available to the disableSpecificDays function

Maybe it does not need to be in admin and perhaps a form on a page that only logged in users can access
Hope this makes sense

How are you going to do that part?

ah, script cannot communicate directly with the database.

and a form on clients computer would not be able to save to the server

Can a page in admin save a .js file directly

Page in admin (opens or already contains original .js file) lets inputting of dates (form) and then saves the .js file including new dates in correct format. so not “editing” the .js file as in using editor.

You could do this but it is unnecessarily complicated

This is what the wp_localize_script function is for, passing small amounts of data from PHP to JavaScript

1 Like