@devseed-ui/date-picker

    1.1.3 • Public • Published

    @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"
    

    Install

    npm i @devseed-ui/date-picker

    DownloadsWeekly Downloads

    23

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    786 kB

    Total Files

    16

    Last publish

    Collaborators

    • hnhubner
    • danielfdsilva
    • vgeorge