DatePicker

A datepicker component enables the selection of a date or a range of dates in a specified format from an interactive display.

Properties

autoFocus (default: false)

If this property is set to true, the component gets the focus automatically when displayed.

dateFormat (default: "MM/dd/yyyy")

The format of the date displayed in the input field

Available values: MM/dd/yyyy (default), MM-dd-yyyy, yyyy/MM/dd, yyyy-MM-dd, dd/MM/yyyy, dd-MM-yyyy, yyyyMMdd, MMddyyyy

Formats handle years (y), months (m or M), days of the month (d). Providing multiple placeholder letters changes the display of the date.

The table below shows the available date formats:

<App>
  <DatePicker dateFormat="dd-MM-yyyy" initialValue="05/25/2024" />
</App>

disabledDates

An array of dates that are disabled

<App>
  <DatePicker disabledDates="{['05/26/2024', '05/27/2024']}" initialValue="05/25/2024" />
</App>  

enabled (default: true)

This boolean property value indicates whether the component responds to user events (true) or not (false).

<App>
  <DatePicker enabled="false" />
</App>  

endIcon

This property sets an icon to appear on the end (right side when the left-to-right direction is set) of the input.

endText

This property sets a text to appear on the end (right side when the left-to-right direction is set) of the input.

fromDate

The start date of the range of selectable dates

<App>
  <DatePicker fromDate="05/24/2024" />
</App>

initialValue

This property sets the component's initial value.

<App>
  <DatePicker initialValue="05/25/2024" />
</App>  

inline (default: false)

Whether to display the datepicker inline

mode (default: "single")

The mode of the datepicker (single or range)

Available values: single (default), range

<App>
  <DatePicker mode="single" />
  <DatePicker mode="range" />
</App>

placeholder

A placeholder text that is visible in the input field when its empty.

<App>
  <DatePicker placeholder="This is a placeholder" />
</App>  

readOnly (default: false)

Set this property to true to disallow changing the component value.

showWeekNumber (default: false)

Whether to show the week number in the calendar

<App>
  <DatePicker showWeekNumber="true" />
</App>

startIcon

This property sets an icon to appear at the start (left side when the left-to-right direction is set) of the input.

startText

This property sets a text to appear at the start (left side when the left-to-right direction is set) of the input.

toDate

The end date of the range of selectable dates

<App>
  <DatePicker toDate="05/26/2024" />
</App>

validationStatus (default: "none")

This property allows you to set the validation status of the input component.

Available values:

<App>
  <DatePicker />
  <DatePicker validationStatus="valid" />
  <DatePicker validationStatus="warning" />
  <DatePicker validationStatus="error" />
</App>

weekStartsOn (default: 0)

The first day of the week. 0 is Sunday, 1 is Monday, etc.

Available values:

<App>
  <DatePicker weekStartsOn="1" />
</App>

Events

didChange

This event is triggered when value of DatePicker has changed.

Write in the input field and see how the Text underneath it is updated in parallel.

<App var.field="">
  <DatePicker initialValue="{field}" onDidChange="(val) => field = val" />
  <Text value="{field}" />
</App>

gotFocus

This event is triggered when the DatePicker has received the focus.

Clicking on the DatePicker in the example demo changes the label text. Note how clicking elsewhere resets the text to the original.

<App var.isFocused="false">
  <Text value="{isFocused === true ? 'DatePicker focused' : 'DatePicker lost focus'}" />
  <DatePicker
    onGotFocus="isFocused = true"
    onLostFocus="isFocused = false"
  />
</App>

lostFocus

This event is triggered when the DatePicker has lost the focus.

Exposed Methods

focus

This method sets the focus on the DatePicker.

setValue

You can use this method to set the component's current value programmatically (true: checked, false: unchecked).

<App>
  <DatePicker
    id="picker"
    readOnly="true"
  />
  <HStack">
    <Button
      label="Add Text"
      onClick="picker.setValue('05/25/2024')" />
    <Button
      label="Remove Text"
      onClick="picker.setValue('')" />
  </HStack>
</App>

value

You can query the component's value. If no value is set, it will retrieve undefined.

Styling

The DatePicker component provides these theme variables to customize its appearance:

• borderRadius-DatePicker
• textColor-DatePicker
• backgroundColor-DatePicker--disabled
• borderWidth-DatePicker
• borderStyle-DatePicker
• borderColor-DatePicker--disabled
• backgroundColor-DatePicker--disabled
• textColor-DatePicker--disabled
• textColor-value-DatePicker
• borderColor-DatePicker-default
• borderColor-DatePicker-error
• borderColor-DatePicker-warning
• borderColor-DatePicker-success
• color-placeholder-DatePicker
• backgroundColor-menu-DatePicker
• boxShadow-menu-DatePicker
• borderRadius-menu-DatePicker
• backgroundColor-item-DatePicker--hover
• backgroundColor-item-DatePicker--active

{
  "borderRadius-DatePicker": "30px",
  "borderWidth-DatePicker": "4px",
  "borderRadius-menu-DatePicker": "30px",
  "textColor-DatePicker": "black",
  "backgroundColor-menu-DatePicker": "#f5f5dc"
}

To style all input controls not just this component, use Input instead of the DatePicker segment:

textColor-Input: "#0033FF"

Input affects the following controls:

• Checkbox
• NumberBox
• RadioGroupOption
• Select
• Switch
• TextArea

See custom themes for styling details.

Theme Variables