dateTime

日期时间选择器:picker-view扩展,日期时间选择器。

组件结构

  1. <template>
  2. <viewclass="tui-datetime-picker">
  3. <viewclass="tui-mask" :class="{ 'tui-mask-show': isShow }" @touchmove.stop.prevent="stop"catchtouchmove="stop" @tap="hide"></view>
  4. <viewclass="tui-header" :class="{ 'tui-show': isShow }">
  5. <viewclass="tui-picker-header" @touchmove.stop.prevent="stop"catchtouchmove="stop">
  6. <viewclass="tui-btn-picker" :style="{ color: cancelColor }"hover-class="tui-opacity" :hover-stay-time="150"
  7. @click="hide">取消</view>
  8. <viewclass="tui-btn-picker" :style="{ color: color }"hover-class="tui-opacity" :hover-stay-time="150" @click="btnFix">确定</view>
  9. </view>
  10. <viewclass="tui-picker-body">
  11. <picker-view :value="value" @change="change"class="tui-picker-view">
  12. <picker-view-columnv-if="!reset && type!=4">
  13. <viewclass="tui-column-item"v-for="(item,index) in years" :key="index">
  14. {{ item }}<textclass="tui-text"></text>
  15. </view>
  16. </picker-view-column>
  17. <picker-view-columnv-if="!reset && type!=4">
  18. <viewclass="tui-column-item"v-for="(item,index) in months" :key="index">
  19. {{ formatNum(item)}}<textclass="tui-text"></text>
  20. </view>
  21. </picker-view-column>
  22. <picker-view-columnv-if="!reset && (type==1 || type==2)">
  23. <viewclass="tui-column-item"v-for="(item,index) in days" :key="index">
  24. {{ formatNum(item) }}<textclass="tui-text"></text>
  25. </view>
  26. </picker-view-column>
  27. <picker-view-columnv-if="!reset && (type==1 || type==4)">
  28. <viewclass="tui-column-item"v-for="(item,index) in hours" :key="index">
  29. {{ formatNum(item) }}<textclass="tui-text"></text>
  30. </view>
  31. </picker-view-column>
  32. <picker-view-columnv-if="!reset && (type==1 || type==4)">
  33. <viewclass="tui-column-item"v-for="(item,index) in minutes" :key="index">
  34. {{ formatNum(item) }}<textclass="tui-text"></text>
  35. </view>
  36. </picker-view-column>
  37. </picker-view>
  38. </view>
  39. </view>
  40. </view>
  41. </template>

组件脚本

  1. <script>
  2. exportdefault{
  3. name:"tuiDatetime",
  4. props:{
  5. //1-日期+时间(年月日+时分) 2-日期(年月日) 3-日期(年月) 4-时间(时分)
  6. type:{
  7. type:Number,
  8. default:1
  9. },
  10. //年份区间
  11. startYear:{
  12. type:Number,
  13. default:1980
  14. },
  15. //年份区间
  16. endYear:{
  17. type:Number,
  18. default:2050
  19. },
  20. //"取消"字体颜色
  21. cancelColor:{
  22. type:String,
  23. default:"#888"
  24. },
  25. //"确定"字体颜色
  26. color:{
  27. type:String,
  28. default:"#5677fc"
  29. },
  30. //设置默认显示日期 2019-08-01 || 2019-08-01 17:01 || 2019/08/01
  31. setDateTime:{
  32. type:String,
  33. default:""
  34. }
  35. },
  36. data(){
  37. return{
  38. isShow:false,
  39. years:[],
  40. months:[],
  41. days:[],
  42. hours:[],
  43. minutes:[],
  44. year:0,
  45. month:0,
  46. day:0,
  47. hour:0,
  48. minute:0,
  49. startDate:"",
  50. endDate:"",
  51. value:[0,0,0,0,0],
  52. reset:false
  53. };
  54. },
  55. mounted(){
  56. this.initData();
  57. },
  58. computed:{
  59. yearOrMonth(){
  60. return`${this.year}-${this.month}`
  61. },
  62. propsChange(){
  63. return`${this.setDateTime}-${this.type}-${this.startYear}-${this.endYear}`
  64. }
  65. },
  66. watch:{
  67. yearOrMonth(){
  68. this.setDays();
  69. },
  70. propsChange(){
  71. this.reset =true
  72. setTimeout(()=>{
  73. this.initData()
  74. },10);
  75. }
  76. },
  77. methods:{
  78. stop(){},
  79. formatNum:function(num){
  80. return num <10?"0"+ num : num +"";
  81. },
  82. generateArray:function(start, end){
  83. returnArray.from(newArray(end +1).keys()).slice(start)
  84. },
  85. getIndex:function(arr, val){
  86. let index = arr.indexOf(val);
  87. return~index ? index :0
  88. },
  89. //日期时间处理
  90. initSelectValue(){
  91. let fdate =this.setDateTime.replace(/\-/g,'/');
  92. fdate = fdate && fdate.indexOf("/")==-1?`2020/01/01 ${fdate}`: fdate
  93. let time =null;
  94. if(fdate)
  95. time =newDate(fdate);
  96. else
  97. time =newDate();
  98. this.year = time.getFullYear()
  99. this.month = time.getMonth()+1;
  100. this.day = time.getDate();
  101. this.hour = time.getHours();
  102. this.minute = time.getMinutes();
  103. },
  104. initData(){
  105. this.initSelectValue()
  106. this.reset =false
  107. switch(this.type){
  108. case1:
  109. this.value =[0,0,0,0,0];
  110. this.setYears();
  111. this.setMonths();
  112. this.setDays();
  113. this.setHours();
  114. this.setMinutes();
  115. break;
  116. case2:
  117. this.value =[0,0,0];
  118. this.setYears();
  119. this.setMonths();
  120. this.setDays();
  121. break;
  122. case3:
  123. this.value =[0,0];
  124. this.setYears();
  125. this.setMonths();
  126. break;
  127. case4:
  128. this.value =[0,0];
  129. this.setHours();
  130. this.setMinutes();
  131. break;
  132. default:
  133. break;
  134. }
  135. },
  136. setYears(){
  137. this.years =this.generateArray(this.startYear,this.endYear);
  138. setTimeout(()=>{
  139. this.$set(this.value,0,this.getIndex(this.years,this.year));
  140. },8);
  141. },
  142. setMonths(){
  143. this.months =this.generateArray(1,12);
  144. setTimeout(()=>{
  145. this.$set(this.value,1,this.getIndex(this.months,this.month));
  146. },8);
  147. },
  148. setDays(){
  149. if(this.type ==3||this.type ==4)return;
  150. let totalDays =newDate(this.year,this.month,0).getDate();
  151. this.days =this.generateArray(1, totalDays);
  152. setTimeout(()=>{
  153. this.$set(this.value,2,this.getIndex(this.days,this.day));
  154. },8);
  155. },
  156. setHours(){
  157. this.hours =this.generateArray(0,23);
  158. setTimeout(()=>{
  159. this.$set(this.value,this.value.length -2,this.getIndex(this.hours,this.hour));
  160. },8);
  161. },
  162. setMinutes(){
  163. this.minutes =this.generateArray(0,59);
  164. setTimeout(()=>{
  165. this.$set(this.value,this.value.length -1,this.getIndex(this.minutes,this.minute));
  166. },8);
  167. },
  168. show(){
  169. setTimeout(()=>{
  170. this.isShow =true;
  171. },50);
  172. },
  173. hide(){
  174. this.isShow =false;
  175. },
  176. change(e){
  177. this.value = e.detail.value;
  178. switch(this.type){
  179. case1:
  180. this.year =this.years[this.value[0]];
  181. this.month =this.months[this.value[1]];
  182. this.day =this.days[this.value[2]];
  183. this.hour =this.hours[this.value[3]];
  184. this.minute =this.minutes[this.value[4]];
  185. break;
  186. case2:
  187. this.year =this.years[this.value[0]];
  188. this.month =this.months[this.value[1]];
  189. this.day =this.days[this.value[2]];
  190. break;
  191. case3:
  192. this.year =this.years[this.value[0]];
  193. this.month =this.months[this.value[1]];
  194. break;
  195. case4:
  196. this.hour =this.hours[this.value[0]];
  197. this.minute =this.minutes[this.value[1]];
  198. break;
  199. default:
  200. break;
  201. }
  202. },
  203. btnFix(){
  204. let result ={};
  205. let year =this.year;
  206. let month =this.formatNum(this.month ||0);
  207. let day =this.formatNum(this.day ||0);
  208. let hour =this.formatNum(this.hour ||0);
  209. let minute =this.formatNum(this.minute ||0);
  210. switch(this.type){
  211. case1:
  212. result ={
  213. year: year,
  214. month: month,
  215. day: day,
  216. hour: hour,
  217. minute: minute,
  218. result:`${year}-${month}-${day} ${hour}:${minute}`
  219. }
  220. break;
  221. case2:
  222. result ={
  223. year: year,
  224. month: month,
  225. day: day,
  226. result:`${year}-${month}-${day}`
  227. }
  228. break;
  229. case3:
  230. result ={
  231. year: year,
  232. month: month,
  233. result:`${year}-${month}`
  234. }
  235. break;
  236. case4:
  237. result ={
  238. hour: hour,
  239. minute: minute,
  240. result:`${hour}:${minute}`
  241. }
  242. break;
  243. default:
  244. break;
  245. }
  246. this.$emit("confirm", result);
  247. this.hide();
  248. }
  249. }
  250. };
  251. </script>

组件样式

... 此处省略n行

脚本说明

 props: 
     "type" : 1-日期+时间(年月日+时分) 2-日期(年月日) 3-日期(年月) 4-时间(时分),类型:"Number",默认值:1    
     "startYear" :年份区间,起始年份,类型:"Number",默认值:1980    
     "endYear" :年份区间,结束年份,类型:"Number",默认值:2050
     "cancelColor":"取消"字体颜色,类型:"String",默认值:"#888"
     "color":"确定"字体颜色,类型:"String",默认值:"#5677fc"
     "setDateTime":设置默认显示日期 2019-08-01 || 2019-08-01 17:01 || 2019/08/01 ,类型:"String",默认值:""

 methods:
   "generateArray":生成数组
   "getIndex":获取索引
   "initSelectValue":初始化日期时间处理
   "initData":初始化数据
   "setYears":设置年份
   "setMonths":设置月份
   "setDays":设置日期
   "setHours":设置小时
   "setMinutes":设置分钟
   "show":显示,打开选择器
   "hide":隐藏,关闭选择器
   "change":picker-view change事件,选择数据
   "btnFix":确定事件,传回选择的日期时间

示例

... 此处省略n行,下载源码查看

预览图

dateTime 日期时间选择器 - 图1