index.jsx 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. import React,{ Component } from 'react'
  2. import Taro from '@tarojs/taro';
  3. import dayjs from 'dayjs';
  4. import { AtIcon } from 'taro-ui';
  5. import { View, Text, PickerView, PickerViewColumn, } from '@tarojs/components';
  6. import { getPickerViewList, getDate, getArrWithTime, formatDate, getDayList } from './utils';
  7. import './index.scss';
  8. export default class DateTimePicker extends Component {
  9. static externalClasses = ['wrap-class', 'select-item-class'];
  10. state = {
  11. yearList: [], //年 -下拉
  12. monthLsit: [], //月 -下拉
  13. dayList: [], //日 -下拉
  14. hourList: [], //时 -下拉
  15. minuteList: [], //分 -下拉
  16. selectIndexList: [1, 1, 1, 1, 1], //PickerViewColumn选择的索引
  17. fmtInitValue: "", //初始值
  18. current: '', //当前选择的数据
  19. visible: false, //是否可见
  20. hasChange: false, //是否更改
  21. year: '', //时间值
  22. month: '',
  23. day: '',
  24. hour: '',
  25. minute: '',
  26. };
  27. // 打开时间选择的模态框 - 根据当前时间初始化picker-view的数据
  28. openModal = () => {
  29. const { current, fmtInitValue } = this.state;
  30. const selectIndexList = [];
  31. const arr = getArrWithTime(current || fmtInitValue || getDate()); //优先当前选择的值,其次默认值,其次当前值
  32. const { yearList, monthLsit, dayList, hourList, minuteList } = getPickerViewList();
  33. const [year, month, day, hour, minute] = arr;
  34. //根据arr 数据索引
  35. selectIndexList[0] = yearList.indexOf(arr[0] + '年');
  36. selectIndexList[1] = monthLsit.indexOf(arr[1] + '月');
  37. selectIndexList[2] = dayList.indexOf(arr[2] + '日');
  38. selectIndexList[3] = hourList.indexOf(arr[3] + '点');
  39. selectIndexList[4] = minuteList.indexOf(arr[4] + '分');
  40. this.setState({
  41. selectIndexList,
  42. visible: true,
  43. yearList,
  44. monthLsit,
  45. dayList,
  46. hourList,
  47. minuteList,
  48. year,
  49. month,
  50. day,
  51. hour,
  52. minute
  53. });
  54. };
  55. // 取消
  56. cancelHandel = () => {
  57. this.setState({
  58. visible: false,
  59. hasChange: false,
  60. });
  61. const { year, month, day, hour, minute } = this.state;
  62. const current = formatDate(year, month, day, hour, minute);
  63. this.props.onCancel && this.props.onCancel({ current });
  64. };
  65. // 确定
  66. okHandel = () => {
  67. const { year, month, day, hour, minute } = this.state;
  68. const current = formatDate(year, month, day, hour, minute);
  69. if(dayjs(dayjs(current).format('YYYY-MM-DD HH:mm')).isBefore(dayjs(dayjs(current).format('YYYY-MM-DD')+' 8:30'))){
  70. Taro.showToast({title:'不能选择8:30之前的时间',icon:'none'})
  71. return ;
  72. }
  73. if(dayjs(dayjs(current).format('YYYY-MM-DD HH:mm')).isAfter(dayjs(dayjs(current).format('YYYY-MM-DD')+' 17:30'))){
  74. Taro.showToast({title:'不能选择17:30之后的时间',icon:'none'})
  75. return ;
  76. }
  77. if(
  78. dayjs(dayjs(current).format('YYYY-MM-DD HH:mm')).isAfter(dayjs(dayjs(current).format('YYYY-MM-DD')+' 12:00'))
  79. &&
  80. dayjs(dayjs(current).format('YYYY-MM-DD HH:mm')).isBefore(dayjs(dayjs(current).format('YYYY-MM-DD')+' 13:30'))
  81. ){
  82. Taro.showToast({title:'不能选择12:00到13:30之间的时间',icon:'none'})
  83. return ;
  84. }
  85. this.setState({
  86. current,
  87. hasChange: false,
  88. visible: false,
  89. });
  90. this.props.onOk && this.props.onOk({ current });
  91. };
  92. // 切换
  93. changeHandel = (e) => {
  94. const selectIndexList = e.detail.value;
  95. const [yearIndex, monthIndex, dayIndex, hourIndex, minuteIndex] = selectIndexList;
  96. const { yearList, monthLsit, dayList, hourList, minuteList } = this.state;
  97. const yearStr = yearList[yearIndex];
  98. const monthStr = monthLsit[monthIndex];
  99. const dayStr = dayList[dayIndex];
  100. const hourStr = hourList[hourIndex];
  101. const minuteStr = minuteList[minuteIndex];
  102. const year = Number(yearStr.substr(0, yearStr.length - 1));
  103. const month = Number(monthStr.substr(0, monthStr.length - 1));
  104. const day = Number(dayStr.substr(0, dayStr.length - 1));
  105. const hour = Number(hourStr.substr(0, hourStr.length - 1));
  106. const minute = Number(minuteStr.substr(0, minuteStr.length - 1));
  107. // 更新年、天数
  108. const newDayList = getDayList(year, month);
  109. this.setState({
  110. dayList: newDayList,
  111. year,
  112. month,
  113. day,
  114. hour,
  115. minute,
  116. hasChange: true,
  117. selectIndexList
  118. });
  119. };
  120. // 清除数据
  121. clear = () => {
  122. this.setState({
  123. current: ''
  124. });
  125. this.props.onClear && this.props.onClear({ current: '' });
  126. };
  127. // 设值
  128. setInitialState(state) {
  129. this.setState({
  130. ...state
  131. })
  132. }
  133. componentDidMount() {
  134. const { initValue } = this.props;
  135. const fmtInitValue = getDate(initValue);
  136. this.setState({ fmtInitValue });
  137. }
  138. render() {
  139. const { visible, current, yearList, monthLsit, dayList, hourList, minuteList, selectIndexList } = this.state;
  140. const { placeholder = '请选择时间' } = this.props;
  141. return (
  142. <View className="datetime-picker-wrap wrap-class">
  143. <View className="selector-wrap">
  144. <View className="select-item select-item-class" onClick={this.openModal}>
  145. {current || placeholder}
  146. </View>
  147. {
  148. current && <View className="clear-icon">
  149. <AtIcon value="close-circle" size="20" onClick={this.clear} />
  150. </View>
  151. }
  152. </View>
  153. {visible
  154. && <View className="wrapper">
  155. {/*日期模态框 */}
  156. <View className="model-box-bg"></View>
  157. <View className="model-box">
  158. <View className="model-picker">
  159. <View className="button-model">
  160. <Text class="btn-txt" onClick={this.cancelHandel}>取消</Text>
  161. <Text class="btn-txt" onClick={this.okHandel}>确定</Text>
  162. </View>
  163. <View className="cont_model">
  164. <PickerView className="pick-view" indicatorStyle="height: 50px;" value={selectIndexList} onChange={this.changeHandel}>
  165. {/*年*/}
  166. <PickerViewColumn className="picker-view-column">
  167. {
  168. yearList.length && yearList.map((item, index) =>
  169. <View key={String(index)} className="pick-view-column-item">{item}</View>)
  170. }
  171. </PickerViewColumn>
  172. {/*月*/}
  173. <PickerViewColumn className="picker-view-column">
  174. {
  175. monthLsit.length && monthLsit.map((item, index) =>
  176. <View key={String(index)} className="pick-view-column-item">{item}</View>)
  177. }
  178. </PickerViewColumn>
  179. {/*日*/}
  180. <PickerViewColumn className="picker-view-column">
  181. {
  182. dayList.length && dayList.map((item, index) =>
  183. <View key={String(index)} className="pick-view-column-item">{item}</View>)
  184. }
  185. </PickerViewColumn>
  186. {/*时*/}
  187. <PickerViewColumn className="picker-view-column">
  188. {
  189. hourList.length && hourList.map((item, index) =>
  190. <View key={String(index)} className="pick-view-column-item">{item}</View>)
  191. }
  192. </PickerViewColumn>
  193. {/*分*/}
  194. <PickerViewColumn className="picker-view-column">
  195. {
  196. minuteList.length && minuteList.map((item, index) =>
  197. <View key={String(index)} className="pick-view-column-item">{item}</View>)
  198. }
  199. </PickerViewColumn>
  200. </PickerView>
  201. </View>
  202. </View>
  203. </View>
  204. </View>}
  205. </View>
  206. );
  207. }
  208. }
  209. // DateTimePicker.prototype = {
  210. // initValue: PropTypes.string, //初始化时间
  211. // onClear: PropTypes.func, //清除选择的时间触发
  212. // onCancel: PropTypes.func, //时间picker 取消时触发
  213. // onOk: PropTypes.func, //时间picker 确定时触发
  214. // };