half-picker.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345
  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.years" :key="index">{{item}}年</view>
  6. </picker-view-column>
  7. <picker-view-column>
  8. <view class="w-picker-item" v-for="(item,index) in range.months" :key="index">{{item}}月</view>
  9. </picker-view-column>
  10. <picker-view-column>
  11. <view class="w-picker-item" v-for="(item,index) in range.days" :key="index">{{item}}日</view>
  12. </picker-view-column>
  13. <picker-view-column>
  14. <view class="w-picker-item" v-for="(item,index) in range.sections" :key="index">{{item}}</view>
  15. </picker-view-column>
  16. </picker-view>
  17. </view>
  18. </template>
  19. <script>
  20. export default {
  21. data() {
  22. return {
  23. pickVal:[],
  24. range:{},
  25. checkObj:{}
  26. };
  27. },
  28. props:{
  29. itemHeight:{
  30. type:String,
  31. default:"44px"
  32. },
  33. startYear:{
  34. type:String,
  35. default:""
  36. },
  37. endYear:{
  38. type:String,
  39. default:""
  40. },
  41. value:{
  42. type:[String,Array,Number],
  43. default:""
  44. },
  45. current:{//是否默认选中当前日期
  46. type:Boolean,
  47. default:false
  48. },
  49. disabledAfter:{//是否禁用当前之后的日期
  50. type:Boolean,
  51. default:false
  52. }
  53. },
  54. watch:{
  55. value(val){
  56. this.initData();
  57. }
  58. },
  59. created() {
  60. this.initData();
  61. },
  62. methods:{
  63. formatNum(n){
  64. return (Number(n)<10?'0'+Number(n):Number(n)+'');
  65. },
  66. checkValue(value){
  67. let strReg=/^\d{4}-\d{2}-\d{2} [\u4e00-\u9fa5]{2}$/,example;
  68. if(!strReg.test(value)){
  69. console.log(new Error("请传入与mode、fields匹配的value值,例value="+example+""))
  70. }
  71. return strReg.test(value);
  72. },
  73. resetData(year,month,day){
  74. let curDate=this.getCurrenDate();
  75. let curFlag=this.current;
  76. let curYear=curDate.curYear;
  77. let curMonth=curDate.curMonth;
  78. let curDay=curDate.curDay;
  79. let curHour=curDate.curHour;
  80. let months=[],days=[],sections=[];
  81. let disabledAfter=this.disabledAfter;
  82. let monthsLen=disabledAfter?(year*1<curYear?12:curMonth):12;
  83. let totalDays=new Date(year,month,0).getDate();//计算当月有几天;
  84. let daysLen=disabledAfter?((year*1<curYear||month*1<curMonth)?totalDays:curDay):totalDays;
  85. let sectionFlag=disabledAfter?((year*1<curYear||month*1<curMonth||day*1<curDay)==true?false:true):(curHour>12==true?true:false);
  86. sections=["上午","下午"];
  87. for(let month=1;month<=monthsLen;month++){
  88. months.push(this.formatNum(month));
  89. };
  90. for(let day=1;day<=daysLen;day++){
  91. days.push(this.formatNum(day));
  92. }
  93. if(sectionFlag){
  94. sections=["上午"];
  95. }
  96. return{
  97. months,
  98. days,
  99. sections
  100. }
  101. },
  102. getData(dVal){
  103. //用来处理初始化数据
  104. let curFlag=this.current;
  105. let disabledAfter=this.disabledAfter;
  106. let curDate=this.getCurrenDate();
  107. let curYear=curDate.curYear;
  108. let curMonthdays=curDate.curMonthdays;
  109. let curMonth=curDate.curMonth;
  110. let curDay=curDate.curDay;
  111. let curHour=curDate.curHour;
  112. let defaultDate=this.getDefaultDate();
  113. let startYear=this.getStartDate().getFullYear();
  114. let endYear=this.getEndDate().getFullYear();
  115. let years=[],months=[],days=[],sections=[];
  116. let year=dVal[0]*1;
  117. let month=dVal[1]*1;
  118. let day=dVal[2]*1;
  119. let monthsLen=disabledAfter?(year<curYear?12:curDate.curMonth):12;
  120. let daysLen=disabledAfter?((year<curYear||month<curMonth)?defaultDate.defaultDays:curDay):(curFlag?curMonthdays:defaultDate.defaultDays);
  121. let sectionFlag=disabledAfter?((year*1<curYear||month*1<curMonth||day*1<curDay)==true?false:true):(curHour>12==true?true:false);
  122. for(let year=startYear;year<=(disabledAfter?curYear:endYear);year++){
  123. years.push(year.toString())
  124. }
  125. for(let month=1;month<=monthsLen;month++){
  126. months.push(this.formatNum(month));
  127. }
  128. for(let day=1;day<=daysLen;day++){
  129. days.push(this.formatNum(day));
  130. }
  131. if(sectionFlag){
  132. sections=["下午"];
  133. }else{
  134. sections=["上午","下午"];
  135. }
  136. return {
  137. years,
  138. months,
  139. days,
  140. sections
  141. }
  142. },
  143. getCurrenDate(){
  144. let curDate=new Date();
  145. let curYear=curDate.getFullYear();
  146. let curMonth=curDate.getMonth()+1;
  147. let curMonthdays=new Date(curYear,curMonth,0).getDate();
  148. let curDay=curDate.getDate();
  149. let curHour=curDate.getHours();
  150. let curSection="上午";
  151. if(curHour>=12){
  152. curSection="下午";
  153. }
  154. return{
  155. curDate,
  156. curYear,
  157. curMonth,
  158. curMonthdays,
  159. curDay,
  160. curHour,
  161. curSection
  162. }
  163. },
  164. getDefaultDate(){
  165. let value=this.value;
  166. let reg=/-/g;
  167. let defaultDate=value?new Date(value.split(" ")[0].replace(reg,"/")):new Date();
  168. let defaultYear=defaultDate.getFullYear();
  169. let defaultMonth=defaultDate.getMonth()+1;
  170. let defaultDay=defaultDate.getDate();
  171. let defaultDays=new Date(defaultYear,defaultMonth,0).getDate()*1;
  172. return{
  173. defaultDate,
  174. defaultYear,
  175. defaultMonth,
  176. defaultDay,
  177. defaultDays
  178. }
  179. },
  180. getStartDate(){
  181. let start=this.startYear;
  182. let startDate="";
  183. let reg=/-/g;
  184. if(start){
  185. startDate=new Date(start+"/01/01");
  186. }else{
  187. startDate=new Date("1970/01/01");
  188. }
  189. return startDate;
  190. },
  191. getEndDate(){
  192. let end=this.endYear;
  193. let reg=/-/g;
  194. let endDate="";
  195. if(end){
  196. endDate=new Date(end+"/12/31");
  197. }else{
  198. endDate=new Date();
  199. }
  200. return endDate;
  201. },
  202. getDval(){
  203. let value=this.value;
  204. let dVal=null;
  205. let aDate=new Date();
  206. let year=this.formatNum(aDate.getFullYear());
  207. let month=this.formatNum(aDate.getMonth()+1);
  208. let day=this.formatNum(aDate.getDate());
  209. let hour=aDate.getHours();
  210. let section="上午";
  211. if(hour>=12)section="下午";
  212. if(value){
  213. let flag=this.checkValue(value);
  214. if(!flag){
  215. dVal=[year,month,day,section]
  216. }else{
  217. let v=value.split(" ");
  218. dVal=[...v[0].split("-"),v[1]];
  219. }
  220. }else{
  221. dVal=[year,month,day,section]
  222. }
  223. return dVal;
  224. },
  225. initData(){
  226. let startDate,endDate,startYear,endYear,startMonth,endMonth,startDay,endDay;
  227. let years=[],months=[],days=[],sections=[];
  228. let dVal=[],pickVal=[];
  229. let value=this.value;
  230. let reg=/-/g;
  231. let range={};
  232. let result="",full="",year,month,day,section,obj={};
  233. let defaultDate=this.getDefaultDate();
  234. let defaultYear=defaultDate.defaultYear;
  235. let defaultMonth=defaultDate.defaultMonth;
  236. let defaultDay=defaultDate.defaultDay;
  237. let defaultDays=defaultDate.defaultDays;
  238. let curFlag=this.current;
  239. let disabledAfter=this.disabledAfter;
  240. let curDate=this.getCurrenDate();
  241. let curYear=curDate.curYear;
  242. let curMonth=curDate.curMonth;
  243. let curMonthdays=curDate.curMonthdays;
  244. let curDay=curDate.curDay;
  245. let curSection=curDate.curSection;
  246. let dateData=[];
  247. dVal=this.getDval();
  248. startDate=this.getStartDate();
  249. endDate=this.getEndDate();
  250. startYear=startDate.getFullYear();
  251. startMonth=startDate.getMonth();
  252. startDay=startDate.getDate();
  253. endYear=endDate.getFullYear();
  254. endMonth=endDate.getMonth();
  255. endDay=endDate.getDate();
  256. dateData=this.getData(dVal);
  257. years=dateData.years;
  258. months=dateData.months;
  259. days=dateData.days;
  260. sections=dateData.sections;
  261. pickVal=disabledAfter?[
  262. dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
  263. dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
  264. dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
  265. dVal[3]&&sections.indexOf(dVal[3])!=-1?sections.indexOf(dVal[3]):0
  266. ]:(curFlag?[
  267. years.indexOf(curYear+''),
  268. months.indexOf(this.formatNum(curMonth)),
  269. days.indexOf(this.formatNum(curDay)),
  270. sections.indexOf(curSection),
  271. ]:[
  272. dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
  273. dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
  274. dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
  275. dVal[3]&&sections.indexOf(dVal[3])!=-1?sections.indexOf(dVal[3]):0
  276. ]);
  277. range={years,months,days,sections};
  278. year=dVal[0]?dVal[0]:years[0];
  279. month=dVal[1]?dVal[1]:months[0];
  280. day=dVal[2]?dVal[2]:days[0];
  281. section=dVal[3]?dVal[3]:sections[0];
  282. result=full=`${year+'-'+month+'-'+day+' '+section}`;
  283. obj={
  284. year,
  285. month,
  286. day,
  287. section
  288. }
  289. this.range=range;
  290. this.checkObj=obj;
  291. this.$nextTick(()=>{
  292. this.pickVal=pickVal;
  293. });
  294. this.$emit("change",{
  295. result:result,
  296. value:full,
  297. obj:obj
  298. })
  299. },
  300. handlerChange(e){
  301. let arr=[...e.detail.value];
  302. let data=this.range;
  303. let year="",month="",day="",section="";
  304. let result="",full="",obj={};
  305. let months=null,days=null,sections=null;
  306. let disabledAfter=this.disabledAfter;
  307. year=(arr[0]||arr[0]==0)?data.years[arr[0]]||data.years[data.years.length-1]:"";
  308. month=(arr[1]||arr[1]==0)?data.months[arr[1]]||data.months[data.months.length-1]:"";
  309. day=(arr[2]||arr[2]==0)?data.days[arr[2]]||data.days[data.days.length-1]:"";
  310. section=(arr[3]||arr[3]==0)?data.sections[arr[3]]||data.sections[data.sections.length-1]:"";
  311. result=full=`${year+'-'+month+'-'+day+' '+section}`;
  312. let resetData=this.resetData(year,month,day);
  313. if(this.disabledAfter){
  314. months=resetData.months;
  315. days=resetData.days;
  316. sections=resetData.sections;
  317. }else{
  318. if(year%4==0||(month!=this.checkObj.month)){
  319. days=resetData.days;
  320. }
  321. }
  322. if(months)this.range.months=months;
  323. if(days)this.range.days=days;
  324. if(sections)this.range.sections=sections;
  325. obj={
  326. year,
  327. month,
  328. day,
  329. section
  330. }
  331. this.checkObj=obj;
  332. this.$emit("change",{
  333. result:result,
  334. value:full,
  335. obj:obj
  336. })
  337. }
  338. }
  339. }
  340. </script>
  341. <style lang="scss">
  342. @import "./w-picker.css";
  343. </style>