Product Field
Insert a datepicker field on the product page. Wc Fields Factory uses jQuery UI module to render Date Picker.
| 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. |
| 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 & Check 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. |
| 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). |
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 Raw Output
As you might aware that the below input field will be in hidden state and an actual Date Picker widget will be injected in that place.
<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>
Admin Field
All the above options available for the Admin Field as well, along with those there are some specific options related to only Admin Fields.
| 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 Raw Output (on Product Page)
<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 Raw Output (on Product Category Create Page)
<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 Raw Output (on Product Category Edit Page)
<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>
arif December 21, 2017
Time picker Is not coming up. instead it stops the calender from showing up
Saravana Kumar K February 1, 2018
Can you check your browser console, have any exception and also refer https://wordpress.org/support/topic/datepicker-not-working-after-update-3/
Eric December 15, 2017
Hi,
I have a problem on the plugin, whenever i access the product from the facebook page to shop to product and select. It wont display the dates. Have you caught this issue before?
Please see screenshot below:
Mobile from facebook page: http://prntscr.com/hnz8cl
Desktop directly from the website: http://prntscr.com/hnz8lb
Saravana Kumar K December 17, 2017
No I haven’t.
You mean to say that the DatePicker is working on Desktop Screen but not on Mobile.? or it just happening only when the product is visited from the FB, If try to do the same using Laptop does it still happening.?
sjlocke December 10, 2017
I ended up just modifying the 2 .js and 1 .php that the -10:10 configuration was in. Tx.
sjlocke December 9, 2017
Hi,
The datepicker year range does not seem to be editable. It is the only field in the attributes that isn’t. I’m stuck with -10:+10 and I can’t change it. I need it to go back 30 years.
Any clue?
Saravana Kumar K December 9, 2017
Hi, I have checked now it is editable only, but if you have problem editing that config, then simply delete that date field (This won’t affect your existing orders) and recreate it.
sjlocke December 10, 2017
No, that didn’t help. It is still uneditable.
sjlocke December 10, 2017
And now the date format is uneditable as well.