Table of Contents
You have three options for picking date and time; Date picker, Time picker & Date-Time picker.
The most important and flexible feature of these picker fields is, it can contain JSON format codes for customizing the picker fields like its display format, start date, end date, max date, min date, start time, end time, etc.
Common things to remember when you are code using JSON;
The below figure shows an
Disable Manual input: It is a kind of masking and it restricts the user to enter values from the keyboard. They can only select the date from the calendar appearing after clicking on the field.
The date picker view can be restricted with minDate, maxDate, startDate, etc. It allows us to select only the dates within the restriction. So, users can’t go beyond the restricted dates.
You have an option in the edit option of the date field to set Minimum date, Maximum date. The available options are today, yesterday and tomorrow. If you need to set dates other than this please go for the JSON code.
{
"minDate":"+1970-01-01"
}
It will disable all the past dates before today. You can also use the below code to do the same what we did above,
{
"minDate":"0"
}
If you want to disable the dates before tomorrow use +1970-01-02.
You can disable the future dates as well with using maxDate keyword.
{
"maxDate":"+1970-01-01"
}
It will disable all the future dates after today. You can also use the below code to do the same what we did above,
{
"maxDate":"0"
}
The below screenshot shows how to disable sundays and saturdays from the calendar. The numbers used as the index value of these days. 0 for Sunday and 6 for Saturday.
{
"disabledWeekDays":[0,6]
}
The below screenshot shows how it will effect at the front-end.
Like this you can disable any day from the calendar as per your requirement. For that just need to change the index value in the JSON code.
You can also disable some specific dates from the calendar like public holidays, your company holidays, etc. The example screenshot of JSON code below shows how to disable some dates in the
{
"disabledDates":["10.02.2019","14.02.2019","19.02.2019"],
"formatDate":"d.m.Y"
}
The below screenshot shows how the above code effects at the front-end.
Start date deals with the date which the calendar shows at the time the users picking the date from the calendar.
{
"startDate":"+1970-01-01"
}
Value assigns a default value for date/time. And if it once set, will ignore the value that already set.
Format deals in which format you want to show the date/time.
{
"value":"12.03.2013",
"format":"d.m.Y"
}
If the input value is not set, calendar select the defaultDate. This is same for defaultTime as well.
{
"defaultDate":"08.12.1986",
"formatDate":"d.m.Y",
"defaultTime":"33-12",
"formatTime":"i-H"
}
Mask restricts the input other than valid date. It is like a validator, but not in all means.
{
"mask":"9999/19/39",
"format":"Y/m/d"
}
Mask restricts the input other than valid time.
It is like a validator, but not by all means.
{
"mask":true,
"format":"H:i"
}
The default time field step is 5 seconds.
But you can change it as you like. For example,
{
"step":2;
}
We have introduced using WordPress Shortcodes in the JSON Configuration area for customizing Date, Time and Date-Time fields. For using it, you need to define the shortcode in the functions.php file of your active theme folder. For example,
add_shortcode('wcpa_date_json', 'wcpa_date_json');
function wcpa_date_json($atts, $content = null)
{
$date_1 = new DateTime('next Monday');
$date_2 = new DateTime('next Monday');
$date_2->modify("next Sunday");
$json = '{
"minDate":"' . $date_1->format('Y-m-d') . '",
"maxDate":"' . $date_2->format('Y-m-d') . '"
}';
return $json;
}
This code will define a shortcode named wcpa_date_json. Now you can use it in the configuration text box as [wcpa_date_json].
The above code will disable all the dates except next week. You can refer it as an example to add shortcodes as per your requirements.
If you have questions about our plugin(s), are experiencing issues with any of our plugin