taro-material/h5/Picker/index.js

Mini Program components that implement Google's Material Design.

import Nerv from "nervjs";
import Taro, { Component } from "@tarojs/taro-h5";

import { View, Picker } from '@tarojs/components';
import dayjs from 'dayjs';

import RMTextField from "../TextField/index";

class RMDatePicker extends Component {
  constructor(props) {
    super(props);

    if (!props.value && props.format) {
      this.props.value = dayjs().format(props.format);
    }
  }

  componentDidMount() {
    const { value, onChange } = this.props;
    onChange(value);
  }

  handelDateChange = e => {
    const { onChange } = this.props;
    const value = e.detail.value;
    onChange(value);
  };

  render() {
    const {
      name,
      title,
      placeholder,
      disabled,
      start,
      end,
      fields,
      required,
      format,
      value
    } = this.props;

    return <View className="container">
        <Picker mode="date" onChange={this.handelDateChange} value={value} start={start} end={end} disabled={disabled} fields={fields}>
          <View className="picker">
            <RMTextField name={name} title={title} type="date" placeholder={placeholder} value={value} editable={false} disabled={disabled} readOnlyStyle="normal" required={required} />
          </View>
        </Picker>
      </View>;
  }
}

RMDatePicker.defaultProps = {
  title: '日期',
  name: 'date',
  placeholder: '请选择日期',
  fields: 'day', // year, month, day
  start: '',
  end: '',
  disabled: false,
  onChange: () => {},
  required: false,
  value: '',
  format: 'YYYY-MM-DD'
};

export default RMDatePicker;