@schedule-x/date-picker

@schedule-x/date-picker

A demo can be found at: https://schedule-x.dev/demos/date-picker

Install

npm install @schedule-x/date-picker @schedule-x/theme-default

Setup

import { createDatePicker } from '@schedule-x/date-picker'
import '@schedule-x/theme-default/dist/date-picker.css'

const datePicker = createDatePicker({
  listeners: {
    onChange: (date) => {
      console.log('date changed', date)
    },
  },
})
datePicker.render(document.getElementById('date-picker'))

First, we create a date picker instance with the createDatePicker function. This function takes a configuration object as its only argument. With the onChange listener, this sets us up to react to the selection of a date. Finally, the render method is called, rendering the date picker into the element specified as the single argument.

Methods and properties

value (string property)

The value property is used to get or set the selected date. It needs to have the format YYYY-MM-DD.

disabled (boolean property)

The disabled property is used to get or set the disabled state of the date picker.

setTheme(theme: 'light' | 'dark')

The setTheme method is used to set the theme of the date picker

getTheme(): 'light' | 'dark'

The getTheme method is used to get the current theme of the date picker

Configuration

Below is an example of how to configure the date picker, containing all the currently available options.

import { createDatePicker } from '@schedule-x/date-picker'
import '@schedule-x/theme-default/dist/date-picker.css'

const config = {
  /**
   * Set the language. Currently supports: 'en-US', 'en-GB', 'de-DE', 'zh-CN' and 'sv-SE'
   * For support of further languages, please open a PR, adding your translations under the folder:
   * packages/translations/src/locales/xx-XX
   *
   * Defaults to 'en-US'
   * */
  locale: 'zh-CN',

  /**
   * Set which day is to be considered the starting day of the week. 0 = Sunday, 1 = Monday, (...other days) 6 = Saturday
   * Defaults to 1 (Monday)
   * */
  firstDayOfWeek: 0,

  /**
   * The default date to display when the calendar is first rendered. Only accepts YYYY-MM-DD format.
   * Defaults to the current date
   * */
  selectedDate: '2023-12-24',

  /**
   * The label to display in the input field when no date has been selected.
   */
  label: 'Select a date',

  /**
   * The name of the date picker input field
   */
  name: 'date-picker',

  /**
   * An HTML element to which the date picker popup will be appended when opened.
   * */
  teleportTo: document.body,

  /**
   * The placement of the date picker popup in relation to the input field
   * Available values: 'top-start', 'top-end', 'bottom-start', 'bottom-end'
   * Defaults to 'bottom-start'
   * */
  placement: 'bottom-end',

  /**
   * The minimum date that a user can select. Only accepts YYYY-MM-DD format.
   * Defaults to 1970-01-01
   * */
  min: '2020-01-01',

  /**
   * The maximum date that a user can select. Only accepts YYYY-MM-DD format.
   * Defaults to December 31st of the year following the current year
   */
  max: '2025-01-01',

  style: {
    /**
     * Render the date picker in dark mode.
     * Defaults to false
     */
    isDark: true,

    /**
     * Set the width of the date picker wrapper to 100%. Particularly useful for small screens.
     * Defaults to false
     */
    fullWidth: true,
  },

  listeners: {
    /**
     * Callback function that is called when the user selects a date.
     * @param {string} date - The date that the user selected, in YYYY-MM-DD format
     */
    onChange: (date) => {
      console.log('date changed', date)
    },

    /**
     * Called when the user presses the escape key while the date picker popup is open.
     * */
    onEscapeKeyDown: ($app) => {
      // 1. do something else first and then...
      $app.timePickerState.isOpen.value = false // 2. close the popup
    },
  },
}

const datePicker = createDatePicker(config)
datePicker.render(document.getElementById('date-picker'))

Changelog

2.3.0 (2024-10-01)

Bug Fixes

• calendar-controls: enable overriding parts of week options (#707) (5ce464e)

Features

• add custom component typing for interactive modal (#710) (805b432)