react-mdatetime

npm Build Status styled with prettier

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

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=
          />
        </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

License

MIT