How to set up the Date Picker block

What the Date Picker block does

The block shows a calendar in checkout. Dates you’ve disabled can’t be clicked. When the buyer picks a date, Checkout Ninja saves it to the cart as an attribute or cart metafield, in YYYY-MM-DD format, and the date carries through to the order.

When to use it

• Let buyers choose a delivery or collection date, and disable days you don’t deliver.
• Book a date for a service, such as an installation or an event.
• Enforce a lead time, such as no same-day or next-day orders.

Before you start

• Decide the attribute name for the date, for example delivery_date. The Date Picker doesn’t fall back to a default name, so set one.
• List the dates you can’t serve: weekdays, holidays, closures and lead time.

Set it up

1. In Checkout Ninja, go to Blocks and click Create New Block. Then click Start Fresh, or open an existing block you want to add it to.
2. (Recommended) Click Add block and choose Heading to title the calendar, for example Choose your delivery date.
3. Click Add block and choose Date Picker.
4. Enter a Label. It helps you tell blocks apart in the editor.
5. Under Disabled Date rules, add a rule and pick its Type, for example Day of the week → Sunday. Add one rule per day or date. See every rule type.
6. Under Where to store the value, choose Attribute and enter Name of the attribute, for example delivery_date. Or choose Metafield and enter a Namespace and Key.
7. Click Done. Check that Status is Active, then click Save and copy the Block ID.
8. Click Open Checkout Editor. Add the Custom Block app block where you want the calendar, paste the Block ID and save.

Settings reference

Setting	What it does	Default
Label	Name for the date field. Not shown in checkout in the current version.	Empty

Disabled Date rules

Each rule disables dates in the calendar. Rules add up: a date is disabled if any rule matches it.

Type	What it disables
Day of the week	Every Monday, Tuesday, and so on. One day per rule.
Specific Date	One date.
Date Range	Every date from Start Date to End Date, including both.
Date Before	Every date up to and including the chosen date.
Date After	The chosen date and every date after it.
Dynamic (current day,next day, etc)	Current Day, Next Day, Previous Day, or All days before today (which also disables today).
Custom Liquid Expression	Dates returned by a Liquid expression, such as a same-day cut-off. Has a Friendly Name for your reference.

Where to store the value

Setting	What it does	Default
Attribute → Name of the attribute	Saves the date as a cart attribute. It appears on the order under Additional details.	None, set one
Metafield → Namespace and Key	Saves the date as a cart metafield, written as namespace.key.	None

Verify it worked

1. Open your checkout. The calendar shows, with your disabled dates greyed out.
2. Check a boundary: for a Date Range, both the start and end dates are disabled.
3. Pick an available date and place a test order.
4. Open the order in Orders. With attribute storage, the date is under Additional details, for example delivery_date: 2026-10-14.
5. Negative check: try to click a disabled date. Nothing is selected.

Limitations

• Shopify Plus only for placement in the checkout steps. That’s a Shopify rule for all checkout apps.
• The Label setting isn’t shown in checkout. Use a Heading block above the calendar.
• No Required setting. Buyers can complete checkout without picking a date.
• One date per order. Buyers can’t choose a range or several dates.
• Dynamic rules use the UTC date, so around midnight “today” can differ from your local date.
• The date isn’t linked to shipping rates or delivery methods.

Troubleshooting

The picked date isn’t on the order. Check Where to store the value has a name. The Date Picker has no fallback name, so a blank name means nothing is saved.

A rule doesn’t disable anything. Open the rule and click its date button to choose a date. A date rule that was never clicked has no date saved. For Custom Liquid Expression rules, see disabling dates for the output format checkout expects.

Today or tomorrow is disabled unexpectedly. Date Before and All days before today include the boundary date. Use Date Before with the day before the first date you want to allow.