Date Picker

A step-by-step guide to adding and configuring the date picker option

With the date picker option, you can let the customers pick a date. It can fulfill various needs: customers can choose the date they want the product delivered, see available dates ahead, or add dates to the product.

Here’s the step-by-step guide to add this option to your store:

Step 1: Go To The Add Options

You can add the date picker option to either a completely new option set or an existing one. You can learn to create a new option set in another part. For now, we will discuss how to add the date picker option to an existing option set.

• Go to an existing option set.

• Click the Edit option to open it.

• Click the “Add option” button.

• Select the “Date Picker” option under Input

Step 2: Configure the Date Picker Option 

After adding the Date Picker option, configure the available settings according to how you want customers to select a date for the product. 

1. Option Title: Enter the name or label of the date picker option that customers will see.

2. Help Text: Add additional instructions or guidance to help customers understand which date they should select.

3. Required Field: Enable this option if customers must select a date before they can add the product to their cart. When enabled, customers cannot proceed without selecting a date.

4. Option Description: Add additional information or details about the date picker option. This can be used to explain the purpose of the field or provide extra instructions to customers.

5. Date Format: Select the format in which the date will be displayed and entered by customers, such as MM/DD/YYYY.

6. Add Price: Set an additional fixed price that will be added when the customer selects a date. The extra charge applies when a date is selected.

7. Minimum Date: Set the earliest date that customers are allowed to select.

Customers will not be able to select a date before the specified minimum date. Select None if you do not want to set a minimum date.

8. Maximum Date: Set the latest date that customers are allowed to select.

Customers will not be able to select a date after the specified maximum date. Select None if you do not want to set a maximum date.

Step 3: Personalize The Appearance

After configuring the main Date Picker settings, use the Additional Settings section to customize the appearance and behavior of the option. 

1. Title Color: Choose the color of the option title displayed to customers.

2. Placeholder Color: Choose the color of the placeholder text displayed inside the input field.

3. Description Color: Choose the color of the option description text.

4. Border Color: Choose the color of the border around the date picker input field.

5. Focus Border Color: Choose the color of the border displayed when the date picker field is selected or focused.

6. Border Radius: Set the roundness of the corners of the date picker input field. A higher value creates more rounded corners.

7. Border Thickness: Set the thickness of the border around the date picker input field.

8. Selected Day Text: Choose the text color used for the selected date in the date-picker calendar.

9. Today Marker: Choose the color used to indicate the current day in the date-picker calendar.

10. Border Radius (px): Set the corner roundness of the date-picker calendar. A higher value creates more rounded calendar corners.

11. Show Price on Option Values: Enable this option to display the price associated with the option value to customers.

Save, Discard, and Delete

When editing an option, you can use Save, Discard, or Delete to manage your changes and the option.

1. Save: Click Save to save all changes made to the option.

2. Discard: Click Discard to cancel all unsaved changes and return to the last saved version.

3. Delete: Click Delete to remove the option from the option set.

Apply Option set to options

You can find the “Product Assignment” option at the bottom of every option set, from where you can apply the option set to any one of the three product categories.

To Assign an Option Set

1. Open the Option Set.

2. Scroll down to Product Assignment.

3. Select one of the available assignment methods.

• All Products: Select All Products to apply the Option Set to all products in your store.

• Manually Select Products: Select Manually Select Products when you want to choose specific products to which the Option Set should be applied.

• Select Products with Conditions: Select Select Products with Conditions when you want to apply the Option Set based on specific product conditions automatically.

You can use the available conditions to determine which products should receive the Option Set.

Once the Date Picker option is configured, the Option Set is active, and the Option Set has been assigned to the appropriate products, customers can select a date directly on your product pages. 

Need Help?

If you have any questions or need assistance, We will be happy to help.

• Live Chat for quick assistance.

• Submit a Support Ticket for detailed questions or issues.

• Email: support@optionia.com