react-headless-datepicker

Headless date picker for React apps

Install

npm install --save react-headless-datepicker

Usage

import React from 'react'

import { useDatePicker } from 'react-headless-datepicker'

function Example () {
  const options = {
    showNonCurrentDates: true
  }

  const {
    setSelectedAndCursor,
    forEachWeek
  } = useDatePicker(options)

  return (
    <>
      <table>
        <tbody>
          <tr>
            <td>Su</td>
            <td>Mo</td>
            <td>Tu</td>
            <td>We</td>
            <td>Th</td>
            <td>Fr</td>
            <td>Sa</td>
          </tr>
          {forEachWeek(({ key, forEachDay }) => (
            <tr key={key} style={{ textAlign: 'right' }}>
              {forEachDay(({ valueOrNull, day }) => (
                <td key={key}>
                  <button
                    style={{ width: '2.5em' }}
                    onClick={() => setSelectedAndCursor(day)}
                  >{valueOrNull}
                  </button>
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </>
  )
}

License

MIT © fppden