Introduction

This control builds on the default react-datepicker control to provide some additional functions including support for business-hours enforcement, weekend/holiday blocking, themes, and flexible date/time string formatting back to uStore.

Configuration parameters

style

Type: string

Example:

  "style": "date"

Controls what the picker displays:

• "date" - date picker only.

• "time" - time picker only.

• "datetime" - both date and time picker.

theme

Type: string

Example:

  "theme": "light"

Provides "light" or "dark" theme to better suit your storefront design.

• light - White background with dark text. Blue accent color (#0066cc). Suitable for most storefronts.

• dark - Dark background (#2a2a2a) with light text. Blue accent (#4a9eff). Suitable for dark-themed storefronts.

displayMode

Type: string

Example:

  "displayMode": "click"

• "click" - The calendar opens as a popup when the user clicks the input field. This is the standard behavior.

• "inline" - The calendar is always visible on the page (no input field). Useful when the date selection is the primary action on the page.

dateFormat

Type: string

Example:

  "dateFormat": "dd/MM/yyyy"

This parameter controls how the date/time string will be formatted for uStore. Regardless of the other configuration parameters, this setting determines the date format that will be sent to uStore. Remember that plan logic can also be used to change the format of the date/time string that will appear in the document. For full details of the date string formatting tokens, see Date Format Tokens

minDate

Type: string

Example:

  "minDate": "01/11/2026"

The earliest selectable date. Format must be dd/MM/yyyy. Dates before this date will be greyed out.

maxDate

Type: string

Example:

  "maxDate": "01/06/2027"

The latest selectable date. Format must be dd/MM/yyyy. Dates after this date will be greyed out.

If the parameter is not provided, then all future dates after initialDate are selectable.

disableWeekends

Type: boolean

Example:

  "disableWeekends": true

• true - make weekend dates unselectable (greyed out). This is the default if the parameter is not provided.

• false - make weekend dates selectable.

weekendDays

Type: integer array

Example:

  "weekendDays": [6,0]

Defines which days of the week are considered weekend days. Uses JavaScript day numbering where 0 = Sunday, 1 = Monday, ..., 6 = Saturday.

The default if this parameter is not provided is to assume Saturday/Sunday weekend.

To apply middle-eastern work week (Friday/Saturday weekend), use: "weekendDays":[5,6]

holidays

Type: string array

Example:

  "holidays": ["04/07/2026", "26/11/2026", "01/01/2027"]

List of any specific dates to block (grey out so they are not selectable). Format must be dd/MM/yyyy.

timeFormat

Type: integer

Example:

  "timeFormat": 12

This parameter determins how the time picker will display the time format.

Note that it controls only the user interface's display of time. The format of the time string passed to uStore is controlled by the dateFormat parameter since the control can return only string to uStore. Conveniently, this allows you to display the time to the customer in one format, and pass a different time format to uStore.

minTime

Type: string

Example:

  "minTime": "09:00"

Earliest selectable time of day. Format required: "HH:mm" (24-hour).

Note: minTime is always specified in 24-hour HH:mm format regardless of the timeFormat display setting.

maxTime

Type: string

Example:

  "maxTime": "17:00"

Latest selectable time of day. Format required: "HH:mm" (24-hour).

Note: maxTime is always specified in 24-hour HH:mm format regardless of the timeFormat display setting.

timeInterval

Type: integer

Example:

  "timeInterval": 15

Minutes between each time slot in the time picker drop-down list. Common values: 15, 30, 60.

Note: Time slots that fall outside the minTime/maxTime range or within a lunch break are hidden from the dropdown, not merely greyed out.

disableLunch

Type: boolean

Example:

  "disableLunch": true

• true - block out (hide) time intervals in the time picker during the lunch break window.

• false - show all time intervals between minTime and maxTime. This is the default if the parameter is not provided.

lunchStart

Type: string

Example:

  "lunchStart": "12:30"

Defines the start of the lunch break. Format: HH:mm (24-hour).

Ignored if disableLunch = false.

lunchMinutes

Type: integer

Example:

  "lunchMinutes": 30

During of the lunch break in minutes.

Ignored if disableLunch = false.

---

Date Format Tokens

The dateFormat string uses .NET-style format tokens. This format controls both how the date is displayed to the user and how the value is stored/submitted.

Date Tokens

Token	Output	Example
d	Day of month (no padding)	5
dd	Day of month (zero-padded)	05
ddd	Abbreviated day name	Mon
dddd	Full day name	Monday
M	Month number (no padding)	3
MM	Month number (zero-padded)	03
MMM	Abbreviated month name	Mar
MMMM	Full month name	March
yy	Two-digit year	26
yyyy	Four-digit year	2026

Time Tokens

Token	Output	Example
H	Hour, 24h (no padding)	9
HH	Hour, 24h (zero-padded)	09
h	Hour, 12h (no padding)	2
hh	Hour, 12h (zero-padded)	02
m	Minutes (no padding)	5
mm	Minutes (zero-padded)	05
s	Seconds (no padding)	8
ss	Seconds (zero-padded)	08
f	Tenths of a second	3
ff	Hundredths of a second	30
fff	Milliseconds	300
t	AM/PM (first letter)	A
tt	AM/PM	AM

Special Characters

Character	Purpose	Example
\	Escape the next character as literal	\a\t outputs at
'...'	Literal string	'at' HH:mm outputs at 14:30
Any other	Passed through as-is	/, -, :, spaces are literal separators

Common Format Examples

Format String	Example Output
dd/MM/yyyy	15/06/2026
MM/dd/yyyy	06/15/2026
yyyy-MM-dd	2026-06-15
dd MMM yyyy	15 Jun 2026
dd/MM/yyyy HH:mm	15/06/2026 14:30
MM/dd/yyyy hh:mm tt	06/15/2026 02:30 PM
dddd, MMMM d, yyyy	Monday, June 15, 2026

---

Common Configurations

Date-only picker for delivery scheduling

{
  "style": "date",
  "dateFormat": "dd/MM/yyyy",
  "disableWeekends": true,
  "minDate": "01/06/2026",
  "maxDate": "30/09/2026",
  "holidays": ["04/07/2026", "07/09/2026"]
}

Appointment booking with date and time

{
  "style": "datetime",
  "displayMode":"inline",
  "dateFormat": "dd/MM/yyyy HH:mm",
  "disableWeekends": true,
  "minTime": "08:00",
  "maxTime": "18:00",
  "timeInterval": 30,
  "disableLunch": true,
  "lunchStart": "12:00",
  "lunchMinutes": 60
}

Time-only picker for service selection

{
  "style": "time",
  "dateFormat": "H:mm tt",
  "timeFormat": 12,
  "minTime": "09:00",
  "maxTime": "17:00",
  "timeInterval": 15
}

Always-visible dark-themed calendar

{
  "style": "date",
  "theme": "dark",
  "displayMode": "inline",
  "dateFormat": "yyyy-MM-dd",
  "disableWeekends": false
}

---

Notes

• Date input format: All date values in configuration (minDate, maxDate, holidays, initialDate) must be in dd/MM/yyyy format regardless of the dateFormat display setting.
• Time input format: All time values in configuration (minTime, maxTime, lunchStart) must be in HH:mm 24-hour format regardless of the timeFormat display setting.
• Weekends are disabled by default. Set "disableWeekends": false explicitly if you want all days of the week to be selectable.
• Lunch break is disabled by default. The lunchStart and lunchMinutes values are only used when disableLunch is set to true.
• Filtered time slots are hidden, not greyed out. Users will only see available time slots in the dropdown.
• The submitted value is formatted using the dateFormat string and written back to the uStore form field as a string.

Downloads

Built versions ready to install in uStore Presets:

CustomDatePicker v1

You can download and modify the source code below. To modify and build new versions follow these instructons using the source zip instead of the ng_duc_project_sample.zip:

CustomDatePicker v1 Source code

Tips

• uStore v25.2 or later is required
• If your storefront shows "sorry an error occurred" when viewing a product that uses this Input Control, first check that the configuration JSON is valid by using a tool such as JSONLint
• If you experience other problems, or have suggestions for future versions, you should ask or comment on the XMPie-Users Google Group. Remember that this Input Control is not authored by XMPie, so you will probably not get support for this custom Input Control from XMPie Support.