Date Picker Field

Date Picker Field

Form Widget

datepicker - renders a text field used for selecting date and times.

published_at:
    label: Published
    type: datepicker
    mode: date

The following field properties are supported and commonly used.

Property Description
label a name when displaying the form field to the user.
default specifies a default string value, optional.
comment places a descriptive comment below the field.
mode the expected result, either date, datetime or time. Default: datetime.
format provide an explicit date display format. Eg: Y-m-d
minDate the minimum/earliest date that can be selected.
maxDate the maximum/latest date that can be selected.
yearRange number of years to show either side, or an array of upper/lower range, example [1900,2015]. Default: 10.
disableDays days that cannot be selected, can be a number to represent Sunday (0) to Saturday (6), or a specific date (2024-10-01).
firstDay the first day of the week. Default: 0 (Sunday).
twelveHour display a 12-hour clock for selecting time. Default: false
showWeekNumber show week numbers at head of row. Default: false
useTimezone convert the date and time from the backend specified timezone preference.

Use the time mode to display a time picker and toggle 24-hour or 12-hour display with the twelveHour property.

birth_time:
    label: Time Born
    type: datepicker
    mode: time
    twelveHour: true

The disableDays property can be used to disable the selection of specific days.

booking_date:
    label: Start Date
    type: datepicker
    mode: date
    disableDays:
        - 0 # Sundays
        - 6 # Saturdays
        - "2023-08-10" # Specific date
On This Page