amos-datepicker

TimeView

Clock

example

import React, { Component } from 'react';
import { render } from 'react-dom';
import PropTypes from 'prop-types';
import moment from 'moment';

import { TimeView, Clock } from 'amos-datepicker';

import 'amos-datepicker/assets/TimeView.scss';
import 'amos-datepicker/assets/Clock.scss';

const _locale = {
  hours: '时',
  minutes: '分',
  seconds: '秒'
};

class Demo extends Component {
  static propTypes = {
    dateFormat: PropTypes.string
  };

  static defaultProps = {
    dateFormat: 'HH:mm:ss'
  };

  constructor(props) {
    super(props);
    this.state = {
      value: null
    };
  }

  onClickOutside = () => {};

  onClockChange = v => {
    this.setState({ value: v });
    console.log('selected time:', v);
  };

  getTime = () => {
    const { dateFormat } = this.props;
    const { value } = this.state;
    let timeDate = value || new Date();
    let time = {};
    if (/(H|h)/.test(dateFormat)) {
      time.hours = timeDate.getHours();
    }
    if (/m/.test(dateFormat)) {
      time.minutes = timeDate.getMinutes();
    }
    if (/s/.test(dateFormat)) {
      time.seconds = timeDate.getSeconds();
    }
    return time;
  };

  render() {
    return (
      <div className="demo">
        <TimeView timeFormat="HH:mm:ss" selectedDate={moment()} handleClickOutside={this.onClickOutside} />
        <Clock time={this.getTime()} locale={_locale} onChange={this.onClockChange} />
        <Clock locale={_locale} onChange={this.onClockChange} />
      </div>
    );
  }
}

render(<Demo />, document.getElementById('app'));