Skip to content

Primitives for creating Date-Picker and DateRange-Picker components in React. And It has zero dependencies!

License

Notifications You must be signed in to change notification settings

vkbansal/react-date-primitives

Folders and files

NameName
Last commit message
Last commit date
Jul 26, 2022
Jul 26, 2022
Sep 29, 2024
Jul 26, 2022
Jul 26, 2022
Oct 4, 2021
Jun 27, 2021
Jul 26, 2022
Jul 26, 2022
Mar 15, 2018
Jul 26, 2022
Jul 26, 2022
Sep 29, 2024
Jul 26, 2022
Jun 27, 2021
Jun 27, 2021

Repository files navigation

React Date Primitives

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

NPM version main

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