React datepicker Flatpikr https://flatpickr.js.org/
Flatpickr is a lightweight, UX-driven JavaScript library with Angular, Vue, Ember, and React compatibility.
Install React Datepicker
install the react-flatpickr
C:\reactdev\myreactdev>install the react-flatpickr
src/index.js
//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
)
public/index.html
//public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ReactJS </title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/App.js
//src/App.js
import React, { Component } from 'react';
import Flatpickr from 'react-flatpickr';
import "flatpickr/dist/themes/material_orange.css"; //material_green.css, material_blue.css, material_red.css, material_orange.css, dark.css
class App extends Component {
constructor() {
super();
this.state = {
date: new Date()
};
}
render() {
const { date } = this.state;
return (
<div style={{ padding: 20 }}><h2>ReactJS Datepicker using React Flatpickr</h2>
<div >
<Flatpickr
data-enable-time
value={date}
onChange={date => {
this.setState({ date });
}}
/>
</div>
<div>
<h3>React Flatpickr: minDate</h3>
<Flatpickr
data-enable-time
value={date}
options={{
minDate: 'today',
}}
onChange={date => {
this.setState({ date });
}}
/>
</div>
<div>
<h3>React Flatpickr: minTime</h3>
<Flatpickr
data-enable-time
value={date}
options={{
minTime: "08:00",
}}
onChange={date => {
this.setState({ date });
}}
/>
</div>
<div>
<h3>React Flatpickr: maxTime</h3>
<Flatpickr
data-enable-time
value={date}
options={{
maxTime: "17:00",
}}
onChange={date => {
this.setState({ date });
}}
/>
</div>
<div>
<h3>React Flatpickr: altFormat</h3>
<Flatpickr
data-enable-time
value={date}
options={{
altFormat: "m/d/Y h:i K",
altInput:true,
}}
onChange={date => {
this.setState({ date });
}}
/>
</div>
<div>
<h3>React Flatpickr: Disable certain day of the week</h3>
<Flatpickr
data-enable-time
value={date}
options={{
disable: [
function(date) {
// return true to disable
return (date.getDay() === 0 || date.getDay() === 6);}],
}}
onChange={date => {
this.setState({ date });
}}
/>
</div>
</div>
);
}
}
export default App;
