mini-check/dist/h5/components/DatePicker/index.js

import Nerv from "nervjs";
import Taro from "@tarojs/taro-h5";
import { View, Text, Picker, Image } from '@tarojs/components';
import dayjs from 'dayjs';
import classnames from 'classnames';
import { CustomLabel, ItemExtra, UnEditeableView } from '../index';
import arrowImg from '../../assets/ic_arrow_right.png';
import './index.scss';
export default class PickerItem extends Taro.Component {
  constructor() {
    super(...arguments);
  }
  render() {
    const { term, required, help, hidden, value, defaultValue } = this.props;
    if (hidden) {
      return null;
    }
    const { editable, itemExtra, showTime, onView, listItemChildren } = this.props;
    const disabled = editable === undefined || editable === true ? false : true;
    const showValue = value || defaultValue || Date.now();
    const dateValue = showValue ? dayjs(showValue).format('YYYY-MM-DD hh:mm').split(' ')[0] : '';
    const timeValue = showValue ? dayjs(showValue).format('YYYY-MM-DD hh:mm').split(' ')[1] : '';
    if (editable === false || editable === undefined && onView) {
      const showValue = showTime ? `${dateValue} ${timeValue}` : dateValue;
      return <UnEditeableView term={term} help={help} value={showValue} listItemChildren={listItemChildren} />;
    }
    const containerCLs = classnames(['date-picker-container', listItemChildren ? 'item-container' : 'item-container-margin']);
    return <View className={containerCLs}>
        <View className="picker-container">
          <CustomLabel term={term} help={help} required={required} position />
          <Picker mode="date" onChange={this.datePickerOnChange} value={dateValue} fields="day" disabled={disabled}>
            <View className="picker-content">
              <Text className="picker-text">{dateValue}</Text>
              <Image className="picker-arrow" mode="aspectFit" src={arrowImg} />
            </View>
          </Picker>
        </View>
        {showTime && <View className="picker-container">
          <CustomLabel term="选择时间" required={required} position />
          <Picker mode="time" onChange={this.timePickerOnChange} value={timeValue} disabled={disabled}>
            <View className="picker-content">
              <Text className="picker-text">{timeValue}</Text>
              <Image className="picker-arrow" mode="aspectFit" src={arrowImg} />
            </View>
          </Picker>
        </View>}
        <ItemExtra text={itemExtra} />
      </View>;
  }
  datePickerOnChange = e => {
    const { value, defaultValue, onChange } = this.props;
    const showValue = value || defaultValue;
    const timeValue = showValue ? dayjs(showValue).format('YYYY-MM-DD HH:mm').split(' ')[1] : '';
    if (onChange) {
      onChange(dayjs(`${e.detail.value} ${timeValue}`).valueOf());
    }
  };
  timePickerOnChange = e => {
    const { value, defaultValue, onChange } = this.props;
    const showValue = value || defaultValue;
    const dateValue = showValue ? dayjs(showValue).format('YYYY-MM-DD HH:mm').split(' ')[0] : '';
    if (onChange) {
      onChange(dayjs(`${dateValue} ${e.detail.value}`).valueOf());
    }
  };
}