Package Exports

react-mdatetime

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-mdatetime) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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