Datepicker – Wc Fields Factory

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.
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).

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>

Leave a Reply to arif Cancel reply

Your email address will not be published.

 

9 Comment(s)

  1. arif December 21, 2017

    Time picker Is not coming up. instead it stops the calender from showing up

    1. 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/

  2. 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

    1. 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.?

  3. sjlocke December 10, 2017

    I ended up just modifying the 2 .js and 1 .php that the -10:10 configuration was in. Tx.

  4. 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?

    1. 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.

      1. sjlocke December 10, 2017

        No, that didn’t help. It is still uneditable.

      2. sjlocke December 10, 2017

        And now the date format is uneditable as well.