时间选择器datePicker

*****前端实现时间的选择功能，这个不同于传统的手工的代码书写，这里我们可以引用不同的组件，直接实现时间选择功能。这里提供两种功能来实现时间选择。
方法一：
调用Element-ui 中的DateTimePicker 日期时间选择器组件或者DatePicker 日期选择器组件：
http://element-cn.eleme.io/#/zh-CN/component/datetime-picker#datetimepicker-ri-qi-shi-jian-xuan-ze-qi
例如：

<template>
  <div class="block">
    <span class="demonstration">默认</span>
    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">带快捷选项</span>
    <el-date-picker
      v-model="value2"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions1">
    </el-date-picker>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
      };
    }
  };
</script>

具体的参数设置说明，可以参考element-ui对应的API文胆。
方法二：
vant--------Picker与Popup 选择器和遮罩的完美结合：这个方法最要是实现在页面底端显示时间选择功能。
这里我们举一个简单例子：
这里主要是在vue的工程里面引用
1.在main.js 里引入

import { Popup } from 'vant';
Vue.use(Popup);
import { Picker } from 'vant';
 
Vue.use(Picker);

2.在新建的vue文件中可以写入：

 <van-popup v-model="show" position="bottom" :overlay="true">
            <van-picker show-toolbar title="请选择区域代理城市" :columns="columns" @cancel="onCancel" @confirm="onConfirm" @change="onChange" />
  </van-popup>

position:你可以自己定义 top or bottom or center 当然一般是bottom
:overlay:false or true看个人需求
title:根据自己需求定义
3.在页面的js文件中输入：

最终效果显示：

方法二的参考网址：https://blog.csdn.net/ZXD1314520/article/details/81871140