react-mdatetime
This is a fork of the github project input-moment
React datetime/date/time picker powered by momentjs
The design is from https://dribbble.com/shots/1439965-Due-Date-and-Time-Picker.
Icons are from ionicons.
Features
- Just datepicker
- Just timepicker
- DateTime picker
- Built in themes (dark/light/default)
- Multi-language and Locales
- First day of the week
- Inline picker
- Dropdown picker
- Modal picker
- Native picker input on mobile devices (iOS, Android and other mobile OS)
Installation
npm i react-mdatetime --save
You install it's dependencies too:
npm i less less-loader style-loader css-loader --save
ATTENTION: Make sure you have configured you use these loaders
Notice: This module requires moment as a peerDependency.
Demo
http://tedicela.github.io/react-mdatetime
Usage
;Component{superprops;thisstate =dropdown_picker1:input_moment:modal_picker:dropdown_picker2:}{this;};{return<div><p>Dropdown datetime picker: </p><div className="m-t"><DateTimePickermode="dropdown"locale="it"moment=thisstatedropdown_picker1type="datetime" // datetime | date | timetheme="dark" // default | dark | lightname="dropdown_picker1"onChange=thishandleChangeminStep=5 // default minStep=1hourStep=1 // default hourStep=1/></div><p>Inline datetime picker: </p><div className="m-t"><DateTimePickermode="inline"locale="it"type="datetime" // datetime | date | timetheme="dark" // default | dark | lightmoment=thisstateinput_momentname="input_moment"onChange=thishandleChangeminStep=5 // default minStep=1hourStep=1 // default hourStep=1/></div><p>Modal datetime picker: </p><div className="m-t"><DateTimePicker//mode="modal"locale="it"value=thisstatemodal_pickertype="date" // datetime | date | timetheme="light" // default | dark | lightname="modal_picker"onChange=thishandleChangelabels=save: "Salva"cancel: "Annulla"date: "Data"time: "Ora"hours: "Ore"minutes: "Minuti"/></div><p>Dropdown datetime picker: </p><div className="m-t"><DateTimePickermode="dropdown"locale="it"moment=thisstatedropdown_picker2type="datetime" // datetime | date | timetheme="dark" // default | dark | lightname="dropdown_picker2"onChange=thishandleChangeminStep=5 // default minStep=1/></div></div>;}
Check app.js for a working example.
Development
- npm install
- npm start
- http://localhost:8080
License
MIT