vue element-ui date-picker 日期选择器控件设置时间范围限制可选的开始时间和结束时间

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

开始日期和结束日期都必须是今天之前；
先选择开始日期，那么结束日期必须在开始日期之后，即只能选择开始日期之后的日期；
先选择结束日期，那么开始日期必须在结束日期之前，即只能选择结束日期之前的日期；

三个条件是【且】的关系。

实现效果：

实现代码：
vue template 代码：

script 代码

//时间限制，符合日期先后顺序的实际情况
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.addDrillRecordRow.endTime) {
            return (
              time.getTime() > Date.now() - 8.64e6 ||
              time.getTime() > this.addDrillRecordRow.endTime  /*开始日期要在选择的结束日期之前*/
          // return time.getTime() < Date.now() - 8.64e7; /*今天及以后*/
          return time.getTime() > Date.now() - 8.64e6; /*今天及之前，注意数字不一样*/
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.addDrillRecordRow.startTime) {
            return (
              time.getTime() > Date.now() - 8.64e6 ||
              time.getTime() < this.addDrillRecordRow.startTime /*结束日期要在选择的开始日期之后*/
          return time.getTime() > Date.now() - 8.64e6; /*今天及之前*/
这里的addDrillRecordRow是表单数据的绑定对象。 
原文链接：https://blog.csdn.net/acoolgiser/article/details/106378033
				vue2-daterange-picker
 基于Vue2日期范围选择器（无jQuery）
 该组件尚处于初期阶段，因此，如果出现问题，请写一个问题或创建一个请求请求。
演示和用法
您可以在此处查看演示：  : 
# install via npm
npm i vue2-daterange-picker --save
 禁用日期
 导出单个组件
运行本地演示
npm run docs:dev
				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）浏览器
				使用elementUI的日期选择器，有一个选择日期范围的模板。也就是使用一个选择器但是包括了开始时间和结束时间，那么如何获取到开始时间和结束时间？
elementUI组件库连接–需要自取
1、首先，在el-date中，需要注意v-model设置，themetime是自定义的名字，随便写一个就行
<el-date-picker
            v-model="ruleForm.themetime" 
            type="datetimerange"
2. 先选择开始日期，那么结束日期必须在开始日期之后，即只能选择开始日期之后的日期；
3. 先选择结束日期，那么开始日期必须在结束日期之前，即只能选择结束日期之前的日期；
三个条件是【且】的关系。
实现效果：
小编操作和写文日期5月27日
				vue element-ui （DatePicker)日期选择器获取开始时间和结束时间以及显示默认时间
1.DatePicker 日期选择器获取开始时间和结束时间
页面效果：
<el-date-picker v-model="valuedate" type="monthrange" align="right" 
     unlink-panels range-separator="至"
      start-placeholder="开始月份" end-placeholder="结束月份" 
				element-ui是一个基于vue.js的组件库，其中包含了多种功能优秀、易于使用的组件。其中，日期时间选择器（DatePicker）是比较常用的一个组件，在使用中可能会遇到日期格式化的问题。
element-ui中的日期时间选择器支持多种日期格式，可以通过props中的format属性来指定日期格式，例如"yyyy-MM-dd"表示日期格式为年-月-日。format属性采用的是与moment.js相同的日期格式化字符串。
除了format属性，还可以通过value-format属性来指定传递给父组件的值的日期格式。例如，如果想要将日期转化为Unix时间戳，可以将value-format属性设置为"timestamp"。
在某些情况下，可能需要将日期存储为字符串，此时可以将value-format属性设置为"yyyy-MM-dd"或其他所需的日期格式。
如果需要将日期时间选择器的初始值设置为当前时间，可以使用JavaScript中的Date对象进行初始化，并将其传递给组件。
总的来说，element-ui的日期时间选择器提供了多种格式化选项，可以根据自己的需求灵活设置，具有较高的可定制性。

vue element-ui date-picker 日期选择器控件 设置时间范围 限制可选的开始时间和结束时间

vue element-ui date-picker 日期选择器控件设置时间范围限制可选的开始时间和结束时间