el-date-picker中日期选择器时间限制，限制选择30天时间范围且不大于当前时间 ； 时间范围只能选择1天；时间范围在某一段时间内

• 一、限制选择30天时间范围，且不大于当前时间
• 二、未来时间不能选择
• 三、时间范围在某一段时间内
• 四，时间范围是三个月

一、限制选择30天时间范围，且不大于当前时间

  <el-date-picker
     v-model="productForm.time"
     size="small"
     class="customDate"
     type="daterange"
     range-separator="~"
     :clearable="false"
     :picker-options="pickerOptions"
     @change="getTimeChange"
     value-format="yyyy/MM/dd"
     start-placeholder="开始日期"
     end-placeholder="结束日期"
 ></el-date-picker>
data(){
  return{
	pickerMinDate: '', //获取开始选择时间
	pickerMaxDate: '', //获取结束选择时间
	pickerOptions: {
	//时间范围选择控制
	onPick: ({ maxDate, minDate }) => {
		if (minDate) {
		this.pickerMinDate = minDate.getTime()
		if (maxDate) {
		this.pickerMinDate = ''
		this.pickerMaxDate = maxDate.getTime()
	disabledDate: time => {
		const day32 = 32 * 24 * 3600 * 1000
		if (this.pickerMinDate !== '') {
		let maxTime = this.pickerMinDate + day32
		if (maxTime > new Date()) {
		  maxTime = new Date()
		return time.getTime() > maxTime || time.getTime() > Date.now() - 86400000
		if (this.pickerMaxDate !== '' && !this.pickerMinDate) {
		let minTime = this.pickerMaxDate - day32
		return time.getTime() < minTime || time.getTime() > Date.now() - 86400000
		return time.getTime() > Date.now() - 86400000
二、未来时间不能选择
 
  <el-date-picker
     :picker-options="pickerOptions"
 ></el-date-picker>
data(){
  return{
   pickerOptions: {
     disabledDate(time) {
          return time.getTime() > Date.now() - 86400000 // 选当前时间之前的时间
三、时间范围在某一段时间内
 
  <el-date-picker
     :picker-options="pickerOptions"
 ></el-date-picker>
data(){
  return{
	pickerOptions: {
	           disabledDate: time => {
	               return (
	                   time.getTime() < new Date(this.dayFrom).getTime() ||
	                   time.getTime() > new Date(this.dayTo).getTime()
四，时间范围是三个月
 
<el-form-item label="月份：" prop="time">
    <el-date-picker
        v-model="searchData.time"
        type="monthrange"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        @change="chooseDate"
        :picker-options="pickerOptions"
    ></el-date-picker>
</el-form-item>
startDate: '',
pickerOptions: {
    // onPick：选中日期时的回调函数，在这里对选中的日期进行处理{maxDate：后选中日期；minDate：第一个选中的日期}
    onPick: ({ maxDate, minDate }) => {
        this.startDate = minDate && minDate.getTime()
        if (maxDate) {
            // 选中后一个时，要把第一个的赋值清空
            this.startDate = ''
    disabledDate: time => {
        // 选中第一个后，后一个前后3个月可选，超出的不可选，超出当前天也不可选，这里的月份按需求设定
        const minTime = new Date(this.startDate).setMonth(
            new Date(this.startDate).getMonth() - 3
        const maxTime = new Date(this.startDate).setMonth(
            new Date(this.startDate).getMonth() + 3
        return (
            time.getTime() > Date.now() ||
            (this.startDate
                ? time.getTime() < minTime || time.getTime() > maxTime
                : false)
链接: https://blog.csdn.net/qq_15827053/article/details/102500105.
 链接: https://blog.csdn.net/weixin_52950296/article/details/111179477.
 时间范围一天：链接: http://m.bubuko.com/infodetail-3720077.html.
 链接: https://www.cnblogs.com/pzw23/p/13031924.html.
 链接: https://www.cnblogs.com/jzyu/p/14626494.html
不需要moment.js
tl;博士
通过执行npm install @wojtekmaj/react-daterange-picker或yarn add @wojtekmaj/react-daterange-picker 。
 通过添加import DateRangePicker from '@wojtekmaj/react-daterange-picker'来import DateRangePicker from '@wojtekmaj/react-daterange-picker' 。
 通过添加<DateRangePicker> 。 使用onChange道具获取新值。
可以在sample目录中找到一个最小的演示页面。
寻找时间选择器或日期时间
				
在使用 el-date-picker 组件时，可以通过设置 "type" 属性来控制日期选择的类型。如果要限制只能选择一天，可以将 "type" 设置为 "date"。例如：
<el-date-picker v-model="dateValue" type="date"></el-date-picker>
这样，用户只能选择日期而不能选择时间。
// el-date-picker
&amp;amp;amp;amp;amp;lt;el-date-picker
       v-model=&amp;amp;amp;amp;quot;value&amp;amp;amp;amp;quot;
       type=&amp;amp;amp;amp;quot;date&amp;amp;amp;amp;quot; 
       placeholde
				
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）浏览器
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
				
日期时间选择器如何限制最多选择30天，其余时间置灰
 <el-form ref="form"  :model="form" label-position="right" label-width="180px"  size="small" >
     <el-row>
          <el-col :span="8">
              <el-form-item prop="taskDate" label="时间">
				
可以在 el-date-picker 中使用 disabled-date 选项，设置一个函数来判断当前选择的日期是否被禁止。例如：
<el-date-picker v-model="date" :disabled-date="disabledDate"></el-date-picker>
methods: {
    disabledDate(date) {
        var now = new Date()
        now.setDate(now.getDate() - 1)
        return date < now
另外，可以使用 el-date-picker 的时间范围选项，设置一个时间范围，如：
<el-date-picker v-model="date" :picker-options="pickerOptions"></el-date-picker>
data() {
    return {
        pickerOptions: {
            disabledDate: this.disabledDate,
            shortcuts: [{
                text: '三天后',
                onClick(picker) {
                    var end = new Date()
                    end.setTime(end.getTime() + 3600 * 1000 * 24 * 3)
                    picker.$emit('pick', [new Date(), end])
这里的时间跨度就是不超过三天。