Awesome Open Source
Awesome Open Source

React Date Primitives

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

NPM version

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

License

MIT. Copyright(c) Vivek Kumar Bansal


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (251,605
Reactjs (72,292
Reactjs (72,292
React Components (2,358
React Components (1,374
Date (972
Datepicker (612
Related Projects