Element Datepicker 根据接口返回的多个日期数据禁用日期

最新推荐文章于 2023-10-27 15:05:05 发布
最新推荐文章于 2023-10-27 15:05:05 发布
阅读量944 收藏 2
点赞数 5
分类专栏： Element UI VUE 文章标签： vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/crazybai0001/article/details/127622633
版权

日期范围选择器在后台管理系统中使用频率非常高，在有些需求需要禁用日期选择器的某个日期或某些连续的日期段，本文中需要禁用多个日期（可能是单个日期、也可能是多个连续日期，这多个日期是后端接口的，所以禁用的数量、禁用的日期值都不动态的，本文记录、分享这种情况的具体实现。

1、接口返回的数据及结构

2、html代码

设置了picker-options属性，这个属性的值是一个对象（timeRangePickerOptions）

<el-form-item label="结算周期" prop="settlementCycle">
    <el-date-picker v-model="formData.settlementCycle" type="daterange" :picker-options="timeRangePickerOptions"></el-date-picker>
</el-form-item>

3、timeRangePickerOptions对象

在data中定义timeRangePickerOptions对象，在timeRangePickerOptions对象中声明disabledDate属性，此属性调用disabledDate方法（方法名称自定义），在此方法中实现日期选择器指定日期的禁用


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  crazybai0001
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    5
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
elementUI中的日期选择器（DatePicker）根据返回时间禁用

				
			

			

				

					一个技术垃圾站
				

				

					12-03
					
					2006
					
				

			

		

		

			
				
elementUI的日期选择器中的disabledDate属性可以设置禁用时间，但是有的时候会出现当后台返回的不是时间段而是时间点时，禁用方法如下↓
//首先设置想要禁用的时间
 data() {
      return {
        value2: '',
		pickerOptions: {},
		dateParam:[
			"2019-12-08 00:00:00",
			"2...

			
		

	



                

              
                



	

		

			

				
					
vue+ElementUI日期选择器实现禁用多时间段

				
			

			

				

					Anita的博客
				

				

					06-06
					
					3339
					
				

			

		

		

			
				
文章目录前言一、引入elementui1.npm下载插件2.引入elementUI2.1 全局引用2.2 按需引用，需要下载babel2.3引入ElementUI的日期选择器DatePicker二、实现多时间段禁用总结

前言
本文将讲解如何在vue中使用elementui的日期选择器，如何同时禁用多个时间段，以及终止日期不能选择起始日期之前的日期。这里以订房选择日期为例，效果如下。
1.选择起始日期（已被预订的日期不能选）:

2.选择终止日期（入住日期是6/11,则退房日期不能选11号之前）：

一、引

			
		

	



                


  
              

                


	

		

			

				
					
Elementui日期选择器，datarange设置多个禁用日期

				
			

			

				

					weixin_52121639的博客
				

				

					12-07
					
					1472
					
				

			

		

		

			
				
我们在使用elementui的日期选择器时，常常需要请求后端的数据，然后根据后端的回传来确定多个禁用的日期，实现类似于下图的效果： 后端传输过来的数据为类似“2022-01-01”这样的字符串，需要先使用new Date("2022-01-01")转化为日期对象具体代码如下：





踩过的坑：1.在 disabledDate 中this是一个undefined，因此需要用 var _this=this 将this提前保存起来2.在javascript中，foreach是一个同步函数（搞不懂为什么这样设计

			
		

	





	

		

			

				
					
ElementUI日期选择器实现禁用多时间段

				
			

			

				

					weixin_45168482的博客
				

				

					06-25
					
					1969
					
				

			

		

		

			
				
禁用时间段为后端返回数据

产品需求为：
后台数据中返回时间段，在选择开始日期时为不可选状态。

当开始日期选定后，
1、截止日期输入框中早于当前日期前的日期禁用
2、截止日期输入框中如果有已经禁用的日期，禁用日期中从最早的一天开始之后的日期全部禁用，只能选择开始日期当天~禁用日期中最早的一天的前一天
3、截止日期输入框中如果没有已经禁用的日期，则开始日期当天和后续的日期都可以选择
如上图，我选择的是17号那一天，那么在这里只有17-22号之前可选，后面需全部禁用掉

下面上代码：
组件：
		<el

			
		

	



		

			
		



	

		

			

				
					
element el-date-picker 禁用多个时间段

				
			

			

				

					天蚕土豆丝的博客
				

				

					11-17
					
					2972
					
				

			

		

		

			
				
项目需求要在联动的日期选择器里禁用后端返回的多个时间段，element官方案例中只禁用一个，而且是写死的。所以自己百度加处理实现了这个功能。
1.data中 pickerOption: {
disabledDate: function (date) { // 禁止选择今天之前的日期
const today = new Date().toLocaleDateString()
return date < new Date(today)
}
}
这个是禁用当前时间的，我需要这个功能就带着了
2.添加后端返回

			
		

	





	

		

			

				
					
elementUI中两个时间选择器的禁用

				
			

			

				

					weixin_42418445的博客
				

				

					05-18
					
					1352
					
				

			

		

		

			
				
在项目中遇到根据时间筛选数据还是用的比较多的，每次都要翻官网或者是百度，不如自己写一个

比如说像这样的，那我们肯定是希望说在使用的过程中，选择开始时间之后，结束时间的范围只能大于开始时间；选择结束时间之后，开始时间只能小于结束时间。需求明确，开干
<el-date-picker
   v-model="starTime"
    type="date"
    placeholder="选择日期"
    :picker-options="startDatePicker">
</el-d

			
		

	





	

		

			

				
					
js多皮肤网页日期控件

				
			

			

				

					05-18
				

			

		

		

			
				
 element: document.getElementById('datepicker'), // 选择要添加日期选择器的元素  skin: 'skin-name' // 指定皮肤名称  });  ```  3. **事件监听**：可以监听日期选择的事件，以便在用户选择日期后执行相应的操作...

			
		

	





	

		

			

				
					
mootools实现同页面不同日期选择效果

				
			

			

				

					06-06
				

			

		

		

			
				
这可能涉及到对多个日期输入框的独立控制，或者是在不同的日期选择场景下展示不同的用户界面。  描述中的"多种不同的"暗示我们需要考虑不同的日期选择样式和行为。例如，一个日期选择器可能是简单的日历弹窗，另一个...

			
		

	





	

		

			

				
					
中英文日期选择器

				
			

			

				

					06-06
				

			

		

		

			
				
在IT领域，尤其是在网页开发和用户界面设计...在实际开发中，可以选用现有的开源库如jQuery UI、Bootstrap Datepicker、Angular Material等，它们通常已经考虑了上述的很多细节，只需根据项目需求进行配置和定制即可。

			
		

	





	

		

			

				
					
日期插件

				
			

			

				

					08-18
				

			

		

		

			
				
其可能包含多个预设的皮肤样式，同时也允许用户自定义颜色和布局，以适应各种项目需求。  7. **开发与调试**  开发日期插件时，需要注意兼容性测试、性能优化和无障碍访问（例如键盘导航和屏幕阅读器支持）。对于...

			
		

	





	

		

			

				
					
6个不同JS日期控件及使用方法

				
			

			

				

					07-04
				

			

		

		

			
				
然后，通过`$("#element").datepicker()`方法为输入框添加日期选择功能。你可以通过配置选项定制样式、日期格式、禁用日期等，例如：  ```javascript  $("#dateInput").datepicker({  dateFormat: "yy-mm-dd",  ...

			
		

	





	

		

			

				
					
elementui日期组件自定义日期选项picker-options

				
			

			

				

					qq_26311665的博客
				

				

					03-05
					
					5394
					
				

			

		

		

			
				
elementui日期组件自定义日期选项picker-options

			
		

	





	

		

			

				
					
el-date-picker中自定义快捷选项picker-options，动态设置禁用日期

				
			

			

				

					ZMJ_QQ的博客
				

				

					01-05
					
					5640
					
				

			

		

		

			
				
1.需求

在table表格中，有后端传回的List，每一条list数据中都有一个发生日期occur_time，点击报告延期出现历史记录对话框，点击申请延期后除开一个填写信息的对话框。用户可以选择的计划完日期只能是当前这个list中发生日期再加30天之后的日期，因此要在picker-options中设置disabledDate。

			
		

	





	

		

			

				
					
elementUI 日期选择器，动态禁用日期的可选性

				
			

			

				

					weixin_44265726的博客
				

				

					06-08
					
					689
					
				

			

		

		

			
				
想要实现如下功能，有两个日期选择框（起始日期和截止日期）例如起始日期选中6.8号，则截止日期6.8号前的时间不可选择（效果如下图）具体实现流程上代码，给当前选框添加 pickerOptions和focus方法。checkStarttime方法中对截止时间进行进行禁用。在data中定义一个空的对象pickerOptions。如上代码便可实现对日期选择器的动态禁用。

			
		

	





	

		

			

				
					
Element el-date-picker 组件多个日期/时间相互限制

				
			

			

				

					Shivy_的博客
				

				

					01-06
					
					2742
					
				

			

		

		

			
				
Element  el-date-picker 组件多个日期/时间相互限制

			
		

	





	

		

			

				
					
element中的el-date-picker组件，设置禁止选择时间范围

					
最新发布

				
			

			

				

					weixin_67140738的博客
				

				

					10-27
					
					508
					
				

			

		

		

			
				
【代码】element中的el-date-picker组件，设置禁止选择时间范围。

			
		

	





	

		

			

				
					
element 时间(el-date-picker)动态修改type

				
			

			

				

					XIAOERDS的博客
				

				

					08-21
					
					891
					
				

			

		

		

			
				
动态的切换el-date-picker的type

			
		

	





	

		

			

				
					
elementui-plus中el-date-picker禁选日期

				
			

			

				

					搞代码的博客
				

				

					04-17
					
					2752
					
				

			

		

		

			
				
elementui-plus中el-date-picker禁选当前时间之后的时间(disabledDate)

			
		

	





	

		

			

				
					
element el-time-picker 时间段动态禁用 禁用时间段

				
			

			

				

					xiaoheisboy的博客
				

				

					06-06
					
					4697
					
				

			

		

		

			
				
element el-time-picker 时间段动态禁用 禁用时间段
// value-format 时间格式
//picker-options 绑定禁用时间段  // 需要默认值
<el-time-picker  value-format="HH:mm:ss"
v-model="TimeHour":picker-options="{ selectableRange:DisApplyTimeHours }" placeholder="时间点">
</el-time-picker>

			
		

	





	

		

			

				
					
react antd DatePicker  根据默认值请求接口 以及选择后的日期展示数据的接口

				
			

			

				

					07-11
				

			

		

		

			
				
若要在 React Ant Design（antd）的 DatePicker 组件中根据默认值请求接口，并在选择日期后展示相关数据，你可以按照以下步骤进行操作：

1. 首先，确保你已经安装了所需的依赖包。在项目根目录下，运行以下命令安装所需依赖：
```bash
npm install antd moment axios
```

2. 在你的 React 组件中，引入需要的库和组件：
```jsx
import React, { useEffect, useState } from 'react';
import { DatePicker, Button } from 'antd';
import moment from 'moment';
import axios from 'axios';
```

3. 创建一个函数组件，并在其中定义状态变量来存储选择的日期和相关数据：
```jsx
const DateDataDisplay = () => {
  const [selectedDate, setSelectedDate] = useState(moment()); // 默认为当前日期
  const [data, setData] = useState([]);
```

4. 使用 useEffect 钩子函数来发送请求并更新数据。在依赖项数组中添加 `selectedDate`，以确保在选择日期后触发重新请求：
```jsx
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(`your_api_endpoint?date=${selectedDate.format('YYYY-MM-DD')}`);
        setData(response.data);
      } catch (error) {
        console.error(error);
      }
    };
    fetchData();
  }, [selectedDate]);
```
确保将 `'your_api_endpoint'` 替换为你实际的数据接口地址。

5. 在渲染部分，使用 DatePicker 组件来选择日期，并将选择的日期更新到状态变量中：
```jsx
  return (
    <div>
      <DatePicker defaultValue={selectedDate} onChange={date => setSelectedDate(date)} />
      <Button onClick={() => setData([])}>Clear Data</Button> {/* 可选：添加一个按钮来清除数据 */}
      {/* 在这里展示数据 */}
    </div>
  );
};
```

以上是一个简单的示例，展示了如何在 React Ant Design 的 DatePicker 组件中根据默认值请求接口，并在选择日期后展示相关数据。请根据你的实际需求进行适当的调整和修改。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值