date-picker.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757
  1. <template>
  2. <view class="w-picker-view">
  3. <picker-view v-if="fields=='year'" 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.years" :key="index">{{item}}年</view>
  6. </picker-view-column>
  7. </picker-view>
  8. <picker-view v-if="fields=='month'" class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
  9. <picker-view-column>
  10. <view class="w-picker-item" v-for="(item,index) in range.years" :key="index">{{item}}年</view>
  11. </picker-view-column>
  12. <picker-view-column>
  13. <view class="w-picker-item" v-for="(item,index) in range.months" :key="index">{{item}}月</view>
  14. </picker-view-column>
  15. </picker-view>
  16. <picker-view v-if="fields=='day'" class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
  17. <picker-view-column>
  18. <view class="w-picker-item" v-for="(item,index) in range.years" :key="index">{{item}}年</view>
  19. </picker-view-column>
  20. <picker-view-column>
  21. <view class="w-picker-item" v-for="(item,index) in range.months" :key="index">{{item}}月</view>
  22. </picker-view-column>
  23. <picker-view-column>
  24. <view class="w-picker-item" v-for="(item,index) in range.days" :key="index">{{item}}日</view>
  25. </picker-view-column>
  26. </picker-view>
  27. <picker-view v-if="fields=='hour'" class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
  28. <picker-view-column>
  29. <view class="w-picker-item" v-for="(item,index) in range.years" :key="index">{{item}}年</view>
  30. </picker-view-column>
  31. <picker-view-column>
  32. <view class="w-picker-item" v-for="(item,index) in range.months" :key="index">{{item}}月</view>
  33. </picker-view-column>
  34. <picker-view-column>
  35. <view class="w-picker-item" v-for="(item,index) in range.days" :key="index">{{item}}日</view>
  36. </picker-view-column>
  37. <picker-view-column>
  38. <view class="w-picker-item" v-for="(item,index) in range.hours" :key="index">{{item}}时</view>
  39. </picker-view-column>
  40. </picker-view>
  41. <picker-view v-if="fields=='minute'" class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
  42. <picker-view-column>
  43. <view class="w-picker-item" v-for="(item,index) in range.years" :key="index">{{item}}年</view>
  44. </picker-view-column>
  45. <picker-view-column>
  46. <view class="w-picker-item" v-for="(item,index) in range.months" :key="index">{{item}}月</view>
  47. </picker-view-column>
  48. <picker-view-column>
  49. <view class="w-picker-item" v-for="(item,index) in range.days" :key="index">{{item}}日</view>
  50. </picker-view-column>
  51. <picker-view-column>
  52. <view class="w-picker-item" v-for="(item,index) in range.hours" :key="index">{{item}}时</view>
  53. </picker-view-column>
  54. <picker-view-column>
  55. <view class="w-picker-item" v-for="(item,index) in range.minutes" :key="index">{{item}}分</view>
  56. </picker-view-column>
  57. </picker-view>
  58. <picker-view v-if="fields=='second'" class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
  59. <picker-view-column>
  60. <view class="w-picker-item" v-for="(item,index) in range.years" :key="index">{{item}}年</view>
  61. </picker-view-column>
  62. <picker-view-column>
  63. <view class="w-picker-item" v-for="(item,index) in range.months" :key="index">{{item}}月</view>
  64. </picker-view-column>
  65. <picker-view-column>
  66. <view class="w-picker-item" v-for="(item,index) in range.days" :key="index">{{item}}日</view>
  67. </picker-view-column>
  68. <picker-view-column>
  69. <view class="w-picker-item" v-for="(item,index) in range.hours" :key="index">{{item}}时</view>
  70. </picker-view-column>
  71. <picker-view-column>
  72. <view class="w-picker-item" v-for="(item,index) in range.minutes" :key="index">{{item}}分</view>
  73. </picker-view-column>
  74. <picker-view-column>
  75. <view class="w-picker-item" v-for="(item,index) in range.seconds" :key="index">{{item}}秒</view>
  76. </picker-view-column>
  77. </picker-view>
  78. <!-- <picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
  79. <picker-view-column>
  80. <view class="w-picker-item" v-for="(item,index) in range.years" :key="index">{{item}}年</view>
  81. </picker-view-column>
  82. <picker-view-column v-if="fields=='month'||fields=='day'||fields=='hour'||fields=='minute'||fields=='second'">
  83. <view class="w-picker-item" v-for="(item,index) in range.months" :key="index">{{item}}月</view>
  84. </picker-view-column>
  85. <picker-view-column v-if="fields=='day'||fields=='hour'||fields=='minute'||fields=='second'">
  86. <view class="w-picker-item" v-for="(item,index) in range.days" :key="index">{{item}}日</view>
  87. </picker-view-column>
  88. <picker-view-column v-if="fields=='hour'||fields=='minute'||fields=='second'">
  89. <view class="w-picker-item" v-for="(item,index) in range.hours" :key="index">{{item}}时</view>
  90. </picker-view-column>
  91. <picker-view-column v-if="fields=='minute'||fields=='second'">
  92. <view class="w-picker-item" v-for="(item,index) in range.minutes" :key="index">{{item}}分</view>
  93. </picker-view-column>
  94. <picker-view-column v-if="fields=='second'">
  95. <view class="w-picker-item" v-for="(item,index) in range.seconds" :key="index">{{item}}秒</view>
  96. </picker-view-column>
  97. </picker-view> -->
  98. </view>
  99. </template>
  100. <script>
  101. export default {
  102. data() {
  103. return {
  104. pickVal:[],
  105. range:{
  106. years:[],
  107. months:[],
  108. days:[],
  109. hours:[],
  110. minutes:[],
  111. seconds:[]
  112. },
  113. checkObj:{}
  114. };
  115. },
  116. props:{
  117. itemHeight:{
  118. type:String,
  119. default:"44px"
  120. },
  121. startYear:{
  122. type:[String,Number],
  123. default:""
  124. },
  125. endYear:{
  126. type:[String,Number],
  127. default:""
  128. },
  129. value:{
  130. type:[String,Array,Number],
  131. default:""
  132. },
  133. current:{//是否默认选中当前日期
  134. type:Boolean,
  135. default:false
  136. },
  137. disabledAfter:{//是否禁用当前之后的日期
  138. type:Boolean,
  139. default:false
  140. },
  141. fields:{
  142. type:String,
  143. default:"day"
  144. }
  145. },
  146. watch:{
  147. fields(val){
  148. this.initData();
  149. },
  150. value(val){
  151. this.initData();
  152. }
  153. },
  154. created() {
  155. this.initData();
  156. },
  157. mounted() {
  158. this.initData();
  159. },
  160. methods:{
  161. formatNum(n){
  162. return (Number(n)<10?'0'+Number(n):Number(n)+'');
  163. },
  164. checkValue(value){
  165. let strReg,example
  166. switch(this.fields){
  167. case "year":
  168. strReg=/^\d{4}$/;
  169. example="2019";
  170. break;
  171. case "month":
  172. strReg=/^\d{4}-\d{2}$/;
  173. example="2019-02";
  174. break;
  175. case "day":
  176. strReg=/^\d{4}-\d{2}-\d{2}$/;
  177. example="2019-02-01";
  178. break;
  179. case "hour":
  180. strReg=/^\d{4}-\d{2}-\d{2} \d{2}(:\d{2}){1,2}?$/;
  181. example="2019-02-01 18:00:00或2019-02-01 18";
  182. break;
  183. case "minute":
  184. strReg=/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}(:\d{2}){0,1}?$/;
  185. example="2019-02-01 18:06:00或2019-02-01 18:06";
  186. break;
  187. case "second":
  188. strReg=/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/;
  189. example="2019-02-01 18:06:01";
  190. break;
  191. }
  192. if(!strReg.test(value)){
  193. console.log(new Error("请传入与mode、fields匹配的value值,例value="+example+""))
  194. }
  195. return strReg.test(value);
  196. },
  197. resetData(year,month,day,hour,minute){
  198. let curDate=this.getCurrenDate();
  199. let curFlag=this.current;
  200. let curYear=curDate.curYear;
  201. let curMonth=curDate.curMonth;
  202. let curDay=curDate.curDay;
  203. let curHour=curDate.curHour;
  204. let curMinute=curDate.curMinute;
  205. let curSecond=curDate.curSecond;
  206. let months=[],days=[],hours=[],minutes=[],seconds=[];
  207. let disabledAfter=this.disabledAfter;
  208. let monthsLen=disabledAfter?(year*1<curYear?12:curMonth):12;
  209. let totalDays=new Date(year,month,0).getDate();//计算当月有几天;
  210. let daysLen=disabledAfter?((year*1<curYear||month*1<curMonth)?totalDays:curDay):totalDays;
  211. let hoursLen=disabledAfter?((year*1<curYear||month*1<curMonth||day*1<curDay)?24:curHour+1):24;
  212. let minutesLen=disabledAfter?((year*1<curYear||month*1<curMonth||day*1<curDay||hour*1<curHour)?60:curMinute+1):60;
  213. let secondsLen=disabledAfter?((year*1<curYear||month*1<curMonth||day*1<curDay||hour*1<curHour||minute*1<curMinute)?60:curSecond+1):60;
  214. for(let month=1;month<=monthsLen;month++){
  215. months.push(this.formatNum(month));
  216. };
  217. for(let day=1;day<=daysLen;day++){
  218. days.push(this.formatNum(day));
  219. }
  220. for(let hour=0;hour<hoursLen;hour++){
  221. hours.push(this.formatNum(hour));
  222. }
  223. for(let minute=0;minute<minutesLen;minute++){
  224. minutes.push(this.formatNum(minute));
  225. }
  226. for(let second=0;second<secondsLen;second++){
  227. seconds.push(this.formatNum(second));
  228. }
  229. return{
  230. months,
  231. days,
  232. hours,
  233. minutes,
  234. seconds
  235. }
  236. },
  237. getData(dVal){
  238. //用来处理初始化数据
  239. let curFlag=this.current;
  240. let disabledAfter=this.disabledAfter;
  241. let fields=this.fields;
  242. let curDate=this.getCurrenDate();
  243. let curYear=curDate.curYear;
  244. let curMonthdays=curDate.curMonthdays;
  245. let curMonth=curDate.curMonth;
  246. let curDay=curDate.curDay;
  247. let curHour=curDate.curHour;
  248. let curMinute=curDate.curMinute;
  249. let curSecond=curDate.curSecond;
  250. let defaultDate=this.getDefaultDate();
  251. let startYear=this.getStartDate().getFullYear();
  252. let endYear=this.getEndDate().getFullYear();
  253. //颗粒度,禁用当前之后日期仅对year,month,day,hour生效;分钟秒禁用没有意义,
  254. let years=[],months=[],days=[],hours=[],minutes=[],seconds=[];
  255. let year=dVal[0]*1;
  256. let month=dVal[1]*1;
  257. let day=dVal[2]*1;
  258. let hour=dVal[3]*1;
  259. let minute=dVal[4]*1;
  260. let monthsLen=disabledAfter?(year<curYear?12:curDate.curMonth):12;
  261. let daysLen=disabledAfter?((year<curYear||month<curMonth)?defaultDate.defaultDays:curDay):(curFlag?curMonthdays:defaultDate.defaultDays);
  262. let hoursLen=disabledAfter?((year<curYear||month<curMonth||day<curDay)?24:curHour+1):24;
  263. let minutesLen=disabledAfter?((year<curYear||month<curMonth||day<curDay||hour<curHour)?60:curMinute+1):60;
  264. let secondsLen=disabledAfter?((year<curYear||month<curMonth||day<curDay||hour<curHour||minute<curMinute)?60:curSecond+1):60;
  265. for(let year=startYear;year<=(disabledAfter?curYear:endYear);year++){
  266. years.push(year.toString())
  267. }
  268. for(let month=1;month<=monthsLen;month++){
  269. months.push(this.formatNum(month));
  270. }
  271. for(let day=1;day<=daysLen;day++){
  272. days.push(this.formatNum(day));
  273. }
  274. for(let hour=0;hour<hoursLen;hour++){
  275. hours.push(this.formatNum(hour));
  276. }
  277. for(let minute=0;minute<minutesLen;minute++){
  278. minutes.push(this.formatNum(minute));
  279. }
  280. // for(let second=0;second<(disabledAfter?curDate.curSecond+1:60);second++){
  281. // seconds.push(this.formatNum(second));
  282. // }
  283. for(let second=0;second<60;second++){
  284. seconds.push(this.formatNum(second));
  285. }
  286. return {
  287. years,
  288. months,
  289. days,
  290. hours,
  291. minutes,
  292. seconds
  293. }
  294. },
  295. getCurrenDate(){
  296. let curDate=new Date();
  297. let curYear=curDate.getFullYear();
  298. let curMonth=curDate.getMonth()+1;
  299. let curMonthdays=new Date(curYear,curMonth,0).getDate();
  300. let curDay=curDate.getDate();
  301. let curHour=curDate.getHours();
  302. let curMinute=curDate.getMinutes();
  303. let curSecond=curDate.getSeconds();
  304. return{
  305. curDate,
  306. curYear,
  307. curMonth,
  308. curMonthdays,
  309. curDay,
  310. curHour,
  311. curMinute,
  312. curSecond
  313. }
  314. },
  315. getDefaultDate(){
  316. let value=this.value;
  317. let reg=/-/g;
  318. let defaultDate=value?new Date(value.replace(reg,"/")):new Date();
  319. let defaultYear=defaultDate.getFullYear();
  320. let defaultMonth=defaultDate.getMonth()+1;
  321. let defaultDay=defaultDate.getDate();
  322. let defaultDays=new Date(defaultYear,defaultMonth,0).getDate()*1;
  323. return{
  324. defaultDate,
  325. defaultYear,
  326. defaultMonth,
  327. defaultDay,
  328. defaultDays
  329. }
  330. },
  331. getStartDate(){
  332. let start=this.startYear;
  333. let startDate="";
  334. let reg=/-/g;
  335. if(start){
  336. startDate=new Date(start+"/01/01");
  337. }else{
  338. startDate=new Date("1970/01/01");
  339. }
  340. return startDate;
  341. },
  342. getEndDate(){
  343. let end=this.endYear;
  344. let reg=/-/g;
  345. let endDate="";
  346. if(end){
  347. endDate=new Date(end+"/12/01");
  348. }else{
  349. endDate=new Date();
  350. }
  351. return endDate;
  352. },
  353. getDval(){
  354. let value=this.value;
  355. let fields=this.fields;
  356. let dVal=null;
  357. let aDate=new Date();
  358. let year=this.formatNum(aDate.getFullYear());
  359. let month=this.formatNum(aDate.getMonth()+1);
  360. let day=this.formatNum(aDate.getDate());
  361. let hour=this.formatNum(aDate.getHours());
  362. let minute=this.formatNum(aDate.getMinutes());
  363. let second=this.formatNum(aDate.getSeconds());
  364. if(value){
  365. let flag=this.checkValue(value);
  366. if(!flag){
  367. dVal=[year,month,day,hour,minute,second]
  368. }else{
  369. switch(this.fields){
  370. case "year":
  371. dVal=value?[value]:[];
  372. break;
  373. case "month":
  374. dVal=value?value.split("-"):[];
  375. break;
  376. case "day":
  377. dVal=value?value.split("-"):[];
  378. break;
  379. case "hour":
  380. dVal=[...value.split(" ")[0].split("-"),...value.split(" ")[1].split(":")];
  381. break;
  382. case "minute":
  383. dVal=value?[...value.split(" ")[0].split("-"),...value.split(" ")[1].split(":")]:[];
  384. break;
  385. case "second":
  386. dVal=[...value.split(" ")[0].split("-"),...value.split(" ")[1].split(":")];
  387. break;
  388. }
  389. }
  390. }else{
  391. dVal=[year,month,day,hour,minute,second]
  392. }
  393. return dVal;
  394. },
  395. initData(){
  396. let startDate,endDate,startYear,endYear,startMonth,endMonth,startDay,endDay;
  397. let years=[],months=[],days=[],hours=[],minutes=[],seconds=[];
  398. let dVal=[],pickVal=[];
  399. let value=this.value;
  400. let reg=/-/g;
  401. let range={};
  402. let result="",full="",year,month,day,hour,minute,second,obj={};
  403. let defaultDate=this.getDefaultDate();
  404. let defaultYear=defaultDate.defaultYear;
  405. let defaultMonth=defaultDate.defaultMonth;
  406. let defaultDay=defaultDate.defaultDay;
  407. let defaultDays=defaultDate.defaultDays;
  408. let curFlag=this.current;
  409. let disabledAfter=this.disabledAfter;
  410. let curDate=this.getCurrenDate();
  411. let curYear=curDate.curYear;
  412. let curMonth=curDate.curMonth;
  413. let curMonthdays=curDate.curMonthdays;
  414. let curDay=curDate.curDay;
  415. let curHour=curDate.curHour;
  416. let curMinute=curDate.curMinute;
  417. let curSecond=curDate.curSecond;
  418. let dateData=[];
  419. dVal=this.getDval();
  420. startDate=this.getStartDate();
  421. endDate=this.getEndDate();
  422. startYear=startDate.getFullYear();
  423. startMonth=startDate.getMonth();
  424. startDay=startDate.getDate();
  425. endYear=endDate.getFullYear();
  426. endMonth=endDate.getMonth();
  427. endDay=endDate.getDate();
  428. dateData=this.getData(dVal);
  429. years=dateData.years;
  430. months=dateData.months;
  431. days=dateData.days;
  432. hours=dateData.hours;
  433. minutes=dateData.minutes;
  434. seconds=dateData.seconds;
  435. switch(this.fields){
  436. case "year":
  437. pickVal=disabledAfter?[
  438. dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0
  439. ]:(curFlag?[
  440. years.indexOf(curYear+'')
  441. ]:[
  442. dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0
  443. ]);
  444. range={years};
  445. year=dVal[0]?dVal[0]:years[0];
  446. result=full=`${year}`;
  447. obj={
  448. year
  449. }
  450. break;
  451. case "month":
  452. pickVal=disabledAfter?[
  453. dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
  454. dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0
  455. ]:[
  456. dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
  457. dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0
  458. ];
  459. range={years,months};
  460. year=dVal[0]?dVal[0]:years[0];
  461. month=dVal[1]?dVal[1]:months[0];
  462. result=full=`${year+'-'+month}`;
  463. obj={
  464. year,
  465. month
  466. }
  467. break;
  468. case "day":
  469. console.log(
  470. dVal,curYear,curMonth,curDay,disabledAfter,
  471. years.indexOf(curYear+''),
  472. months.indexOf(this.formatNum(curMonth)),
  473. days.indexOf(this.formatNum(curDay)),
  474. );
  475. pickVal=disabledAfter?[
  476. dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
  477. dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
  478. dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0
  479. ]:[
  480. dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
  481. dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
  482. dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0
  483. ];
  484. console.log(pickVal);
  485. range={years,months,days};
  486. year=dVal[0]?dVal[0]:years[0];
  487. month=dVal[1]?dVal[1]:months[0];
  488. day=dVal[2]?dVal[2]:days[0];
  489. result=full=`${year+'-'+month+'-'+day}`;
  490. obj={
  491. year,
  492. month,
  493. day
  494. }
  495. break;
  496. case "hour":
  497. pickVal=disabledAfter?[
  498. dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
  499. dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
  500. dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
  501. dVal[3]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0
  502. ]:(curFlag?[
  503. years.indexOf(curYear+''),
  504. months.indexOf(this.formatNum(curMonth)),
  505. days.indexOf(this.formatNum(curDay)),
  506. hours.indexOf(this.formatNum(curHour)),
  507. ]:[
  508. dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
  509. dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
  510. dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
  511. dVal[3]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0
  512. ]);
  513. range={years,months,days,hours};
  514. year=dVal[0]?dVal[0]:years[0];
  515. month=dVal[1]?dVal[1]:months[0];
  516. day=dVal[2]?dVal[2]:days[0];
  517. hour=dVal[3]?dVal[3]:hours[0];
  518. result=`${year+'-'+month+'-'+day+' '+hour}`;
  519. full=`${year+'-'+month+'-'+day+' '+hour+':00:00'}`;
  520. obj={
  521. year,
  522. month,
  523. day,
  524. hour
  525. }
  526. break;
  527. case "minute":
  528. pickVal=disabledAfter?[
  529. dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
  530. dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
  531. dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
  532. dVal[3]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0,
  533. dVal[4]&&minutes.indexOf(dVal[4])!=-1?minutes.indexOf(dVal[4]):0
  534. ]:(curFlag?[
  535. years.indexOf(curYear+''),
  536. months.indexOf(this.formatNum(curMonth)),
  537. days.indexOf(this.formatNum(curDay)),
  538. hours.indexOf(this.formatNum(curHour)),
  539. minutes.indexOf(this.formatNum(curMinute)),
  540. ]:[
  541. dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
  542. dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
  543. dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
  544. dVal[3]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0,
  545. dVal[4]&&minutes.indexOf(dVal[4])!=-1?minutes.indexOf(dVal[4]):0
  546. ]);
  547. range={years,months,days,hours,minutes};
  548. year=dVal[0]?dVal[0]:years[0];
  549. month=dVal[1]?dVal[1]:months[0];
  550. day=dVal[2]?dVal[2]:days[0];
  551. hour=dVal[3]?dVal[3]:hours[0];
  552. minute=dVal[4]?dVal[4]:minutes[0];
  553. full=`${year+'-'+month+'-'+day+' '+hour+':'+minute+':00'}`;
  554. result=`${year+'-'+month+'-'+day+' '+hour+':'+minute}`;
  555. obj={
  556. year,
  557. month,
  558. day,
  559. hour,
  560. minute
  561. }
  562. break;
  563. case "second":
  564. pickVal=disabledAfter?[
  565. dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
  566. dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
  567. dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
  568. dVal[3]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0,
  569. dVal[4]&&minutes.indexOf(dVal[4])!=-1?minutes.indexOf(dVal[4]):0,
  570. dVal[5]&&seconds.indexOf(dVal[5])!=-1?seconds.indexOf(dVal[5]):0
  571. ]:(curFlag?[
  572. years.indexOf(curYear+''),
  573. months.indexOf(this.formatNum(curMonth)),
  574. days.indexOf(this.formatNum(curDay)),
  575. hours.indexOf(this.formatNum(curHour)),
  576. minutes.indexOf(this.formatNum(curMinute)),
  577. seconds.indexOf(this.formatNum(curSecond)),
  578. ]:[
  579. dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
  580. dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
  581. dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
  582. dVal[3]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0,
  583. dVal[4]&&minutes.indexOf(dVal[4])!=-1?minutes.indexOf(dVal[4]):0,
  584. dVal[5]&&seconds.indexOf(dVal[5])!=-1?seconds.indexOf(dVal[5]):0
  585. ]);
  586. range={years,months,days,hours,minutes,seconds};
  587. year=dVal[0]?dVal[0]:years[0];
  588. month=dVal[1]?dVal[1]:months[0];
  589. day=dVal[2]?dVal[2]:days[0];
  590. hour=dVal[3]?dVal[3]:hours[0];
  591. minute=dVal[4]?dVal[4]:minutes[0];
  592. second=dVal[5]?dVal[5]:seconds[0];
  593. result=full=`${year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second}`;
  594. obj={
  595. year,
  596. month,
  597. day,
  598. hour,
  599. minute,
  600. second
  601. }
  602. break;
  603. default:
  604. range={years,months,days};
  605. break;
  606. }
  607. this.range=range;
  608. this.checkObj=obj;
  609. this.$emit("change",{
  610. result:result,
  611. value:full,
  612. obj:obj
  613. });
  614. this.$nextTick(()=>{
  615. this.pickVal=pickVal;
  616. })
  617. },
  618. handlerChange(e){
  619. let arr=[...e.detail.value];
  620. let data=this.range;
  621. let year="",month="",day="",hour="",minute="",second="";
  622. let result="",full="",obj={};
  623. let months=null,days=null,hours=null,minutes=null,seconds=null;
  624. let disabledAfter=this.disabledAfter;
  625. year=(arr[0]||arr[0]==0)?data.years[arr[0]]||data.years[data.years.length-1]:"";
  626. month=(arr[1]||arr[1]==0)?data.months[arr[1]]||data.months[data.months.length-1]:"";
  627. day=(arr[2]||arr[2]==0)?data.days[arr[2]]||data.days[data.days.length-1]:"";
  628. hour=(arr[3]||arr[3]==0)?data.hours[arr[3]]||data.hours[data.hours.length-1]:"";
  629. minute=(arr[4]||arr[4]==0)?data.minutes[arr[4]]||data.minutes[data.minutes.length-1]:"";
  630. second=(arr[5]||arr[5]==0)?data.seconds[arr[5]]||data.seconds[data.seconds.length-1]:"";
  631. switch(this.fields){
  632. case "year":
  633. result=full=`${year}`;
  634. obj={
  635. year
  636. };
  637. break;
  638. case "month":
  639. result=full=`${year+'-'+month}`;
  640. if(this.disabledAfter)months=this.resetData(year,month,day,hour,minute).months;
  641. if(months)this.range.months=months;
  642. obj={
  643. year,
  644. month
  645. }
  646. break;
  647. case "day":
  648. result=full=`${year+'-'+month+'-'+day}`;
  649. if(this.disabledAfter){
  650. months=this.resetData(year,month,day,hour,minute).months;
  651. days=this.resetData(year,month,day,hour,minute).days;
  652. }else{
  653. if(year%4==0||(month!=this.checkObj.month)){
  654. days=this.resetData(year,month,day,hour,minute).days;
  655. }
  656. }
  657. if(months)this.range.months=months;
  658. if(days)this.range.days=days;
  659. obj={
  660. year,
  661. month,
  662. day
  663. }
  664. break;
  665. case "hour":
  666. result=`${year+'-'+month+'-'+day+' '+hour}`;
  667. full=`${year+'-'+month+'-'+day+' '+hour+':00:00'}`;
  668. if(this.disabledAfter){
  669. months=this.resetData(year,month,day,hour,minute).months;
  670. days=this.resetData(year,month,day,hour,minute).days;
  671. hours=this.resetData(year,month,day,hour,minute).hours;
  672. }else{
  673. if(year%4==0||(month!=this.checkObj.month)){
  674. days=this.resetData(year,month,day,hour,minute).days;
  675. }
  676. }
  677. if(months)this.range.months=months;
  678. if(days)this.range.days=days;
  679. if(hours)this.range.hours=hours;
  680. obj={
  681. year,
  682. month,
  683. day,
  684. hour
  685. }
  686. break;
  687. case "minute":
  688. full=`${year+'-'+month+'-'+day+' '+hour+':'+minute+':00'}`;
  689. result=`${year+'-'+month+'-'+day+' '+hour+':'+minute}`;
  690. if(this.disabledAfter){
  691. months=this.resetData(year,month,day,hour,minute).months;
  692. days=this.resetData(year,month,day,hour,minute).days;
  693. hours=this.resetData(year,month,day,hour,minute).hours;
  694. minutes=this.resetData(year,month,day,hour,minute).minutes;
  695. }else{
  696. if(year%4==0||(month!=this.checkObj.month)){
  697. days=this.resetData(year,month,day,hour,minute).days;
  698. }
  699. }
  700. if(months)this.range.months=months;
  701. if(days)this.range.days=days;
  702. if(hours)this.range.hours=hours;
  703. if(minutes)this.range.minutes=minutes;
  704. obj={
  705. year,
  706. month,
  707. day,
  708. hour,
  709. minute
  710. };
  711. break;
  712. case "second":
  713. result=full=`${year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second}`;
  714. this.resetData(year,month,day,hour,minute)
  715. if(this.disabledAfter){
  716. months=this.resetData(year,month,day,hour,minute).months;
  717. days=this.resetData(year,month,day,hour,minute).days;
  718. hours=this.resetData(year,month,day,hour,minute).hours;
  719. minutes=this.resetData(year,month,day,hour,minute).minutes;
  720. //seconds=this.resetData(year,month,day,hour,minute).seconds;
  721. }else{
  722. if(year%4==0||(month!=this.checkObj.month)){
  723. days=this.resetData(year,month,day,hour,minute).days;
  724. }
  725. }
  726. if(months)this.range.months=months;
  727. if(days)this.range.days=days;
  728. if(hours)this.range.hours=hours;
  729. if(minutes)this.range.minutes=minutes;
  730. //if(seconds)this.range.seconds=seconds;
  731. obj={
  732. year,
  733. month,
  734. day,
  735. hour,
  736. minute,
  737. second
  738. }
  739. break;
  740. }
  741. this.checkObj=obj;
  742. this.$emit("change",{
  743. result:result,
  744. value:full,
  745. obj:obj
  746. })
  747. }
  748. }
  749. }
  750. </script>
  751. <style lang="scss">
  752. @import "./w-picker.css";
  753. </style>