Date Picker

The Date Picker provides a calendar interface for customers to select delivery dates, special occasions, event dates, or any date-specific information needed for order fulfillment.

desc - Provide a calendar interface for selecting delivery dates and special occasions at checkout.

Description

The Date Picker component provides a calendar interface that allows customers to select specific dates during checkout. This component is essential for businesses that need to schedule deliveries, coordinate events, or collect date-specific information for order fulfillment. The visual calendar interface makes date selection intuitive and error-free compared to free-text date entry.

Sample Use Cases

• Scheduled deliveries: When customers need to choose a delivery date
• Event-based orders: For products tied to specific events (weddings, parties, anniversaries)
• Pre-orders: When products ship on specific future dates
• Appointment scheduling: For services requiring date coordination
• Gift deliveries: When customers want gifts delivered on specific occasions
• Custom orders: Products requiring production time with delivery date selection
• Seasonal products: Items that need harvest/availability date selection

Not Recommended For

• Delivery time selection: Use Dropdown for time slots (morning/afternoon/evening)
• Quantity or count: Use number input or dropdown
• Yes/No questions: Use Checkbox Input
• Predefined date options: Use Dropdown if you have specific dates (not a range)

Display Rules

Supports advanced display rules for conditional rendering. See Display Rules System documentation for details.

Configuration

Buffer Days

• Description: Minimum number of days between today and the earliest selectable date
• Purpose: Ensures adequate time for production, processing, or delivery preparation
• Examples:
  • Buffer: 1 = Customer can select tomorrow (next day) at earliest
  • Buffer: 2 = Can select 2 days from now at earliest
  • Buffer: 7 = Requires 1 week lead time
• Use Cases:
  • Custom products needing production time (3-7 days)
  • Delivery services needing preparation time (1-2 days)
  • Products requiring special sourcing (5-14 days)
  • Processing and shipping time requirements (2-3 days)
• Business Day vs Calendar Day:
  • Typically counts calendar days
  • Combine with weekend disabling for business day buffering
  • Example: 2-day buffer + disable weekends = 2 business days minimum
• Best Practices:
  • Be realistic about your actual fulfillment capacity
  • Communicate buffer in help text
  • Account for holidays and closures
  • Test customer experience - is buffer reasonable?

Disable Weekends

• Description: Prevents customers from selecting Saturdays and Sundays
• Purpose: Aligns with business hours or delivery service availability
• Use Cases:
  • Business closed on weekends
  • Delivery service doesn't operate weekends
  • Staff unavailable for pickup on weekends
  • Production facility closed Saturday/Sunday
• Visual: Weekend dates appear grayed out and unclickable
• Combination: Works with buffer days (buffer counts calendar days, but weekends can't be selected)

Disable Specific Dates

• Description: Manually block specific calendar dates from selection
• Purpose: Account for holidays, closures, or unavailable dates
• Format: List of specific dates (e.g., Dec 25, Jan 1, July 4)
• Use Cases:
  • Major holidays when business is closed
  • Inventory blackout dates
  • Known closures or vacation periods
  • Dates already fully booked
  • Special event dates when regular service unavailable
• Examples:
  • [Dec 24, Dec 25, Dec 26] - Christmas closure
  • [July 4] - Independence Day
  • [Jan 1] - New Year's Day
  • [Aug 15, Aug 16, Aug 17] - Annual inventory closure
• Management:
  • Update regularly to reflect current year
  • Include major holidays relevant to your region
  • Add closures as they're scheduled
  • Remove dates once they pass (for cleaner config)

Disable Date Ranges

• Description: Block entire ranges of dates from selection
• Purpose: Handle extended closures, seasonal unavailability, or bulk date restrictions
• Format: Start date to end date
• Use Cases:
  • Extended holiday closures (Dec 20 - Jan 5)
  • Seasonal unavailability (products only available certain months)
  • Renovation or closure periods
  • Peak season blackouts (too busy to take custom orders)
• Examples:
  • Dec 20 - Jan 5 - Holiday closure
  • June 15 - Aug 15 - Summer closure
  • Nov 20 - Dec 10 - Peak season (no custom orders)
• Combination: Can have multiple date ranges disabled
• Visual: All dates in range appear grayed out

Enable Only Specific Dates

• Description: Inverse of disabling - only allow selection from specific dates
• Purpose: For events with fixed date options or limited availability
• Use Cases:
  • Workshop dates (only specific days offered)
  • Delivery slots that are pre-scheduled
  • Event tickets for specific dates
  • Pre-order windows with specific ship dates
• Example:
  • Enable Only: [March 15, March 22, March 29, April 5] - Weekly workshop dates
• Visual: Only enabled dates are selectable, all others grayed out

Date Range Limits

• Description: Set minimum and/or maximum date boundaries
• Format:
  • Minimum date: Earliest selectable date
  • Maximum date: Latest selectable date
• Purpose: Limit selection to specific timeframe
• Use Cases:
  • Pre-orders within specific month
  • Event bookings within current season
  • Delivery windows (next 30 days only)
  • Historical date limits (not too far in future)
• Examples:
  • Min: Today, Max: +30 days - Delivery within next month only
  • Min: March 1, Max: March 31 - Specific month for pre-orders
  • Min: Today, Max: +90 days - Quarter-ahead bookings
• Combination: Works with other restrictions
  • Can have date range + disable weekends + disable specific dates

Best Practices

1. Set Appropriate Buffer Days

Same-Day/Next-Day: 0-1 days
Standard Shipping: 2-5 days
Custom Orders: 5-14 days
Special Occasions: 7-21 days

Consider:
- Production time
- Shipping duration
- Staff availability
- Quality assurance

2. Communicate Restrictions

✅ Good: "Select delivery date (min. 3 business days)"
❌ Avoid: "Pick a date"

✅ Good: "Delivery available Mon-Fri, excluding holidays"
❌ Avoid: "Choose delivery date"

3. Handle Holidays Proactively

Disable major holidays in advance:
- National holidays
- Company closure dates
- Peak season blackouts
- Fully booked dates

4. Use Help Text

Examples:
"We need at least 3 days to prepare your custom order"
"Delivery not available on weekends or holidays"
"Select the date you'd like this gift delivered"
"Event date for your personalized items"

Storage Options

Selected dates can be stored in:

1. Order Attributes: As formatted date string (e.g., "2024-12-25")
2. Order Notes: Appended as readable text (e.g., "Delivery requested for December 25, 2024")
3. Metafields: As date value for programmatic use

See Input Components Guide for detailed storage information and how to access collected data.

Integration with Display Rules

Show date picker conditionally:

Show When:
- Product is in "Custom Orders" collection
- Cart contains "Personalized" product
- Customer selects "Schedule Delivery"
- "This is a gift" checkbox is checked

Example: Gift Date Picker

1. Checkbox: "This is a gift"
2. Date Picker: "Gift Delivery Date" (shown only when checkbox checked)

Date Format

Dates are displayed and stored in a standardized format:

Display Format: "Month Day, Year" (e.g., "December 25, 2024")
Storage Format: "YYYY-MM-DD" (e.g., "2024-12-25")

Mobile Optimization

Date picker automatically adapts for mobile:

• Native mobile calendar picker on iOS/Android
• Touch-friendly interface
• Optimized for small screens
• Prevents manual text entry errors