sp-date-picker-scss v0.0.9

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

npm install sp-date-picker

Usage

DatePicker

import { DatePicker, getYearMonthDate, useDatePicker } from 'sp-date-picker'

// 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} />

Example

An example of date picker using styled-components

const Box = styled.div`
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;

  figure figcaption h1 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #444;
    padding-top: 15px;
  }

  .datepicker__input-box {
    display: flex;
    flex-direction: row;
    gap: 10px;
  }

  .demo__input {
    border: 1px solid #dadada;
    width: 250px;
    padding: 10px;
    cursor: text;
    border-radius: 4px;

    &::placeholder {
      color: 1px solid #b5b5b5;
    }
  }

  hr {
    border: 0;
    border-top: 1px solid #dadada;
    margin: 0;
  }
`

function App() {
  const datePicker = useDatePicker()
  // Extract what we need from the hook
  const { handleOpen, startDate, endDate } = datePicker
  // Create handlers that open/close the date picker
  const handleDatePickerOpen = useCallback(() => {
    handleOpen(true)
  }, [handleOpen])
  const handleDatePickerClose = useCallback(() => {
    handleOpen(false)
  }, [handleOpen])

  // Additionally, we can format the date strings
  const startDateString = useMemo(() => {
    return startDate ? getYearMonthDate(startDate) : ''
  }, [startDate])
  const endDateString = useMemo(() => {
    return endDate ? getYearMonthDate(endDate) : ''
  }, [endDate])

  return (
    <Box>
      <figure>
        <figcaption>
          <h1>Date Picker</h1>
        </figcaption>
        <div className="datepicker__input-box">
          <input
            type="text"
            className="demo__input"
            readOnly
            placeholder="Start Date"
            value={startDateString}
            onClick={handleDatePickerOpen}
          />
          <input
            type="text"
            className="demo__input"
            readOnly
            placeholder="End Date"
            value={endDateString}
            onClick={handleDatePickerOpen}
          />
          <DatePicker
            {...datePicker}
            onCloseClick={handleDatePickerClose}
            isRange
            id="demo"
          />
        </div>
      </figure>
    </Box>
  )
}

Custom Styling

If you are willing to customize the styling of the date picker, you can use the id prop to pass in your own class name.

In the code

<DatePicker
  {...datePicker}
  onCloseClick={handleDatePickerClose}
  isRange
  // Pass in your own id to customize the styling
  // This is needed to make higer specificity
  id="demo"
/>

In the css

#demo .datepicker__day.selected {
  background-color: purple;
  border-color: purple;
}

#demo .datepicker__day-box:has(.selected) {
  background-color: purple;
}

#demo .datepicker__day-box:has(.between) {
  background-color: purple;
}

Target the id you passed in to the date picker and select the element you want to customize. You can see what selector you are looking for by inspecting the element in the browser.

Here are few examples of css selectors you can use to customize the styling.

Try including the below css in your project to see how it looks like.

Custom Style

CSS

#demo .datepicker__footer__clear-date-button.datepicker__footer__button span {
  color: gray;
}

#demo .datepicker__footer__confirm-button.datepicker__footer__button {
  background-color: #ffac2c;
}

#demo .datepicker__day.selected {
  background-color: #ffac2c;
  border-color: #ffac2c;
}

#demo .datepicker__day-box:has(.selected) {
  background-color: #fff1e6;
}

#demo .datepicker__day-box:has(.between) {
  background-color: #fff1e6;
}

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