dateTime

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

组件结构

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

组件脚本

  1. <script>
  2.     export default {
  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.                 return Array.from(new Array(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 = new Date(fdate);
  96.                 else
  97.                     time = new Date();
  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.                     case 1:
  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.                     case 2:
  117.                         this.value = [0, 0, 0];
  118.                         this.setYears();
  119.                         this.setMonths();
  120.                         this.setDays();
  121.                         break;
  122.                     case 3:
  123.                         this.value = [0, 0];
  124.                         this.setYears();
  125.                         this.setMonths();
  126.                         break;
  127.                     case 4:
  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 = new Date(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);
  162.             },
  163.             setMinutes() {
  164.                 this.minutes = this.generateArray(0, 59);
  165.                 setTimeout(()=> {
  166.                     this.$set(this.value, this.value.length - 1, this.getIndex(this.minutes, this.minute));
  167.                 }, 8);
  168.             },
  169.             show() {
  170.                 setTimeout(() => {
  171.                     this.isShow = true;
  172.                 }, 50);
  173.             },
  174.             hide() {
  175.                 this.isShow = false;
  176.             },
  177.             change(e) {
  178.                 this.value = e.detail.value;
  179.                 switch (this.type) {
  180.                     case 1:
  181.                         this.year = this.years[this.value[0]];
  182.                         this.month = this.months[this.value[1]];
  183.                         this.day = this.days[this.value[2]];
  184.                         this.hour = this.hours[this.value[3]];
  185.                         this.minute = this.minutes[this.value[4]];
  186.                         break;
  187.                     case 2:
  188.                         this.year = this.years[this.value[0]];
  189.                         this.month = this.months[this.value[1]];
  190.                         this.day = this.days[this.value[2]];
  191.                         break;
  192.                     case 3:
  193.                         this.year = this.years[this.value[0]];
  194.                         this.month = this.months[this.value[1]];
  195.                         break;
  196.                     case 4:
  197.                         this.hour = this.hours[this.value[0]];
  198.                         this.minute = this.minutes[this.value[1]];
  199.                         break;
  200.                     default:
  201.                         break;
  202.                 }
  204.             },
  205.             btnFix() {
  206.                 let result = {};
  207.                 let year = this.year;
  208.                 let month = this.formatNum(this.month || 0);
  209.                 let day = this.formatNum(this.day || 0);
  210.                 let hour = this.formatNum(this.hour || 0);
  211.                 let minute = this.formatNum(this.minute || 0);
  212.                 switch (this.type) {
  213.                     case 1:
  214.                         result = {
  215.                             year: year,
  216.                             month: month,
  217.                             day: day,
  218.                             hour: hour,
  219.                             minute: minute,
  220.                             result: `${year}-${month}-${day} ${hour}:${minute}`
  221.                         }
  222.                         break;
  223.                     case 2:
  224.                         result = {
  225.                             year: year,
  226.                             month: month,
  227.                             day: day,
  228.                             result: `${year}-${month}-${day}`
  229.                         }
  230.                         break;
  231.                     case 3:
  232.                         result = {
  233.                             year: year,
  234.                             month: month,
  235.                             result: `${year}-${month}`
  236.                         }
  237.                         break;
  238.                     case 4:
  239.                         result = {
  240.                             hour: hour,
  241.                             minute: minute,
  242.                             result: `${hour}:${minute}`
  243.                         }
  244.                         break;
  245.                     default:
  246.                         break;
  247.                 }
  248.                 this.$emit("confirm", result);
  249.                 this.hide();
  250.             }
  251.         }
  252.     };
  253. </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