Getting Started

1. 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