shortterm-picker.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  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.dates" :key="index">{{item.label}}</view>
  6. </picker-view-column>
  7. <picker-view-column>
  8. <view class="w-picker-item" v-for="(item,index) in range.hours" :key="index">{{item.label}}时</view>
  9. </picker-view-column>
  10. <picker-view-column>
  11. <view class="w-picker-item" v-for="(item,index) in range.minutes" :key="index">{{item.label}}分</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. expand:{
  39. type:[Number,String],
  40. default:30
  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{4}-\d{2}-\d{2} \d{2}:\d{2}(:\d{2})?$/,example="2019-12-12 18:05:00或者2019-12-12 18: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){
  63. let curDate=this.getCurrenDate();
  64. let curFlag=this.current;
  65. let curYear=curDate.curYear;
  66. let curMonth=curDate.curMonth;
  67. let curDay=curDate.curDay;
  68. let curHour=curDate.curHour;
  69. let months=[],days=[],sections=[];
  70. let disabledAfter=this.disabledAfter;
  71. let monthsLen=disabledAfter?(year*1<curYear?12:curMonth):12;
  72. let totalDays=new Date(year,month,0).getDate();//计算当月有几天;
  73. for(let month=1;month<=monthsLen;month++){
  74. months.push(this.formatNum(month));
  75. };
  76. for(let day=1;day<=daysLen;day++){
  77. days.push(this.formatNum(day));
  78. }
  79. return{
  80. months,
  81. days,
  82. sections
  83. }
  84. },
  85. getData(dVal){
  86. //用来处理初始化数据
  87. let curFlag=this.current;
  88. let disabledAfter=this.disabledAfter;
  89. let dates=[],hours=[],minutes=[];
  90. let curDate=new Date();
  91. let curYear=curDate.getFullYear();
  92. let curMonth=curDate.getMonth();
  93. let curDay=curDate.getDate();
  94. let aDate=new Date(curYear,curMonth,curDay);
  95. for(let i=0;i<this.expand*1;i++){
  96. aDate=new Date(curYear,curMonth,curDay+i);
  97. let year=aDate.getFullYear();
  98. let month=aDate.getMonth()+1;
  99. let day=aDate.getDate();
  100. let label=year+"-"+this.formatNum(month)+"-"+this.formatNum(day);
  101. switch(i){
  102. case 0:
  103. label="今天";
  104. break;
  105. case 1:
  106. label="明天";
  107. break;
  108. case 2:
  109. label="后天";
  110. break
  111. }
  112. dates.push({
  113. label:label,
  114. value:year+"-"+this.formatNum(month)+"-"+this.formatNum(day)
  115. })
  116. };
  117. for(let i=0;i<24;i++){
  118. hours.push({
  119. label:this.formatNum(i),
  120. value:this.formatNum(i)
  121. })
  122. }
  123. for(let i=0;i<60;i++){
  124. minutes.push({
  125. label:this.formatNum(i),
  126. value:this.formatNum(i)
  127. })
  128. }
  129. return {
  130. dates,
  131. hours,
  132. minutes
  133. }
  134. },
  135. getDefaultDate(){
  136. let value=this.value;
  137. let reg=/-/g;
  138. let defaultDate=value?new Date(value.replace(reg,"/")):new Date();
  139. let defaultYear=defaultDate.getFullYear();
  140. let defaultMonth=defaultDate.getMonth()+1;
  141. let defaultDay=defaultDate.getDate();
  142. let defaultDays=new Date(defaultYear,defaultMonth,0).getDate()*1;
  143. return{
  144. defaultDate,
  145. defaultYear,
  146. defaultMonth,
  147. defaultDay,
  148. defaultDays
  149. }
  150. },
  151. getDval(){
  152. let value=this.value;
  153. let dVal=null;
  154. let aDate=new Date();
  155. let year=this.formatNum(aDate.getFullYear());
  156. let month=this.formatNum(aDate.getMonth()+1);
  157. let day=this.formatNum(aDate.getDate());
  158. let date=this.formatNum(year)+"-"+this.formatNum(month)+"-"+this.formatNum(day);
  159. let hour=aDate.getHours();
  160. let minute=aDate.getMinutes();
  161. if(value){
  162. let flag=this.checkValue(value);
  163. if(!flag){
  164. dVal=[date,hour,minute]
  165. }else{
  166. let v=value.split(" ");
  167. dVal=[v[0],...v[1].split(":")];
  168. }
  169. }else{
  170. dVal=[date,hour,minute]
  171. }
  172. return dVal;
  173. },
  174. initData(){
  175. let startDate,endDate,startYear,endYear,startMonth,endMonth,startDay,endDay;
  176. let dates=[],hours=[],minutes=[];
  177. let dVal=[],pickVal=[];
  178. let value=this.value;
  179. let reg=/-/g;
  180. let range={};
  181. let result="",full="",date,hour,minute,obj={};
  182. let defaultDate=this.getDefaultDate();
  183. let defaultYear=defaultDate.defaultYear;
  184. let defaultMonth=defaultDate.defaultMonth;
  185. let defaultDay=defaultDate.defaultDay;
  186. let defaultDays=defaultDate.defaultDays;
  187. let curFlag=this.current;
  188. let disabledAfter=this.disabledAfter;
  189. let dateData=[];
  190. dVal=this.getDval();
  191. dateData=this.getData(dVal);
  192. dates=dateData.dates;
  193. hours=dateData.hours;
  194. minutes=dateData.minutes;
  195. pickVal=[
  196. dates.findIndex(n => n.value == dVal[0])!=-1?dates.findIndex(n => n.value == dVal[0]):0,
  197. hours.findIndex(n => n.value == dVal[1])!=-1?hours.findIndex(n => n.value == dVal[1]):0,
  198. minutes.findIndex(n => n.value == dVal[2])!=-1?minutes.findIndex(n => n.value == dVal[2]):0,
  199. ];
  200. range={dates,hours,minutes};
  201. date=dVal[0]?dVal[0]:dates[0].label;
  202. hour=dVal[1]?dVal[1]:hours[0].label;
  203. minute=dVal[2]?dVal[2]:minutes[0].label;
  204. result=full=`${date+' '+hour+':'+minute}`;
  205. obj={
  206. date,
  207. hour,
  208. minute
  209. }
  210. this.range=range;
  211. this.checkObj=obj;
  212. this.$nextTick(()=>{
  213. this.pickVal=pickVal;
  214. });
  215. this.$emit("change",{
  216. result:result,
  217. value:full,
  218. obj:obj
  219. })
  220. },
  221. handlerChange(e){
  222. let arr=[...e.detail.value];
  223. let data=this.range;
  224. let date="",hour="",minute="";
  225. let result="",full="",obj={};
  226. let disabledAfter=this.disabledAfter;
  227. date=(arr[0]||arr[0]==0)?data.dates[arr[0]]||data.dates[data.dates.length-1]:"";
  228. hour=(arr[1]||arr[1]==0)?data.hours[arr[1]]||data.hours[data.hours.length-1]:"";
  229. minute=(arr[2]||arr[2]==0)?data.minutes[arr[2]]||data.minutes[data.minutes.length-1]:"";
  230. result=full=`${date.label+' '+hour.label+':'+minute.label+':00'}`;
  231. obj={
  232. date,
  233. hour,
  234. minute
  235. }
  236. this.checkObj=obj;
  237. this.$emit("change",{
  238. result:result,
  239. value:full,
  240. obj:obj
  241. })
  242. }
  243. }
  244. }
  245. </script>
  246. <style lang="scss">
  247. @import "./w-picker.css";
  248. </style>