date_picker.web.js

import React, { Component } from 'react';
import { View, TextInput, Text } from 'core';
import { theme, css } from 'constants';
import { lang } from 'lang';
import { DatePicker as FDatePicker } from 'office-ui-fabric-react/lib/DatePicker';
import { ContextualMenu, DirectionalHint } from 'office-ui-fabric-react/lib/ContextualMenu';
import { IcoTime } from 'icons';

export class DatePicker extends Component {
  state = {};
  constructor(props) {
    super(props);
    let date = props.value ? new Date(props.value) : new Date();
    let time = props.value ? `${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}` : '23:59';
    this.state = { time, date, today: new Date() };
  }

  render() {
    const { style } = this.props;
    const DayPickerStrings = {
      months: lang.MONTHS,
      shortMonths: lang.SHORT_MONTHS,
      days: lang.DAYS,
      shortDays: lang.SHORT_DAYS,
      goToToday: lang.GO_TO_TODAY
    };
    return (
      <View style={style || styles.container}>
        <View
          style={{
            width: 140,
            borderStyle: 'solid',
            backgroundColor: 'white',
            borderWidth: 1,
            borderRadius: 10,
            borderColor: theme.gray_color_lighten(),
            paddingHorizontal: 10,
            height: 50,
            justifyContent: 'center'
          }}
        >
          <FDatePicker
            className="fosol-calendar"
            borderless
            isMonthPickerVisible={true}
            value={this.state.date}
            onSelectDate={date => this.onChangeDate({ date })}
            strings={DayPickerStrings}
            formatDate={date => date.getDate() + ' / ' + (date.getMonth() + 1) + ' / ' + date.getFullYear()}
            placeholder="Select a date..."
          />
        </View>
        <Text> {'  -  '} </Text>
        <View
          onClick={e => {
            this.target = e.currentTarget;
            this.setState({ is_show: true });
          }}
          style={{ flexDirection: 'row', alignItems: 'center', cursor: 'pointer' }}
        >
          <TextInput
            style={{ width: 100, fontSize: 14 }}
            onChangeText={time => this.onChangeDate({ time })}
            placeholder="time"
            value={this.state.time}
          />
          <IcoTime style={{ marginLeft: -40 }} color={'#9c9fa2'} />
        </View>
        {this.state.is_show ? (
          <ContextualMenu
            calloutProps={{ calloutMaxHeight: 300 }}
            onItemClick={(_, item) => this.onChangeDate({ time: item.name })}
            items={timeArray}
            target={this.target}
            directionalHint={lang.LANG_DIR === 'rtl' ? DirectionalHint.bottomLeftEdge : DirectionalHint.bottomRightEdge}
            onDismiss={() => this.setState({ is_show: false })}
          />
        ) : null}
      </View>
    );
  }
  onChangeDate = state => {
    this.setState(state, () => {
      const finalDate = new Date(this.state.date);
      const time = this.state.time.slice(0, 5).split(':');
      finalDate.setHours(time[0] || 0, time[1] || 0);
      this.props.onChangeDate(finalDate.getTime());
    });
  };
}

const styles = css({
  container: {
    flexDirection: 'row',
    alignItems: 'center'
  }
});
let timeArray = [];
const generateTimeArray = () => {
  for (let i = 0; i < 24; i++) {
    let hours = ('00' + i).slice(-2) + ':';
    timeArray.push({ name: hours + '00', key: 'b' + i });
    timeArray.push({ name: hours + '30', key: 'a' + i });
  }
};
generateTimeArray();