react-calendar-datetime

React date and time calendar component (with presets and locale)


Keywords
react datepicker, calendar date time, react calendar date time, datetime picker, calendar locale react datetimepicker
License
MIT
Install
npm install react-calendar-datetime@1.3.1

Documentation

Calendar component for React


npm version npm

Demo

N|Solid

📅 date and time picker, include presets

time dark

🔨 How to install:

  npm install react-calendar-datetime

  or

  yarn add react-calendar-datetime

📆 How to use:

import React from "react";

import { Calendar } from "react-calendar-datetime";

const App = () => {
  const [date, setDate] = useState(new Date());
  return <Calendar date={date} onChangeDate={setDate} />;
};

Easy and simple 👍

Props:

Property Type Default Description
date Date new Date() accepts the date in the normal format
onChangeDate function ----- callback, called when the calendar changes and return the new date
locale string 'en-gb' locale name, currently supported: en-gb,ru,de,uk,zh-cn,fr
presets boolean false presets mode
time boolean false timepicker mode
width string null any css-lang string measure
height string null any css-lang string measure
dark boolean false dark theme

Patch note:


v 1.2.2

  • add year picker
  • add dark theme 🌙 N|Solids
  • add locales:
    • zh-cn
    • fr