React Date Primitives

Primitives for creating Date-Picker and DateRange-Picker components in React with zero dependencies!

Installation

This package is distributed via npm.

npm install --save react-date-primitives

This package also depends on react. Please make sure you have it installed as well.

Usage

import React from 'react';
import { useCalendar } from '@vkbansal/react-date-primitives';

/**
 * Use your favourite date library (eg: moment, date-fns, etc).
 */
import { isSameDay } from 'date-fns/esm';

function SimpleDatePicker() {
  const { days, month, setMonth } = useCalendar();
  const [selected, setSelected] = React.useState(new Date());

  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(7, 1fr)'
      }}
    >
      {days.map((day, i) => (
        <div
          style={{
            opacity: day.inCurrentMonth ? 1 : 0.2,
            background: isSameDay(day.dateObj, selected) ? '#ccc' : 'transparent'
          }}
          key={i}
          onClick={(): void => {
            day.inCurrentMonth && setSelected(day.dateObj);
          }}
        >
          {day.dateObj.getDate()}
        </div>
      ))}
    </div>
  );
}

Live Examples

• useCalendar hook
• useDateRange hook

License

MIT. Copyright(c) Vivek Kumar Bansal