Date,Time & Customizations

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 code must be enclosed within Curly Braces.
• The attributes must be like, attribute: value pairs and separated by colons.
• The attributes and values must be enclosed in Double Quotes except for boolean values like true and false.
• If the code contains more than one attributes, then each of them must be separated by Commas except for the last.

The below figure shows an example how to code in JSON format.

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.

Examples

1.Restricting Dates

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.

Disabling past 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.

Disabling future dates

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"
}

Disabling specific weekdays

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.

Disabling specific dates

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 calender. It also changes the date format(date.month.year).

{
"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.

2.Setting startDate

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"
}

3.Setting value and format

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"
}

4.Setting defaultDate and defaultTime

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"
}

5. Date masking

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"
}

6. Time masking

Mask restricts the input other than valid time.
It is like a validator, but not by all means.

{
"mask":true,
"format":"H:i"
}

7. Changing the step Time

The default time field step is 5 seconds.
But you can change it as you like. For example,

{
"step":2;
}

Short Code for Date & Time Customizations

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.