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 ( {current || placeholder} { current && } {visible && {/*日期模态框 */} 取消 确定 {/*年*/} { yearList.length && yearList.map((item, index) => {item}) } {/*月*/} { monthLsit.length && monthLsit.map((item, index) => {item}) } {/*日*/} { dayList.length && dayList.map((item, index) => {item}) } {/*时*/} { hourList.length && hourList.map((item, index) => {item}) } {/*分*/} { minuteList.length && minuteList.map((item, index) => {item}) } } ); } } // DateTimePicker.prototype = { // initValue: PropTypes.string, //初始化时间 // onClear: PropTypes.func, //清除选择的时间触发 // onCancel: PropTypes.func, //时间picker 取消时触发 // onOk: PropTypes.func, //时间picker 确定时触发 // };