date-picker

binds state

A field that opens a month calendar to pick one date, kept in bind= as YYYY-MM-DD text ("" for none), or with range=true a start and an end. For deadlines, bookings or report filters.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props"text"minmax

range

placeholder

required

Props

"text"textThe label above the field.optional

bindstateState that holds the date as YYYY-MM-DD, like due or t.date. Start it as "" for no date.required

minstringThe earliest date that can be chosen, YYYY-MM-DD, included.—

maxstringThe latest date that can be chosen, YYYY-MM-DD, included.—

rangebooleanPick a start and an end date: bind= holds {from, to} as YYYY-MM-DD, starting from a record in state like period={from: "", to: ""}. The calendar offers Last 7 days and Last 30 days. filter(orders, 'date', period) keeps the items from the start to the end, both included, and all of them while it's empty.false

placeholderstringShown while no date is chosen.Choose a date

requiredbooleanWhen true, the calendar has no Clear button.false

disabledconditionExpression; when true the field is greyed out and doesn't open.—

onactionActions to run after the date changes, with bind= already set, e.g. emit:changed. Separate several with ;—

ifconditionShow only when this expression is true, e.g. if=done or if={count>0}. Every element takes it.—

tipstringA short explanation shown on hover, keyboard focus or a tap, e.g. tip="Orders not yet shipped": for a term or a number some people won't know, instead of more words on screen. It makes the element a Tab stop if it isn't one. Every element takes it.—

For your model

The exact guide entry a model gets for date-picker, generated from the same definition.

  date-picker "<text>"  — A field that opens a month calendar to pick one date, kept in bind= as YYYY-MM-DD text ("" for none), or with range=true a start and an end. For deadlines, bookings or report filters.
    "<text>"  The label above the field.
    bind=<state, required>  State that holds the date as YYYY-MM-DD, like due or t.date. Start it as "" for no date.
    min=<string>  The earliest date that can be chosen, YYYY-MM-DD, included.
    max=<string>  The latest date that can be chosen, YYYY-MM-DD, included.
    range=<boolean>  Pick a start and an end date: bind= holds {from, to} as YYYY-MM-DD, starting from a record in state like period={from: "", to: ""}. The calendar offers Last 7 days and Last 30 days. filter(orders, 'date', period) keeps the items from the start to the end, both included, and all of them while it's empty.
    placeholder=<string>  Shown while no date is chosen.
    required=<boolean>  When true, the calendar has no Clear button.
    disabled=<condition>  Expression; when true the field is greyed out and doesn't open.
    on=<action>  Actions to run after the date changes, with bind= already set, e.g. emit:changed. Separate several with ;
    example:
      state due=""
      date-picker "Due date" bind=due min="2026-01-01" max="2027-12-31"

More input

button link check switch radio select stepper slider input segmented menu menu-item

All input elements on one page →