time-picker.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. <template>
  2. <view class="w-picker-view">
  3. <picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
  4. <picker-view-column>
  5. <view class="w-picker-item" v-for="(item,index) in range.hours" :key="index">{{item}}时</view>
  6. </picker-view-column>
  7. <picker-view-column>
  8. <view class="w-picker-item" v-for="(item,index) in range.minutes" :key="index">{{item}}分</view>
  9. </picker-view-column>
  10. <picker-view-column v-if="second">
  11. <view class="w-picker-item" v-for="(item,index) in range.seconds" :key="index">{{item}}秒</view>
  12. </picker-view-column>
  13. </picker-view>
  14. </view>
  15. </template>
  16. <script>
  17. export default {
  18. data() {
  19. return {
  20. pickVal:[],
  21. range:{},
  22. checkObj:{}
  23. };
  24. },
  25. props:{
  26. itemHeight:{
  27. type:String,
  28. default:"44px"
  29. },
  30. value:{
  31. type:[String,Array,Number],
  32. default:""
  33. },
  34. current:{//是否默认选中当前日期
  35. type:Boolean,
  36. default:false
  37. },
  38. second:{
  39. type:Boolean,
  40. default:true
  41. }
  42. },
  43. watch:{
  44. value(val){
  45. this.initData();
  46. }
  47. },
  48. created() {
  49. this.initData();
  50. },
  51. methods:{
  52. formatNum(n){
  53. return (Number(n)<10?'0'+Number(n):Number(n)+'');
  54. },
  55. checkValue(value){
  56. let strReg=/^\d{2}:\d{2}:\d{2}$/,example="18:00:05";
  57. if(!strReg.test(value)){
  58. console.log(new Error("请传入与mode、fields匹配的value值,例value="+example+""))
  59. }
  60. return strReg.test(value);
  61. },
  62. resetData(year,month,day,hour,minute){
  63. let curDate=this.getCurrenDate();
  64. let curFlag=this.current;
  65. let curHour=curDate.curHour;
  66. let curMinute=curDate.curMinute;
  67. let curSecond=curDate.curSecond;
  68. for(let hour=0;hour<24;hour++){
  69. hours.push(this.formatNum(hour));
  70. }
  71. for(let minute=0;minute<60;minute++){
  72. minutes.push(this.formatNum(minute));
  73. }
  74. for(let second=0;second<60;second++){
  75. seconds.push(this.formatNum(second));
  76. }
  77. return{
  78. hours,
  79. minutes,
  80. seconds
  81. }
  82. },
  83. getData(curDate){
  84. //用来处理初始化数据
  85. let hours=[],minutes=[],seconds=[];
  86. let curFlag=this.current;
  87. let disabledAfter=this.disabledAfter;
  88. let fields=this.fields;
  89. let curHour=curDate.curHour;
  90. let curMinute=curDate.curMinute;
  91. let curSecond=curDate.curSecond;
  92. for(let hour=0;hour<24;hour++){
  93. hours.push(this.formatNum(hour));
  94. }
  95. for(let minute=0;minute<60;minute++){
  96. minutes.push(this.formatNum(minute));
  97. }
  98. for(let second=0;second<60;second++){
  99. seconds.push(this.formatNum(second));
  100. }
  101. return this.second?{
  102. hours,
  103. minutes,
  104. seconds
  105. }:{
  106. hours,
  107. minutes
  108. }
  109. },
  110. getCurrenDate(){
  111. let curDate=new Date();
  112. let curHour=curDate.getHours();
  113. let curMinute=curDate.getMinutes();
  114. let curSecond=curDate.getSeconds();
  115. return this.second?{
  116. curHour,
  117. curMinute,
  118. curSecond
  119. }:{
  120. curHour,
  121. curMinute,
  122. }
  123. },
  124. getDval(){
  125. let value=this.value;
  126. let fields=this.fields;
  127. let dVal=null;
  128. let aDate=new Date();
  129. let hour=this.formatNum(aDate.getHours());
  130. let minute=this.formatNum(aDate.getMinutes());
  131. let second=this.formatNum(aDate.getSeconds());
  132. if(value){
  133. let flag=this.checkValue(value);
  134. if(!flag){
  135. dVal=[hour,minute,second]
  136. }else{
  137. dVal=value?value.split(":"):[];
  138. }
  139. }else{
  140. dVal=this.second?[hour,minute,second]:[hour,minute]
  141. }
  142. return dVal;
  143. },
  144. initData(){
  145. let curDate=this.getCurrenDate();
  146. let dateData=this.getData(curDate);
  147. let pickVal=[],obj={},full="",result="",hour="",minute="",second="";
  148. let dVal=this.getDval();
  149. let curFlag=this.current;
  150. let disabledAfter=this.disabledAfter;
  151. let hours=dateData.hours;
  152. let minutes=dateData.minutes;
  153. let seconds=dateData.seconds;
  154. let defaultArr=this.second?[
  155. dVal[0]&&hours.indexOf(dVal[0])!=-1?hours.indexOf(dVal[0]):0,
  156. dVal[1]&&minutes.indexOf(dVal[1])!=-1?minutes.indexOf(dVal[1]):0,
  157. dVal[2]&&seconds.indexOf(dVal[2])!=-1?seconds.indexOf(dVal[2]):0
  158. ]:[
  159. dVal[0]&&hours.indexOf(dVal[0])!=-1?hours.indexOf(dVal[0]):0,
  160. dVal[1]&&minutes.indexOf(dVal[1])!=-1?minutes.indexOf(dVal[1]):0
  161. ];
  162. pickVal=disabledAfter?defaultArr:(curFlag?(this.second?[
  163. hours.indexOf(this.formatNum(curDate.curHour)),
  164. minutes.indexOf(this.formatNum(curDate.curMinute)),
  165. seconds.indexOf(this.formatNum(curDate.curSecond)),
  166. ]:[
  167. hours.indexOf(this.formatNum(curDate.curHour)),
  168. minutes.indexOf(this.formatNum(curDate.curMinute))
  169. ]):defaultArr);
  170. this.range=dateData;
  171. this.checkObj=obj;
  172. hour=dVal[0]?dVal[0]:hours[0];
  173. minute=dVal[1]?dVal[1]:minutes[0];
  174. if(this.second)second=dVal[2]?dVal[0]:seconds[0];
  175. result=this.second?`${hour+':'+minute+':'+second}`:`${hour+':'+minute}`;
  176. full=this.second?`${hour+':'+minute+':'+second}`:`${hour+':'+minute+':00'}`;
  177. this.$nextTick(()=>{
  178. this.pickVal=pickVal;
  179. });
  180. this.$emit("change",{
  181. result:result,
  182. value:full,
  183. obj:obj
  184. })
  185. },
  186. handlerChange(e){
  187. let arr=[...e.detail.value];
  188. let data=this.range;
  189. let hour="",minute="",second="",result="",full="",obj={};
  190. hour=(arr[0]||arr[0]==0)?data.hours[arr[0]]||data.hours[data.hours.length-1]:"";
  191. minute=(arr[1]||arr[1]==0)?data.minutes[arr[1]]||data.minutes[data.minutes.length-1]:"";
  192. if(this.second)second=(arr[2]||arr[2]==0)?data.seconds[arr[2]]||data.seconds[data.seconds.length-1]:"";
  193. obj=this.second?{
  194. hour,
  195. minute,
  196. second
  197. }:{
  198. hour,
  199. minute
  200. };
  201. this.checkObj=obj;
  202. result=this.second?`${hour+':'+minute+':'+second}`:`${hour+':'+minute}`;
  203. full=this.second?`${hour+':'+minute+':'+second}`:`${hour+':'+minute+':00'}`;
  204. this.$emit("change",{
  205. result:result,
  206. value:full,
  207. obj:obj
  208. })
  209. }
  210. }
  211. }
  212. </script>
  213. <style lang="scss">
  214. @import "./w-picker.css";
  215. </style>