date-picker.vue 25 KB

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