sp-date-picker-build-test v0.0.3

sp-date-picker

Date picker components that allows you to select a day or date range. It comes with two components and utility functions to help you with date manipulation.

• RangePicker
• DayPicker
• date utils

Storybook

Screenshots

Demo Video

https://user-images.githubusercontent.com/53928959/225493481-6937f8c1-c5db-429d-b05f-932cbf9e5e9c.mp4

Installation

To Be Added

Usage

DatePicker

// 1. Use the hook provided
const datePicker = useDatePicker()

// 2. Extract what you need from the hook
const { handleOpen, startDate, endDate } = datePicker

// 3. Create handlers that open/close the date picker
const handleDatePickerOpen = useCallback(() => {
  handleOpen(true)
}, [handleOpen])
const handleDatePickerClose = useCallback(() => {
  handleOpen(false)
}, [handleOpen])

// ...

return (
  // 4. Pass the value returned from the hook to the date picker
  // 5. Don't forget to pass the onCloseClick handler
  <DatePicker {...datePicker} onCloseClick={handleDatePickerClose} />
)

DayPicker

// 1. Use the hook provided
const dayPicker = useDayPicker()

// 2. Extract what you need from the hook
const { selectedDay, handleOpen } = dayPicker

// 3. Create handlers that open/close the date picker
const handleDayPickerOpen = useCallback(() => {
  handleOpen(true)
}, [handleOpen])
const handleDayPickerClose = useCallback(() => {
  handleOpen(false)
}, [handleOpen])

// ...

// 4. Pass the value returned from the hook to the date picker
// 5. Don't forget to pass the onCloseClick handler
return <DayPicker {...dayPicker} onCloseClick={handleDayPickerClose} />

Options

There are the props you might be interested in.

DatePicker

DayPicker

Most of props are given by the hook provided. Use javascript deconstruction to extract what you need. See the example below.

// DatePicker - range picker
const datePicker = useDatePicker()
const { startDate, endDate } = datePicker

// DatePicker - day picker
const datePicker = useDatePicker()
const { date } = datePicker

// DayPicker
const datePicker = useDayPicker()
const { selectedDay } = datePicker

Extract handlers to create open/close handlers.

const datePicker = useDayPicker()
const { handleOpen } = datePicker

const handleDatePickerOpen = useCallback(() => {
  handleOpen(true)
}, [handleOpen])

const handleDatePickerClose = useCallback(() => {
  handleOpen(false)
}, [handleOpen])

Date Utilities

Todo

• Fix failing tests
• Add more tests if needed