range-picker.vue 9.8 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 class="w-picker-flex2">
  5. <view class="w-picker-item" v-for="(item,index) in range.fyears" :key="index">{{item}}年</view>
  6. </picker-view-column>
  7. <picker-view-column class="w-picker-flex2">
  8. <view class="w-picker-item" v-for="(item,index) in range.fmonths" :key="index">{{item}}月</view>
  9. </picker-view-column>
  10. <picker-view-column class="w-picker-flex2">
  11. <view class="w-picker-item" v-for="(item,index) in range.fdays" :key="index">{{item}}日</view>
  12. </picker-view-column>
  13. <picker-view-column class="w-picker-flex1">
  14. <view class="w-picker-item">-</view>
  15. </picker-view-column>
  16. <picker-view-column class="w-picker-flex2">
  17. <view class="w-picker-item" v-for="(item,index) in range.tyears" :key="index">{{item}}年</view>
  18. </picker-view-column>
  19. <picker-view-column class="w-picker-flex2">
  20. <view class="w-picker-item" v-for="(item,index) in range.tmonths" :key="index">{{item}}月</view>
  21. </picker-view-column>
  22. <picker-view-column class="w-picker-flex2">
  23. <view class="w-picker-item" v-for="(item,index) in range.tdays" :key="index">{{item}}日</view>
  24. </picker-view-column>
  25. </picker-view>
  26. </view>
  27. </template>
  28. <script>
  29. export default {
  30. data() {
  31. return {
  32. pickVal:[],
  33. range:{},
  34. checkObj:{}
  35. };
  36. },
  37. props:{
  38. itemHeight:{
  39. type:String,
  40. default:"44px"
  41. },
  42. value:{
  43. type:[String,Array],
  44. default(){
  45. return []
  46. }
  47. },
  48. current:{//是否默认选中当前日期
  49. type:Boolean,
  50. default:false
  51. },
  52. startYear:{
  53. type:[String,Number],
  54. default:1970
  55. },
  56. endYear:{
  57. type:[String,Number],
  58. default:new Date().getFullYear()
  59. }
  60. },
  61. watch:{
  62. value(val){
  63. this.initData();
  64. }
  65. },
  66. created() {
  67. this.initData();
  68. },
  69. methods:{
  70. formatNum(n){
  71. return (Number(n)<10?'0'+Number(n):Number(n)+'');
  72. },
  73. checkValue(value){
  74. let strReg=/^\d{4}-\d{2}-\d{2}$/,example="2020-04-03";
  75. if(!strReg.test(value[0])||!strReg.test(value[1])){
  76. console.log(new Error("请传入与mode匹配的value值,例["+example+","+example+"]"))
  77. }
  78. return strReg.test(value[0])&&strReg.test(value[1]);
  79. },
  80. resetToData(fmonth,fday,tyear,tmonth){
  81. let range=this.range;
  82. let tmonths=[],tdays=[];
  83. let yearFlag=tyear!=range.tyears[0];
  84. let monthFlag=tyear!=range.tyears[0]||tmonth!=range.tmonths[0];
  85. let ttotal=new Date(tyear,tmonth,0).getDate();
  86. for(let i=yearFlag?1:fmonth*1;i<=12;i++){
  87. tmonths.push(this.formatNum(i))
  88. }
  89. for(let i=monthFlag?1:fday*1;i<=ttotal;i++){
  90. tdays.push(this.formatNum(i))
  91. }
  92. return{
  93. tmonths,
  94. tdays
  95. }
  96. },
  97. resetData(fyear,fmonth,fday,tyear,tmonth){
  98. let fyears=[],fmonths=[],fdays=[],tyears=[],tmonths=[],tdays=[];
  99. let startYear=this.startYear;
  100. let endYear=this.endYear;
  101. let ftotal=new Date(fyear,fmonth,0).getDate();
  102. let ttotal=new Date(tyear,tmonth,0).getDate();
  103. for(let i=startYear*1;i<=endYear;i++){
  104. fyears.push(this.formatNum(i))
  105. }
  106. for(let i=1;i<=12;i++){
  107. fmonths.push(this.formatNum(i))
  108. }
  109. for(let i=1;i<=ftotal;i++){
  110. fdays.push(this.formatNum(i))
  111. }
  112. for(let i=fyear*1;i<=endYear;i++){
  113. tyears.push(this.formatNum(i))
  114. }
  115. for(let i=fmonth*1;i<=12;i++){
  116. tmonths.push(this.formatNum(i))
  117. }
  118. for(let i=fday*1;i<=ttotal;i++){
  119. tdays.push(this.formatNum(i))
  120. }
  121. return {
  122. fyears,
  123. fmonths,
  124. fdays,
  125. tyears,
  126. tmonths,
  127. tdays
  128. }
  129. },
  130. getData(dVal){
  131. let start=this.startYear*1;
  132. let end=this.endYear*1;
  133. let value=dVal;
  134. let flag=this.current;
  135. let aToday=new Date();
  136. let tYear,tMonth,tDay,tHours,tMinutes,tSeconds,pickVal=[];
  137. let initstartDate=new Date(start.toString());
  138. let endDate=new Date(end.toString());
  139. if(start>end){
  140. initstartDate=new Date(end.toString());
  141. endDate=new Date(start.toString());
  142. };
  143. let startYear=initstartDate.getFullYear();
  144. let startMonth=initstartDate.getMonth()+1;
  145. let endYear=endDate.getFullYear();
  146. let fyears=[],fmonths=[],fdays=[],tyears=[],tmonths=[],tdays=[],returnArr=[],startDVal=[],endDVal=[];
  147. let curMonth=flag?value[1]*1:(startDVal[1]*1+1);
  148. let curMonth1=flag?value[5][1]*1:(value[5]*1+1);
  149. let totalDays=new Date(value[0],value[1],0).getDate();
  150. let totalDays1=new Date(value[4],value[5],0).getDate();
  151. for(let s=startYear;s<=endYear;s++){
  152. fyears.push(this.formatNum(s));
  153. };
  154. for(let m=1;m<=12;m++){
  155. fmonths.push(this.formatNum(m));
  156. };
  157. for(let d=1;d<=totalDays;d++){
  158. fdays.push(this.formatNum(d));
  159. };
  160. for(let s=value[0]*1;s<=endYear;s++){
  161. tyears.push(this.formatNum(s));
  162. };
  163. if(value[4]*1>value[0]*1){
  164. for(let m=1;m<=12;m++){
  165. tmonths.push(this.formatNum(m));
  166. };
  167. for(let d=1;d<=totalDays1;d++){
  168. tdays.push(this.formatNum(d));
  169. };
  170. }else{
  171. for(let m=value[1]*1;m<=12;m++){
  172. tmonths.push(this.formatNum(m));
  173. };
  174. for(let d=value[2]*1;d<=totalDays1;d++){
  175. tdays.push(this.formatNum(d));
  176. };
  177. };
  178. pickVal=[
  179. fyears.indexOf(value[0])==-1?0:fyears.indexOf(value[0]),
  180. fmonths.indexOf(value[1])==-1?0:fmonths.indexOf(value[1]),
  181. fdays.indexOf(value[2])==-1?0:fdays.indexOf(value[2]),
  182. 0,
  183. tyears.indexOf(value[4])==-1?0:tyears.indexOf(value[4]),
  184. tmonths.indexOf(value[5])==-1?0:tmonths.indexOf(value[5]),
  185. tdays.indexOf(value[6])==-1?0:tdays.indexOf(value[6])
  186. ];
  187. return {
  188. fyears,
  189. fmonths,
  190. fdays,
  191. tyears,
  192. tmonths,
  193. tdays,
  194. pickVal
  195. }
  196. },
  197. getDval(){
  198. let value=this.value;
  199. let fields=this.fields;
  200. let dVal=null;
  201. let aDate=new Date();
  202. let fyear=this.formatNum(aDate.getFullYear());
  203. let fmonth=this.formatNum(aDate.getMonth()+1);
  204. let fday=this.formatNum(aDate.getDate());
  205. let tyear=this.formatNum(aDate.getFullYear());
  206. let tmonth=this.formatNum(aDate.getMonth()+1);
  207. let tday=this.formatNum(aDate.getDate());
  208. if(value&&value.length>0){
  209. let flag=this.checkValue(value);
  210. if(!flag){
  211. dVal=[fyear,fmonth,fday,"-",tyear,tmonth,tday]
  212. }else{
  213. dVal=[...value[0].split("-"),"-",...value[1].split("-")];
  214. }
  215. }else{
  216. dVal=[fyear,fmonth,fday,"-",tyear,tmonth,tday]
  217. }
  218. return dVal;
  219. },
  220. initData(){
  221. let range=[],pickVal=[];
  222. let result="",full="",obj={};
  223. let dVal=this.getDval();
  224. let dateData=this.getData(dVal);
  225. let fyears=[],fmonths=[],fdays=[],tyears=[],tmonths=[],tdays=[];
  226. let fyear,fmonth,fday,tyear,tmonth,tday;
  227. pickVal=dateData.pickVal;
  228. fyears=dateData.fyears;
  229. fmonths=dateData.fmonths;
  230. fdays=dateData.fdays;
  231. tyears=dateData.tyears;
  232. tmonths=dateData.tmonths;
  233. tdays=dateData.tdays;
  234. range={
  235. fyears,
  236. fmonths,
  237. fdays,
  238. tyears,
  239. tmonths,
  240. tdays,
  241. }
  242. fyear=range.fyears[pickVal[0]];
  243. fmonth=range.fmonths[pickVal[1]];
  244. fday=range.fdays[pickVal[2]];
  245. tyear=range.tyears[pickVal[4]];
  246. tmonth=range.tmonths[pickVal[5]];
  247. tday=range.tdays[pickVal[6]];
  248. obj={
  249. fyear,
  250. fmonth,
  251. fday,
  252. tyear,
  253. tmonth,
  254. tday
  255. }
  256. result=`${fyear+'-'+fmonth+'-'+fday+'至'+tyear+'-'+tmonth+'-'+tday}`;
  257. this.range=range;
  258. this.checkObj=obj;
  259. this.$nextTick(()=>{
  260. this.pickVal=pickVal;
  261. });
  262. this.$emit("change",{
  263. result:result,
  264. value:result.split("至"),
  265. obj:obj
  266. })
  267. },
  268. handlerChange(e){
  269. let arr=[...e.detail.value];
  270. let result="",full="",obj={};
  271. let year="",month="",day="",hour="",minute="",second="",note=[],province,city,area;
  272. let checkObj=this.checkObj;
  273. let days=[],months=[],endYears=[],endMonths=[],endDays=[],startDays=[];
  274. let mode=this.mode;
  275. let col1,col2,col3,d,a,h,m;
  276. let xDate=new Date().getTime();
  277. let range=this.range;
  278. let fyear=range.fyears[arr[0]]||range.fyears[range.fyears.length-1];
  279. let fmonth=range.fmonths[arr[1]]||range.fmonths[range.fmonths.length-1];
  280. let fday=range.fdays[arr[2]]||range.fdays[range.fdays.length-1];
  281. let tyear=range.tyears[arr[4]]||range.tyears[range.tyears.length-1];
  282. let tmonth=range.tmonths[arr[5]]||range.tmonths[range.tmonths.length-1];
  283. let tday=range.tdays[arr[6]]||range.tdays[range.tdays.length-1];
  284. let resetData=this.resetData(fyear,fmonth,fday,tyear,tmonth);
  285. if(fyear!=checkObj.fyear||fmonth!=checkObj.fmonth||fday!=checkObj.fday){
  286. arr[4]=0;
  287. arr[5]=0;
  288. arr[6]=0;
  289. range.tyears=resetData.tyears;
  290. range.tmonths=resetData.tmonths;
  291. range.tdays=resetData.tdays;
  292. tyear=range.tyears[0];
  293. checkObj.tyears=range.tyears[0];
  294. tmonth=range.tmonths[0];
  295. checkObj.tmonths=range.tmonths[0];
  296. tday=range.tdays[0];
  297. checkObj.tdays=range.tdays[0];
  298. }
  299. if(fyear!=checkObj.fyear||fmonth!=checkObj.fmonth){
  300. range.fdays=resetData.fdays;
  301. };
  302. if(tyear!=checkObj.tyear){
  303. arr[5]=0;
  304. arr[6]=0;
  305. let toData=this.resetToData(fmonth,fday,tyear,tmonth);
  306. range.tmonths=toData.tmonths;
  307. range.tdays=toData.tdays;
  308. tmonth=range.tmonths[0];
  309. checkObj.tmonths=range.tmonths[0];
  310. tday=range.tdays[0];
  311. checkObj.tdays=range.tdays[0];
  312. };
  313. if(tmonth!=checkObj.tmonth){
  314. arr[6]=0;
  315. let toData=this.resetToData(fmonth,fday,tyear,tmonth);
  316. range.tdays=toData.tdays;
  317. tday=range.tdays[0];
  318. checkObj.tdays=range.tdays[0];
  319. };
  320. result=`${fyear+'-'+fmonth+'-'+fday+'至'+tyear+'-'+tmonth+'-'+tday}`;
  321. obj={
  322. fyear,fmonth,fday,tyear,tmonth,tday
  323. }
  324. this.checkObj=obj;
  325. this.$nextTick(()=>{
  326. this.pickVal=arr;
  327. })
  328. this.$emit("change",{
  329. result:result,
  330. value:result.split("至"),
  331. obj:obj
  332. })
  333. }
  334. }
  335. }
  336. </script>
  337. <style lang="scss">
  338. @import "./w-picker.css";
  339. </style>