Adding Date Picker in WooCommerce Checkout Page

This article explains the steps to add a Date Picker in WooCommerce Checkout page by correctly configuring WooCommerce Checkout Field Editor plugin.

Using this plugin you can customize WooCommerce checkout fields. In this article we will focus on adding a custom Date Picker. You can learn more about the plugin and purchase it from here. For installation of the plugin please follow this article

OnceWooCommerce Checkout Field Editor is installed, you can access plugin settings page via WooCommerce > Checkout Form. Always click on the ‘Save Changes’ button to save your changes.

Add New Date Picker Field

To add a new Date Picker field, first go to one of the section(billing, shipping, additional) where you want to add the field, and then click the ‘Add Field’ button.

It will open a popup form where you need to select Date Picker from the Field Type select box. Fill the name for the field and other properties in the form and click on ‘Add New Field’ button. Finally click on the ‘Save Changes’ button so that the new changes take effect.

Date Picker Field Properties

• Name: The name property specifies the unique name of the field, which is used as the meta key to save value internally in database. This will NOT be displayed on checkout page. Name must be unique. eg ‘lead_source’
• Type: This is the property that allows you to choose the type of the field that need to be added. Select Date picker. It will add a text field with a JavaScript date picker attached to the Checkout form.
• Label: Label is the display name for the input field which will be shown on the checkout page. This will also be displayed on the Email, Thank You Page, Order Details Page etc.
• Default Value: You can assign a default value for the field by providing the value here. This value will be shown as the default value when the checkout form is loaded.
• Placeholder: The placeholder property is a short hint (a sample value or a short description of the expected format) that describes the expected value of an input field.
• CSS Class: In case you want the input field to be styled differently, you can add a css class for the field. You may need to define the styles for this class in your stylesheet.
• Label Class: Similarly, in case you need the Label to be styled separately you may define the CSS class name here.
• Validations: Choose validation rules that should be applied to the input field. You can define your own validation rules in the Advanced Settings section. Any validation rule defined in Advanced Settings section will appear in the select box.
• Price: In case you need to increase or decrease the cart total based on the user input in the checkout page you can do so using this field. Provide a negative value if you want to give discount.
• Price Type: You can set the price type as ‘Normal’ which means the set price just get added to the total or ‘Percentage’ where in the specified percentage of the cart total gets added to the total.
• Max. Length: The maxlength property specifies the maximum number of characters allowed in the <input> element. You can leave this blank.
• Required: If you select this option the field will be shown as a required field in checkout page. If a value is not entered or selected for this field a warning will be displayed.
• Clear Row: This property is useful to align fields left and right on the same row. Selecting ‘Clear Row’ stops a field being shown on the same row as the previous field. Field will be forced to display on the next row.
• Enabled: By default this property will be selected and field will be enabled. If you want to disable the field you need to deselect this. A disabled field will not be displayed on the checkout page. It will kept in the field list on the admin side in case you need to enable it again in the future. Use remove button if you want to remove a field permanently.
• Display in Emails: If this property is selected, the field and its value will be displayed in Order Confirmation email (customer copy) and Thank You mail.
• Display in Order Detail Pages: This property can be used to display your custom field and its value in Order Confirmation page (Thank You page) and Order Details page (Admin page).
• Order Meta Data: This property can be used to save your custom field and its value as part of order data (saved in order meta table), so that this field value will be specific to each order.
• User Meta Data: This property can be used to save your custom field and its value as part of user data (saved in user meta table), so that the custom field will available in user profile page and user can edit the value from there.
• Date Format: Define the date format accepted for this field. Available options are: dd/mm/yy.
• Default Date: Set default date to be displayed. Specify the date in the format specified in Date Format property. You may also specify the number of days to be offset from today (e.g. +7) or a string of values and periods (‘y’ for years, ‘m’ for months, ‘w’ for weeks, ‘d’ for days, e.g. ‘+1m +7d’), or leave empty if you don’t want to set a minimum limit.
• Min. Date: The date picker calendar will only show dates starting from the date set in this field. Specify the date in the format specified in Date Format property. You may also specify the number of days to be offset from today (e.g. -7) or a string of values and periods (‘y’ for years, ‘m’ for months, ‘w’ for weeks, ‘d’ for days, e.g. ‘-1m -7d’), or leave empty for today.
• Max. Date: The calendar will only show dates up to the date set in this field. Specify the date in the format specified in Date Format property. You may also specify the number of days from today (e.g. +7) or a string of values and periods (‘y’ for years, ‘m’ for months, ‘w’ for weeks, ‘d’ for days, e.g. ‘+1m +7d’), or leave empty if you don’t want to set a maximum limit.
• Year Range: This is defines the range of years displayed in the year drop-down of the date picker calendar. The format is “from year: to year”. You can set the range in different ways as explained belowRelative to current year(‘-nn:+nn’): e.g. -5:+3 . If the current year is 2016, the dropdown will show years from 2011 till 2019.Relative to the currently selected year(‘c-nn:c+nn’): e.g. c-5:c+3. If the year of the selected date is 2017, the dropdown will show years from 2012 till 2020Absolute values(‘nnnn:nnnn’): e.g. 1900:2018. The dropdown will show years from 1900 till 2018Combinations of above formats(‘nnnn:+nn’,’-nn:c+nn’,etc.. ): e.g. 2012:+3. The dropdown will show years from 2012 till 2019 if the current year is 2016. eg -5:c+3. The dropdown will show years from 2011 till 2020 if the current year is 2016 and selected date is in the year 2017.Note that this option only affects what appears in the year drop-down on the calendar popup. To restrict which dates may be selected from the calendar, use the Min. Date and/or Max. Date properties.
• Number Of Months: The number of months to show at once on the date picker calendar.
• Disabled Days: Select the days of the week that need to be disabled on the calendar. For example, you way want to disable Saturdays and Sundays on the calendar.
• Disabled Dates: Enter dates that need to be disabled on the calendar in yyyy-mm-dd format separated by commas for multiple dates. This is useful if you want to disable specific days such as holidays. Ensure the dates are provided in the correct format. If you want to disable 17th January 2017 and 23rd March 2017 in the date picker you can fill this field with the value 2017–01–17,2017–03–23

Once you configure the Date Picker field you will see the field in WooCommerce checkout page as shown below

How To Disable Specific Days In Date-Picker

You can disable specific days from the calendar using Disabled Days option in the field settings form. Choose the days that need to be disabled on the calendar from the Disabled Days multi-select drop-down. This is useful if you want to disable specific days such as Saturdays and Sundays. For example, if you want to disable Saturdays and Sundays in the date picker you can choose these days from the drop-down options.

How To Disable Specific Dates In Date-Picker

You can disable specific dates from the calendar using “Disabled Dates” option in the field settings form. Enter dates that need to be disabled on the calendar in yyyy-mm-dd format separated by commas for multiple dates. This is useful if you want to disable specific days such as holidays. Ensure the dates are provided in the correct format. For example, if you want to disable 3rd March 2017(Mother’s Day) and 25th December 2017(Christmas Day) in the date picker you can fill this field with the value 2017–03–03,2017–12–25.