index.js 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  1. import Taro from '@tarojs/taro'
  2. import React, { Component } from 'react'
  3. import { View, PickerView, PickerViewColumn } from '@tarojs/components'
  4. import './index.scss'
  5. import PropTypes from 'prop-types';
  6. export default class TimePicker extends Component {
  7. state = {
  8. pickVal: [],
  9. range: {},
  10. checkObj: {},
  11. values:null
  12. }
  13. componentWillMount() {
  14. this.initData();
  15. }
  16. componentDidMount() { }
  17. componentWillUnmount() { }
  18. componentDidShow() { }
  19. componentDidHide() { }
  20. componentDidUpdate(prevProps, prevState){
  21. if (prevProps.value!==this.state.values){
  22. // this.initData();
  23. this.setState({
  24. values:prevProps.value,
  25. },()=>{
  26. this.initData();
  27. })
  28. }
  29. }
  30. formatNum = (n) => {
  31. return (Number(n) < 10 ? '0' + Number(n) : Number(n) + '');
  32. }
  33. checkValue = (value) => {
  34. let strReg = /^\d{2}:\d{2}:\d{2}$/, example = "18:00:05";
  35. if (!strReg.test(value)) {
  36. console.log(new Error("请传入与mode、fields匹配的value值,例value=" + example + ""))
  37. }
  38. return strReg.test(value);
  39. }
  40. resetData = (year, month, day, hour, minute) => {
  41. let curDate = this.getCurrenDate();
  42. let curFlag = this.props.current;
  43. let curHour = curDate.curHour;
  44. let curMinute = curDate.curMinute;
  45. let curSecond = curDate.curSecond;
  46. for (let hour = 0; hour < 24; hour++) {
  47. hours.push(this.formatNum(hour));
  48. }
  49. for (let minute = 0; minute < 60; minute++) {
  50. minutes.push(this.formatNum(minute));
  51. }
  52. for (let second = 0; second < 60; second++) {
  53. seconds.push(this.formatNum(second));
  54. }
  55. return {
  56. hours,
  57. minutes,
  58. seconds
  59. }
  60. }
  61. getData = (curDate) => {
  62. //用来处理初始化数据
  63. let hours = [], minutes = [], seconds = [];
  64. let curFlag = this.props.current;
  65. let disabledAfter = this.props.disabledAfter;
  66. let fields = this.props.fields;
  67. let curHour = curDate.curHour;
  68. let curMinute = curDate.curMinute;
  69. let curSecond = curDate.curSecond;
  70. for (let hour = 0; hour < 24; hour++) {
  71. hours.push(this.formatNum(hour));
  72. }
  73. for (let minute = 0; minute < 60; minute++) {
  74. minutes.push(this.formatNum(minute));
  75. }
  76. for (let second = 0; second < 60; second++) {
  77. seconds.push(this.formatNum(second));
  78. }
  79. return this.props.second ? {
  80. hours,
  81. minutes,
  82. seconds
  83. } : {
  84. hours,
  85. minutes
  86. }
  87. }
  88. getCurrenDate = () => {
  89. let curDate = new Date();
  90. let curHour = curDate.getHours();
  91. let curMinute = curDate.getMinutes();
  92. let curSecond = curDate.getSeconds();
  93. return this.props.second ? {
  94. curHour,
  95. curMinute,
  96. curSecond
  97. } : {
  98. curHour,
  99. curMinute,
  100. }
  101. }
  102. getDval = () => {
  103. let value = this.props.value;
  104. let fields = this.props.fields;
  105. let dVal = null;
  106. let aDate = new Date();
  107. let hour = this.formatNum(aDate.getHours());
  108. let minute = this.formatNum(aDate.getMinutes());
  109. let second = this.formatNum(aDate.getSeconds());
  110. if (value) {
  111. let flag = this.checkValue(value);
  112. if (!flag) {
  113. dVal = [hour, minute, second]
  114. } else {
  115. dVal = value ? value.split(":") : [];
  116. }
  117. } else {
  118. dVal = this.props.second ? [hour, minute, second] : [hour, minute]
  119. }
  120. return dVal;
  121. }
  122. initData=()=>{
  123. let curDate = this.getCurrenDate();
  124. let dateData = this.getData(curDate);
  125. let pickVal = [], obj = {}, full = "", result = "", hour = "", minute = "", second = "";
  126. let dVal = this.getDval();
  127. let curFlag = this.props.current;
  128. let disabledAfter = this.props.disabledAfter;
  129. let hours = dateData.hours;
  130. let minutes = dateData.minutes;
  131. let seconds = dateData.seconds;
  132. let defaultArr = this.props.second ? [
  133. dVal[0] && hours.indexOf(dVal[0]) != -1 ? hours.indexOf(dVal[0]) : 0,
  134. dVal[1] && minutes.indexOf(dVal[1]) != -1 ? minutes.indexOf(dVal[1]) : 0,
  135. dVal[2] && seconds.indexOf(dVal[2]) != -1 ? seconds.indexOf(dVal[2]) : 0
  136. ] : [
  137. dVal[0] && hours.indexOf(dVal[0]) != -1 ? hours.indexOf(dVal[0]) : 0,
  138. dVal[1] && minutes.indexOf(dVal[1]) != -1 ? minutes.indexOf(dVal[1]) : 0
  139. ];
  140. pickVal = disabledAfter ? defaultArr : (curFlag ? (this.props.second ? [
  141. hours.indexOf(this.formatNum(curDate.curHour)),
  142. minutes.indexOf(this.formatNum(curDate.curMinute)),
  143. seconds.indexOf(this.formatNum(curDate.curSecond)),
  144. ] : [
  145. hours.indexOf(this.formatNum(curDate.curHour)),
  146. minutes.indexOf(this.formatNum(curDate.curMinute))
  147. ]) : defaultArr);
  148. this.setState({
  149. range:dateData,
  150. checkObj:obj
  151. })
  152. hour = dVal[0] ? dVal[0] : hours[0];
  153. minute = dVal[1] ? dVal[1] : minutes[0];
  154. if (this.props.second) second = dVal[2] ? dVal[0] : seconds[0];
  155. result = this.props.second ? `${hour + ':' + minute + ':' + second}` : `${hour + ':' + minute}`;
  156. full = this.props.second ? `${hour + ':' + minute + ':' + second}` : `${hour + ':' + minute + ':00'}`;
  157. Taro.nextTick(() => {
  158. this.setState({
  159. pickVal
  160. })
  161. });
  162. // EventChannel.$emit("change", {
  163. // result: result,
  164. // value: full,
  165. // obj: obj
  166. // })
  167. this.props.change({
  168. result: result,
  169. value: full,
  170. obj: obj
  171. })
  172. }
  173. handlerChange=(e)=>{
  174. let arr=[...e.detail.value];
  175. let data=this.state.range;
  176. let hour="",minute="",second="",result="",full="",obj={};
  177. hour=(arr[0]||arr[0]==0)?data.hours[arr[0]]||data.hours[data.hours.length-1]:"";
  178. minute=(arr[1]||arr[1]==0)?data.minutes[arr[1]]||data.minutes[data.minutes.length-1]:"";
  179. if(this.props.second)second=(arr[2]||arr[2]==0)?data.seconds[arr[2]]||data.seconds[data.seconds.length-1]:"";
  180. obj=this.props.second?{
  181. hour,
  182. minute,
  183. second
  184. }:{
  185. hour,
  186. minute
  187. };
  188. this.setState({
  189. checkObj: obj,
  190. pickVal:e.detail.value
  191. })
  192. result=this.props.second?`${hour+':'+minute+':'+second}`:`${hour+':'+minute}`;
  193. full=this.props.second?`${hour+':'+minute+':'+second}`:`${hour+':'+minute+':00'}`;
  194. this.props.change({
  195. result: result,
  196. value: full,
  197. obj: obj
  198. })
  199. }
  200. render() {
  201. const { pickVal, range } = this.state
  202. return (
  203. <View className='w-picker-view'>
  204. <PickerView className="d-picker-view" indicatorStyle={this.props.itemHeight} value={pickVal} onChange={this.handlerChange}>
  205. <PickerViewColumn>
  206. {
  207. range.hours.map((item, index) => {
  208. return (<View className="w-picker-item" key={index}>{item}时</View>)
  209. })
  210. }
  211. </PickerViewColumn>
  212. <PickerViewColumn>
  213. {
  214. range.minutes.map((item, index) => {
  215. return (<View className="w-picker-item" key={index}>{item}分</View>)
  216. })
  217. }
  218. </PickerViewColumn>
  219. {
  220. this.props.second?(<PickerViewColumn>
  221. {
  222. range.seconds.map((item, index) => {
  223. return (<View className="w-picker-item" key={index}>{item}秒</View>)
  224. })
  225. }
  226. </PickerViewColumn>):null
  227. }
  228. </PickerView>
  229. </View>
  230. )
  231. }
  232. }
  233. TimePicker.propTypes = {
  234. itemHeight: PropTypes.string,
  235. value: PropTypes.oneOfType([
  236. PropTypes.string,
  237. PropTypes.number,
  238. PropTypes.array
  239. ]),
  240. current: PropTypes.bool,
  241. second: PropTypes.bool
  242. }
  243. TimePicker.defaultProps = {
  244. itemHeight: "44px",
  245. value: "",
  246. current: false,
  247. second: true
  248. };