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

• [x] Just datepicker
• [x] Just timepicker
• [x] DateTime picker
• [x] Built in themes (dark/light/default)
• [x] Multi-language and Locales
• [x] First day of the week
• [x] Inline picker
• [x] Dropdown picker
• [x] 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