总结一下日期控件实现开始日期、结束日期的选择范围限制，以便更符合实际情况。

1、开始时间和结束时间都不能选 当前日期 之后的时间。（当前时间：2022年5月16日）
2、先选开始时间的话，结束时间是在开始时间的后一周内选择，也就是不能选开始时间之前的日期并且对开始时间之后的日期也加了一个限制。
3、先选结束时间的话，开始时间也是在结束时间的前一周内选择，也就是不能选结束时间之后的日期并且对结束时间之前的日期也加了一个限制。

vue template 代码：

  <el-form-item label="开始时间"  required>
    <el-date-picker
       :picker-options="pickerOptionsStart"
       clearable
       size="small"
       style="width: 200px"
       v-model="pullForm.startTime"
       format="yyyy-MM-dd HH:mm:ss"
       value-format="yyyy-MM-dd HH:mm:ss"
       type="datetime"
       placeholder="选择开始时间"
    </el-date-picker>
  </el-form-item>
  <el-form-item label="结束时间"  required>
     <el-date-picker
       :picker-options="pickerOptionsEnd"
       clearable
       size="small"
       style="width: 200px"
       v-model="pullForm.endTime"
       format="yyyy-MM-dd HH:mm:ss"
       value-format="yyyy-MM-dd HH:mm:ss"
       type="datetime"
       placeholder="选择结束时间"
     </el-date-picker>
   </el-form-item>
script 代码：
 
data() {
    return {
       //时间限制，符合日期先后顺序的实际情况
      pickerOptionsStart: {
        disabledDate: (time) => {
          let sevenDays = 6 * 24 * 3600 * 1000;  //6天
          if (this.pullForm.endTime) {
            return (
              time.getTime() > Date.now() - 8.64e6 ||
              //开始日期要在选择的结束日期之前,大于结束时间的日期不能选
              time.getTime() > new Date(this.pullForm.endTime).getTime() ||
              //先选结束时间，在结束时间七天之前的不能选（因为包括自身这一天，所以是减去六天）
              time.getTime() < new Date(this.pullForm.endTime).getTime() - sevenDays
          return time.getTime() > Date.now() - 8.64e6; //今天及之前
      pickerOptionsEnd: {
        disabledDate: (time) => {
          let sevenDays = 6 * 24 * 3600 * 1000;
          if (this.pullForm.startTime) {
            return (
              time.getTime() > Date.now() - 8.64e6 ||
              //结束日期要在选择的开始日期之后,小于开始时间的日期不能选
              time.getTime() < new Date(this.pullForm.startTime).getTime() ||
              //先选开始时间，在开始时间七天之后的不能选（因为包括自身这一天，所以是加上六天）
              time.getTime() > new Date(this.pullForm.startTime).getTime() + sevenDays
          return time.getTime() > Date.now() - 8.64e6; //今天及之前
我参考了下面的两篇文章：
 
文章1：vue element-ui date-picker 日期选择器控件 设置时间范围 限制可选的开始时间和结束时间
 文章2：ElementUi 中 日期时间插件DatePicker 限制结束时间大于开始时间且开始时间小于此刻
 
 
文章1里面加完那个时间限制不生效，于是我找到了文章二，改了之后就可以用了。（仅仅是弱鸡记录一下，欢迎大家一起交流）
 
当我们在实用ElementUI组件完成项目的时候可能会遇到这样的需求，比如：
新建一个活动，需要定义活动的时间范围；
因此我们在新建活动的操作过程中需要选择一段时间区间以及活动名称等信息提交，新建完成；
网页上出现了新建好的活动，其他人想查看详细信息，打开页面，发现时间区间并没有实现回填！
2.问题分析
时间信息没有回填，首先要检查，后台数据返回情况以及页面上字段信息是否有差异等细节；
如果没有以上的情况，那就是我碰到的这种情况了，
后端数据返回没有差异，而且页面字段也没有错，其他的信息也正常回填，唯独时间不回填，同时也伴随一次回填后续不回填等诸多情况。总结来说就是：页面与数据
				
VueRangedatePicker日期选择器，具有范围选择演示https://bliblidotcom.github.io/vue-rangedate-picker/demo/安装npm install --save vue VueRangedatePicker日期选择器，具有范围选择演示https://bliblidotcom.github.io/vue -rangedate-picker / demo /安装npm install --save vue-rangedate-picker用法捆绑程序（Webpack，汇总）从'vue'导入Vue从'vue-rangedate-picker'导入VueRangedatePicker Vue.use（VueRangedatePicker）浏览器
				
vue el-date-picker使用总结
  vue开发中，时间选择是一个常用的功能，最近用到el-date-picker，总结下设置默认值，及获取当前值的功能。
 <el-date-picker
        v-model="value2"
        type="daterange"
        :picker-options="pickerOptions"
        range...
<div class="userInfo annTit">
    <el-form-item label="开始时间">
        <el-date-picker type="datetime"
                        :clearable="false"
                        v-mode...
<el-date-picker v-model="selectMonth" type="month" placeholder="选择月"   @change="jobSearch" value-format="yyyy-MM"></el-date-picker>
js代码:
<script>
export default {...
ES6模块/ CommonJS
 import VueCtkDateTimePicker from 'vue-ctk-date-time-picker' ;
import 'vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css' ;
Vue . component ( 'VueCtkDateTimePicker' , VueCtkDateTimePicker ) ;
 < VueCtkDateTimePicker
				
Vue 日期控件(el-date-picker)回显异常及其原理分析
最近在跟一个项目，项目用的element-ui + vue ，做一个新功能的时候，用element-ui的diolag作为一个弹出层，用于数据的新增以及修改，diolag中用了el-date-picker日期控件，首次选择新增完成后，不管是再次新增或者修改，重新选择日期回显都无法改变视图显示时间，但其value已经更新。
 代码如下：
<el-date-picker v-model="rentalForm.rentSd"  typ
				
在 vue.js 中使用 element-ui 的 el-date-picker 时可以通过设置 "picker-options" 来限制日期选择范围。具体使用方法如下:
<el-date-picker v-model="yourDate" :picker-options="pickerOptions"></el-date-picker>
data() {
  return {
    pickerOptions: {
      disabledDate(time) {
        // time 为一个时间对象
        return time.getTime() < Date.now() - 8.64e7 // 不能选择当天之前的日期
picker-options属性中需要传入一个函数，用来判断当前选择的日期是否在限制范围内，满足条件会返回 true，不满足条件会返回 false。
上面的例子是限制不能选择当天之前的日期，大家可以根据实际需求来改变其中的函数。