@preachjs/datepicker

Headless Datepicker(s) for preact

• @preachjs/datepicker
  • Highlights
  • Usage
    • Simple Inline Datepicker
    • Create a range select date picker
    • API
  • License

Highlights

• Lightweight
• Unstyled
• Fast and runs on signals
• For Preact! <3

Usage

• Install the package and it's deps

npm i preact @preachjs/datepicker @preact/signals

Simple Inline Datepicker

import { Calendar } from '@preachjs/datepicker'

function App() {
  const [date, setDate] = useState()
  return (
    <>
      <Calendar value={date} onSelect={nextValue => setDate(nextValue)} />
    </>
  )
}

Create a range select date picker

import { Calendar } from '@preachjs/datepicker'

function App() {
  const [dateRange, setDateRange] = useState([])
  return (
    <>
      <Calendar
        mode="range"
        value={dateRange}
        onSelect={nextValue => setDateRange(nextValue)}
      />
    </>
  )
}

API

| prop | description | default | | --------------- | ----------------------------------------------------------------------------------------------------------------- | ------------ | | value | The current value of the datepicker | current date | | onSelect | Callback fired when a date selection is successful, in case of range selection, it'll fire with both the values | | | mode | Switch between single select and range selection mode | single | | weekdayFormat | narrow,short,long weekend format on the calendar header | narrow | | arrowLeft | Icon Rendered on the left of the month selector | < | | arrowRight | Icon Rendered on the right of the month selector | > |

License

MIT