README
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
import DateTimePicker from "../src/DateTimePicker";
class App extends React.Component{
constructor(props){
super(props);
this.state = {
dropdown_picker1: moment(),
input_moment: moment(),
modal_picker: moment(),
dropdown_picker2: moment(),
}
}
handleChange = (name, m) => {
this.setState({[name]: m});
};
render(){
return(
<div>
<p>Dropdown datetime picker: </p>
<div className="m-t">
<DateTimePicker
mode="dropdown"
locale={"it"}
moment={this.state.dropdown_picker1}
type={"datetime"} // datetime | date | time
theme={"dark"} // default | dark | light
name="dropdown_picker1"
onChange={this.handleChange}
minStep={5} // default minStep=1
hourStep={1} // default hourStep=1
/>
</div>
<p>Inline datetime picker: </p>
<div className="m-t">
<DateTimePicker
mode="inline"
locale={"it"}
type={"datetime"} // datetime | date | time
theme={"dark"} // default | dark | light
moment={this.state.input_moment}
name="input_moment"
onChange={this.handleChange}
minStep={5} // default minStep=1
hourStep={1} // default hourStep=1
/>
</div>
<p>Modal datetime picker: </p>
<div className="m-t">
<DateTimePicker
//mode="modal"
locale={"it"}
value={this.state.modal_picker}
type={"date"} // datetime | date | time
theme={"light"} // default | dark | light
name="modal_picker"
onChange={this.handleChange}
labels={{
save: "Salva",
cancel: "Annulla",
date: "Data",
time: "Ora",
hours: "Ore",
minutes: "Minuti",
}}
/>
</div>
<p>Dropdown datetime picker: </p>
<div className="m-t">
<DateTimePicker
mode="dropdown"
locale={"it"}
moment={this.state.dropdown_picker2}
type={"datetime"} // datetime | date | time
theme={"dark"} // default | dark | light
name="dropdown_picker2"
onChange={this.handleChange}
minStep={5} // default minStep=1
/>
</div>
</div>
);
}
}
Check app.js for a working example.
Development
- npm install
- npm start
- http://localhost:8080
License
MIT