React react-native Date plug-in m-date-picker/rmc-date-picker use

Based on React, M-date-picker offers IOS-style date selection in a very similar way to native Datepicker.
Home: Https://github.com/react-component/m-date-picker
Demo:http://react-component.github.io/m-date-picker/examples/popup.html
Recommendation: ★★★★★
Advantages: Smooth use, very similar to native Datepicker, powerful, able to meet general requirements
Insufficient: Temporarily no
------------------

The official demo is based on the internal source code, with the actual NPM I integrated after the use of a different, and now provide the actual reference

npm i rmc-date-picker --s
Based on [email protected] 6.0.8 example
import ‘rmc-picker / assets / index.css’;
import ‘rmc-date-picker / assets / index.css’;
import ‘rmc-picker / assets / popup.css’;
import zh_CN from ‘rmc-date-picker / lib / locale / zh_CN’;
import DatePicker from ‘rmc-date-picker / lib / DatePicker’;
import PopPicker from ‘rmc-date-picker / lib / Popup’;

class Demo extends React.Component {
  constructor (props) {
    super (props);
    this.state = {
      date: null,
    };
  }

  onChange = (date) => {
    console.log (‘onChange’, this.format (date));
    this.setState ({
      date,
    });
  }

   format = (date) => {
        let mday = date.getDate ();
        let month = date.getMonth () + 1;
        month = month <10? `0 $ {month}`: month;
        mday = mday <10? `0 $ {mday}`: mday;
        return `$ {date.getFullYear ()}-$ {month}-$ {mday} $ {date.getHours ()}: $ {date.getMinutes ()}`;
   }

  onDismiss = () => {
    console.log (‘onDismiss’);
  }

  render () {
    const {date} = this.state;
    const datePicker = (
      <DatePicker
        rootNativeProps = {{‘data-xx‘: ‘yy’}}
        minDate = {new Date (2015, 8, 15, 10, 30, 0)}
        maxDate = {new Date (2019, 8, 15, 10, 30, 0)}
        defaultDate = (new Date ())
        mode = {‘date‘}
        locale = {zh_CN}
      />
    );
    return <div style = {{margin: ‘10px 30px’}}>
      <h2> popup date picker </ h2>
      <div>
        <PopPicker
          datePicker = {datePicker}
          transitionName = "rmc-picker-popup-slide-fade"
          maskTransitionName = "rmc-picker-popup-fade"
          title = {‘Choose Date’}
          date = {date}
          okText = {‘Confirm’}
          dismissText = {‘Cancel’}
          onDismiss = {this.onDismiss}
          onChange = {this.onChange}>
          <p> Click me </ p>
         // Trigger the popup display, just put any label here
        </ PopPicker>
      </ div>
    </ div>;
  }
}
---------------------

Original: https://blog.csdn.net/u012982629/article/details/80752409? 

Screenshotsweb

Apidatepicker Props

React react-native Date plug-in m-date-picker/rmc-date-picker use