@devseed-ui/date-picker v4.1.0

@devseed-ui/date-picker

Displays a datepicker element. It can be used as to pick a single date or a date range. It has support for calendar view and direct input.

The picker has an internal state allowing the user to select or input the needed date. When the check-mark gets clicked the date selection is confirmed.

This component requires [collecticons](/collecticons) to be included.
You'll see strange characters (example �) in place of icons if collecticons is missing.

Example

Single date picker

state: { start: null, end: null }
---
<DevseedUiThemeProvider>
  <CollecticonsGlobalStyle />
  <DatePicker
    id="date-picker"
    value={state}
    onConfirm={(v) => setState(v)}
  />
</DevseedUiThemeProvider>

Range date picker

state: { start: null, end: null }
---
<DevseedUiThemeProvider>
  <CollecticonsGlobalStyle />
  <DatePicker
    id="date-picker-range"
    value={state}
    onConfirm={(v) => setState(v)}
    isRange
  />
</DevseedUiThemeProvider>

Properties

rows:
  - Prop name: "id"
    Type: "string"
    Description: "An id for the date picker"
    Default value: "n/a"
  - Prop name: "renderTriggerElement"
    Type: "function"
    Description: "A function that returns a trigger element. The function is called with (props, label). The `props` must be spread onto the returning element."
    Default value: "n/a"
  - Prop name: "direction"
    Type: "oneOf ['up', 'down', 'left', 'right']"
    Description: "Sets opening direction of the date-picker"
    Default value: "down"
  - Prop name: "alignment"
    Type: "oneOf ['left', 'center', 'right', 'top', 'middle', 'bottom']"
    Description: "Sets the alignment of the date-picker box. ['left', 'center', 'right'] can only be used with ['up', 'down'] directions. ['top', 'middle', 'bottom'] can only be used with ['left', 'right'] directions."
    Default value: "center"
  - Prop name: "className"
    Type: "string"
    Description: "Additional classnames for the date-picker content box"
    Default value: "n/a"
  - Prop name: "renderAdditionalContent"
    Type: "function"
    Description: "Additional content to render after the calendar/direct input. The function receives props as argument: `{ tab: Current Tab }`"
    Default value: "n/a"
  - Prop name: "onCancel"
    Type: "function"
    Description: "Callback for when the date selection is cancelled. This is triggered when the X icon is clicked. The draft value is reset."
    Default value: "n/a"
  - Prop name: "onConfirm"
    Type: "function"
    Description: "Callback for when the data selection is confirmed. This is called with an object `{start: Date, end: Date}`. If in single date mode, both values will be the same."
    Default value: "n/a"
  - Prop name: "onDateChange"
    Type: "function"
    Description: "Callback for when the data selection changes, being used for controlled components. This is called with an object `{start: Date, end: Date}`. If in single date mode, both values will be the same."
    Default value: "n/a"
  - Prop name: "value"
    Type: "Object({start: Date, end: Date})"
    Description: "Date value. Should be an object with Date instances."
    Default value: "n/a"
  - Prop name: "isRange"
    Type: "boolean"
    Description: "Whether the picker should allow date range"
    Default value: "false"
  - Prop name: "view"
    Type: "oneOf ['month', 'year', 'decade']"
    Description: "Defines the view the calendar is displaying, not what the user is picking. For `month`, the month's days are displayed and the user picks one. For `year`, the month list is displayed and the user picks one, and so on."
    Default value: "month"
  - Prop name: "min"
    Type: "Date"
    Description: "The minimum date that can be selected"
    Default value: "n/a"
  - Prop name: "max"
    Type: "Date"
    Description: "The maximum date that can be selected"
    Default value: "n/a"