Date

Allow customers to select dates using an interactive date picker calendar.

Overview

Date is an input option type that provides a date picker interface for customers to select dates easily. It displays a calendar popup and ensures proper date format.

Use Date for:

• Delivery or pickup dates
• Event dates
• Reservation scheduling
• Special occasion dates
• Deadline specifications

Key characteristics:

• Interactive calendar date picker
• Can be marked as required
• Supports placeholder text
• Proper date format validation
• Mobile-friendly calendar interface

Configuration

Basic Settings

Setting	Description
Label	Option name displayed to customers (e.g., "Delivery Date")
Option is required for this option set	If enabled, customers must select a date before adding to cart
Hide Label from storefront	If enabled, only the date picker is shown (label is hidden)

Advanced Settings

Setting	Description
Internal Label	Admin-only identifier (replaces label in options list)
Help Text	Additional guidance shown to customers (based on display mode)
Placeholder	Gray text shown inside empty date field (e.g., "Select a date")

How to Add Date

1. Navigate to Option Sets and open your option set
2. Click Add Option
3. Select Date from the Option Type modal
4. Enter a Label (e.g., "Preferred Delivery Date")
5. Check Option is required if date selection is mandatory
6. (Optional) Click Advanced Settings to add Placeholder or Help Text
7. Click Save in the contextual save bar

Use Cases

Delivery Date

Label: Preferred Delivery Date Required: Yes Placeholder: Select delivery date Help Text: Choose your preferred delivery date. We deliver Monday-Friday.

Result: Required date picker for delivery scheduling

Event Date

Label: Event Date Required: Yes Placeholder: MM/DD/YYYY Help Text: When is your event? We need at least 2 weeks notice.

Result: Required date selection for event planning

Pickup Appointment

Label: Pickup Date Required: No Placeholder: Choose pickup date Help Text: Optional: Schedule a pickup time for your order

Result: Optional date picker for pickup scheduling

Special Occasion

Label: Occasion Date Required: No Placeholder: Select date Internal Label: Customer Occasion Date Help Text: Birthday, anniversary, or other special date

Result: Optional date field for special occasions

Deadline Specification

Label: Required By Date Required: Yes Placeholder: Select deadline Help Text: When do you need this order completed?

Result: Required date picker for project deadlines

Customer Experience

Date picker interface:

1. Customer clicks on the date field
2. Calendar popup opens
3. Customer navigates to desired month/year
4. Customer clicks on specific date
5. Selected date displays in field
6. Customer can change date by clicking field again

Date selection:

• Visual calendar for easy selection
• Month/year navigation
• Today's date highlighted
• Selected date clearly indicated
• Proper date format display

Styling

Date picker inherits styling from your theme and customization settings:

• Colors: Picker border, button, and calendar colors from Colors
• Border: Picker border thickness from Borders & Shapes
• Radius: Picker corner radius from Borders & Shapes
• Spacing: Option spacing between fields from Borders & Shapes

Best Practices

Provide date guidance:

• Use Help Text to specify date constraints
• Mention lead time requirements (e.g., "2 weeks notice")
• Note blackout dates or unavailable days
• Explain how the date will be used

Set appropriate requirements:

• Required for delivery or event scheduling
• Optional for flexible timing or preferences
• Test date selection flow
• Ensure validation works correctly

Consider date constraints:

• Mention minimum advance notice needed
• Note business days vs calendar days
• Specify date ranges if applicable
• Explain any date restrictions

Use clear labeling:

• Specific labels: "Delivery Date" vs generic "Date"
• Explain what the date represents
• Match label to purpose
• Include context if needed

Mobile optimization:

• Date picker works on mobile devices
• Touch-friendly calendar interface
• Test on actual mobile devices
• Verify date input displays correctly

Handle date formats:

• Display dates in familiar format (MM/DD/YYYY or DD/MM/YYYY)
• Match local conventions
• Show format in placeholder
• Ensure clarity across regions

Related

• Number - Numeric input
• Short Text - Single-line text input
• Internal Label - Admin-only identification
• Help Text - Additional context display
• Placeholder - Input field placeholder text
• Required Fields - Making options required