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
1 2 3 4 5 6 7 8 9 | //src/index.jsimport React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render( <App />, document.getElementById('root')) |
1 2 3 4 5 6 7 8 9 10 11 12 | //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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | //src/App.jsimport 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.cssclass 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; |
