React Date Primitives
Primitives for creating Date-Picker and DateRange-Picker components in React. And It has 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 those installed as well.
Usage
import * as React from 'react';
import { CalendarMonth } from 'react-date-primitives';
class SimpleDatePicker extends React.Component {
render() {
return (
<table>
<CalendarMonth
month={new Date()}
render={({ days }) => (
<tbody>
{days.map((week, i) => (
<tr key={i}>
{week.map((day, j) => (
<td key={`${i}-${j}`}>
{day.inCurrentMonth ? day.date.getDate() : ''}
</td>
))}
</tr>
))}
</tbody>
)}
/>
</table>
);
}
}
Live Examples
- simple date-picker
- simple date-picker with dropdowns for month and year
- simple daterange-picker using
CalendarMonth
- styled date-picker
useCalendar
hookuseDateRange
hook
API
License
MIT. Copyright(c) Vivek Kumar Bansal