| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229 |
- import React,{ Component } from 'react'
- import Taro from '@tarojs/taro';
- import dayjs from 'dayjs';
- import { AtIcon } from 'taro-ui';
- import { View, Text, PickerView, PickerViewColumn, } from '@tarojs/components';
- import { getPickerViewList, getDate, getArrWithTime, formatDate, getDayList } from './utils';
- import './index.scss';
- export default class DateTimePicker extends Component {
- static externalClasses = ['wrap-class', 'select-item-class'];
- state = {
- yearList: [], //年 -下拉
- monthLsit: [], //月 -下拉
- dayList: [], //日 -下拉
- hourList: [], //时 -下拉
- minuteList: [], //分 -下拉
- selectIndexList: [1, 1, 1, 1, 1], //PickerViewColumn选择的索引
- fmtInitValue: "", //初始值
- current: '', //当前选择的数据
- visible: false, //是否可见
- hasChange: false, //是否更改
- year: '', //时间值
- month: '',
- day: '',
- hour: '',
- minute: '',
- };
- // 打开时间选择的模态框 - 根据当前时间初始化picker-view的数据
- openModal = () => {
- const { current, fmtInitValue } = this.state;
- const selectIndexList = [];
- const arr = getArrWithTime(current || fmtInitValue || getDate()); //优先当前选择的值,其次默认值,其次当前值
- const { yearList, monthLsit, dayList, hourList, minuteList } = getPickerViewList();
- const [year, month, day, hour, minute] = arr;
- //根据arr 数据索引
- selectIndexList[0] = yearList.indexOf(arr[0] + '年');
- selectIndexList[1] = monthLsit.indexOf(arr[1] + '月');
- selectIndexList[2] = dayList.indexOf(arr[2] + '日');
- selectIndexList[3] = hourList.indexOf(arr[3] + '点');
- selectIndexList[4] = minuteList.indexOf(arr[4] + '分');
- this.setState({
- selectIndexList,
- visible: true,
- yearList,
- monthLsit,
- dayList,
- hourList,
- minuteList,
- year,
- month,
- day,
- hour,
- minute
- });
- };
- // 取消
- cancelHandel = () => {
- this.setState({
- visible: false,
- hasChange: false,
- });
- const { year, month, day, hour, minute } = this.state;
- const current = formatDate(year, month, day, hour, minute);
- this.props.onCancel && this.props.onCancel({ current });
- };
- // 确定
- okHandel = () => {
- const { year, month, day, hour, minute } = this.state;
- const current = formatDate(year, month, day, hour, minute);
- if(dayjs(dayjs(current).format('YYYY-MM-DD HH:mm')).isBefore(dayjs(dayjs(current).format('YYYY-MM-DD')+' 8:30'))){
- Taro.showToast({title:'不能选择8:30之前的时间',icon:'none'})
- return ;
- }
- if(dayjs(dayjs(current).format('YYYY-MM-DD HH:mm')).isAfter(dayjs(dayjs(current).format('YYYY-MM-DD')+' 17:30'))){
- Taro.showToast({title:'不能选择17:30之后的时间',icon:'none'})
- return ;
- }
- if(
- dayjs(dayjs(current).format('YYYY-MM-DD HH:mm')).isAfter(dayjs(dayjs(current).format('YYYY-MM-DD')+' 12:00'))
- &&
- dayjs(dayjs(current).format('YYYY-MM-DD HH:mm')).isBefore(dayjs(dayjs(current).format('YYYY-MM-DD')+' 13:30'))
- ){
- Taro.showToast({title:'不能选择12:00到13:30之间的时间',icon:'none'})
- return ;
- }
- this.setState({
- current,
- hasChange: false,
- visible: false,
- });
- this.props.onOk && this.props.onOk({ current });
- };
- // 切换
- changeHandel = (e) => {
- const selectIndexList = e.detail.value;
- const [yearIndex, monthIndex, dayIndex, hourIndex, minuteIndex] = selectIndexList;
- const { yearList, monthLsit, dayList, hourList, minuteList } = this.state;
- const yearStr = yearList[yearIndex];
- const monthStr = monthLsit[monthIndex];
- const dayStr = dayList[dayIndex];
- const hourStr = hourList[hourIndex];
- const minuteStr = minuteList[minuteIndex];
- const year = Number(yearStr.substr(0, yearStr.length - 1));
- const month = Number(monthStr.substr(0, monthStr.length - 1));
- const day = Number(dayStr.substr(0, dayStr.length - 1));
- const hour = Number(hourStr.substr(0, hourStr.length - 1));
- const minute = Number(minuteStr.substr(0, minuteStr.length - 1));
- // 更新年、天数
- const newDayList = getDayList(year, month);
- this.setState({
- dayList: newDayList,
- year,
- month,
- day,
- hour,
- minute,
- hasChange: true,
- selectIndexList
- });
- };
- // 清除数据
- clear = () => {
- this.setState({
- current: ''
- });
- this.props.onClear && this.props.onClear({ current: '' });
- };
- // 设值
- setInitialState(state) {
- this.setState({
- ...state
- })
- }
- componentDidMount() {
- const { initValue } = this.props;
- const fmtInitValue = getDate(initValue);
- this.setState({ fmtInitValue });
- }
- render() {
- const { visible, current, yearList, monthLsit, dayList, hourList, minuteList, selectIndexList } = this.state;
- const { placeholder = '请选择时间' } = this.props;
- return (
- <View className="datetime-picker-wrap wrap-class">
- <View className="selector-wrap">
- <View className="select-item select-item-class" onClick={this.openModal}>
- {current || placeholder}
- </View>
- {
- current && <View className="clear-icon">
- <AtIcon value="close-circle" size="20" onClick={this.clear} />
- </View>
- }
- </View>
- {visible
- && <View className="wrapper">
- {/*日期模态框 */}
- <View className="model-box-bg"></View>
- <View className="model-box">
- <View className="model-picker">
- <View className="button-model">
- <Text class="btn-txt" onClick={this.cancelHandel}>取消</Text>
- <Text class="btn-txt" onClick={this.okHandel}>确定</Text>
- </View>
- <View className="cont_model">
- <PickerView className="pick-view" indicatorStyle="height: 50px;" value={selectIndexList} onChange={this.changeHandel}>
- {/*年*/}
- <PickerViewColumn className="picker-view-column">
- {
- yearList.length && yearList.map((item, index) =>
- <View key={String(index)} className="pick-view-column-item">{item}</View>)
- }
- </PickerViewColumn>
- {/*月*/}
- <PickerViewColumn className="picker-view-column">
- {
- monthLsit.length && monthLsit.map((item, index) =>
- <View key={String(index)} className="pick-view-column-item">{item}</View>)
- }
- </PickerViewColumn>
- {/*日*/}
- <PickerViewColumn className="picker-view-column">
- {
- dayList.length && dayList.map((item, index) =>
- <View key={String(index)} className="pick-view-column-item">{item}</View>)
- }
- </PickerViewColumn>
- {/*时*/}
- <PickerViewColumn className="picker-view-column">
- {
- hourList.length && hourList.map((item, index) =>
- <View key={String(index)} className="pick-view-column-item">{item}</View>)
- }
- </PickerViewColumn>
- {/*分*/}
- <PickerViewColumn className="picker-view-column">
- {
- minuteList.length && minuteList.map((item, index) =>
- <View key={String(index)} className="pick-view-column-item">{item}</View>)
- }
- </PickerViewColumn>
- </PickerView>
- </View>
- </View>
- </View>
- </View>}
- </View>
- );
- }
- }
- // DateTimePicker.prototype = {
- // initValue: PropTypes.string, //初始化时间
- // onClear: PropTypes.func, //清除选择的时间触发
- // onCancel: PropTypes.func, //时间picker 取消时触发
- // onOk: PropTypes.func, //时间picker 确定时触发
- // };
|