Date Picker

Date Picker Field for Product & Variation

This field type is used to create a Date Picker input. It used to collect Date option from the user. Date Picker field for Products and Date Picker field for Variations has same properties.

Date Picker Field Configurations for Product & Variation

Option	Description
Placeholder	Placeholder attribute’s value for this datepicker field.
Readonly	Make this datepicker readonly, to prevent pulling up keyboard when touching this control on mobile.
Show Time Picker	Display the Time Picker (User can choose Hours & Minutes) along with the Date Picker
Allowed Hours & Minutes	Maximum & Minimum threshold for Hour & Minutes that user can select
Localize Datepicker	Choose the language in which the date picker should display the labels (Days name, month name …), default option is en-US
Month & Year Dropdown	Choose this option to display the month and year in dropdown box instead the standard prev next navigation, this will comes handy if the year range is long.
Year Range	The year range that are available to choose, by default it is -10:+10, that means the datepicker will display 20 year range 10 year minus from the current year and 10 year plus from the current.
Date Format	Specify your custom date format string, by default it would be this ‘dd-mm-yy’
Disable Days	Use these options to prevent user from selecting some dates. you can set more than one option for the same field, the result will be intersection of all options combined. Past or Future : Disable past or future dates, by default all dates are enabled. Days : Disable one or more weekly days (like disable all Mondays, Tuesdays …). Specific Dates : Disable one or more particular dates (Whole date) the date string fromat must be in ‘MM-DD-YYYY’, delimite with comma for more than date. Weekends Or Weekdays : Disable all weekends or weekdays. Specific Dates All Months : Disable dates on monthly basis, eg. disable the date 5th on all months, delimite with comma for more than date Allow X Years : Allow only X (could be any positive number) future years (current year always enabled). Allow X Months : Allow only X (could be any positive number) future months (current month always enabled). Allow X Weeks : Allow only X (could be any positive number) future weeks (current week always enabled). Allow X Days : Allow only X (could be any positive number) future days (current day always enabled). Disable Next X Days : Always disable only next X days from the current date
Required	Make this Datepicker field mandatory – user cannot perform Add To Cart operation without choosing any date.
Message	Message that has to be displayed when validation failed for this datepicker field (When the Required Option is Set).
Visibility	Whether this date value (Chosen by the user) has to be displayed on the Cart & Checkout Page. Note: Regardless of this option this fields value will be added as Order Meta (Unless you configured not so).
Order Item Meta	Whether to add this field’s value (Chosen by the user) as Order Item Meta.
Send to Customer	Whether to show this field to customer’s order email and customer’s order view (in the My Account page). Even though it is added as Order Item Meta, but visible only to store admin only.
Logged in Users Only	Make this field available only for the Registered Users only (They must have to be logged in).
Target Roles	Make this field available only for the users that have the selected roles. Available to all, if you haven’t selected any
Editable	Make this field’s value editable on Cart Page – (incase If user has chosen the wrong date, he can correct it on the cart page itself, no need to go back to product page). Note: this is only for the Cart page not for the Checkout Page.
Cloneable	Exclude this field from cloning (Works only if Cloning option is enabled from the Settings Page).
Field Class	Use this option to add a custom css class to this field for your own styling purpose (not much use since the input field itself in hidden state).
Onload	This option controls the fields visibility when the product is loaded. By default `Yes`

Note : If you are going to use Date based Pricing & Fee rules for Cart Line Item Pricing adjustment, then Set your DatePicker’s date format to the PHP compatible, so that it can parse the date properly.

Refer : this and this for detailed explanation for PHP date format.

Product Field’s Raw Output

<table class="wccpf_fields_table ">
	<tbody>
		<tr>
			<!-- Label section starts here -->
			<td class="wccpf_label">
				<label for="test_date_field">Test Select Field</label>
			</td>
			<!-- Label section ends here -->
						
			<td class="wccpf_value">
				<!-- Actual field starts here -->
				<input type="text" name="test_date_field" class="wccpf-field wccpf-datepicker" value="" wccpf-type="text" wccpf-pattern="mandatory" wccpf-mandatory="no" data-cloneable="yes">
				<!-- Actual field ends here -->
				
				<!-- Validation message section -->
				<span class="wccpf-validation-message">This field can't be left un chosen</span>
			</td>			
		</tr>
	</tbody>
</table>

Date Picker Field for Admin

Date Picker field can be added for woocommerce admin products, variations & product categories. To give store admin, the ability to add more configurations for the product. This fields can also be enabled to show on front end product page as well. The value can be retrieved like any other post meta, using get_post_meta() function.

Date Picker Field Configurations for Admin

Date Picker Field for Admin has all the properties as Product & Variation except Onload property which is specifically for Field Rules functionality. besides that Date Picker Field for Admin has some additional properties.

Option	Description
Show on Product Page	Show this field on Front end Product page as well.
Value or Field	Show the value that is chosen on this Admin Field instead as the Field itself. Whatever the option, Store Admin chosen for this field on the back end will be displayed on the Front end Product Page.
Tips	Whether to show the tip icon in the back end.
Description	Tool-tip message, when admin user click on the Tips Icon.

Admin Field’s Raw Output

<p class="form-field test_admin_select_field">
    <!-- Label for the Select field -->
    <label for="test_admin_date">Test Admin Datepicker</label>
	
    <!-- Actual field starts here -->
    <input type="text" name="test_admin_date" class="wccaf-field wccaf-datepicker" value="" wccaf-type="text" wccaf-pattern="mandatory" wccaf-mandatory="no">
    <!-- Actual field ends here -->
	
    <!-- Validation message section -->
    <span class="wccaf-validation-message">This field can't be left un chosen</span>
</p>

Admin Field’s Raw Output (on Product Category Create Form)

<div class="form-field">
    <!-- Label for the Radio Button Group -->
    <label for="test_admin_date">Test Admin Datepicker</label>
     
    <!-- Actual field starts here -->
    <input type="text" name="test_admin_date" class="wccaf-field wccaf-datepicker" value="" wccaf-type="text" wccaf-pattern="mandatory" wccaf-mandatory="no">
    <!-- Actual field ends here -->
     
    <!-- Validation message -->
    <span class="wccaf-validation-message">This field can't be Empty</span>
</div>

Admin Field’s Raw Output (on Product Category Edit Form)

<tr class="form-field">
    <!-- Admin Edit Category field's label starts here -->
    <th scope="row" valign="top">
        <label for="test_admin_date">Test Admin Datepicker</label>
    </th>
    <!-- Admin Edit Category field's label ends here -->
         
    <td>
    <!-- Actual field starts here -->
    <input type="text" name="test_admin_date" class="wccaf-field wccaf-datepicker" value="" wccaf-type="text" wccaf-pattern="mandatory" wccaf-mandatory="no">
    <!-- Actual field ends here -->
         
   <!-- Validation message -->
   <span class="wccaf-validation-message">This field can't be Empty</span>
   </td> 
</tr>

3 Comment(s)

Ashik June 27, 2022

is there any option automated date (For ex. Estimated date)

admin July 3, 2022

Hi, I am not sure about the requirement, can you elaborate a bit more.

Alfonso December 6, 2022

Hi,

Is there a way to display the calendar without click on it? I want to show it by default not by clicking on it, also is there a way to change the datepicker style?.

Thanks.