element DatePicker 日期选择器多选模式触发点击时间事件

14 篇文章 1 订阅

这里有个功能,当点击时间或者取消选择时间,要触发事件来进行操作。但是当时间组件type为dates时就不能点击触发chang事件,点击确定按钮才会触发。
这里在是对这个进行监听来触发事件
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<el-date-picker
				  v-model="shangkedata"
				  type="dates"
				  clearable
				  placeholder="选择日期"
				  format="yyyy - MM - dd"
				  value-format="yyyy-MM-dd"
				  style="width: 400px;" size="mini">
				</el-date-picker>

注释写在监听中了,通俗易懂

watch:{
		shangkedata:{
			 handler(val, oldVal){
				let that = this
					//if(this.xiu == 2) 这一步可以不考虑,是自己项目的需要
					if(this.xiu == 2){
						var result = []
						//that.daqdes 是接口初始化时的时间,
						//这里进行的判断当我点击获取的数据,小于接口的数据 就进行删除
						if(val.length < that.daqdes.length){
							//用两个数组进行比较,如果我点击获取的数据,和接口比较,不存在的话,取出接口数据的那个进行删除
							for (let i = 0; i < that.daqdes.length; i++) {
							    if (val.indexOf(that.daqdes[i].date) == -1) {
							        result.push(that.daqdes[i])
							    }
							}
							this.$confirm('是否删除当天的课程', '提示', {
								  confirmButtonText: '确定',
								  cancelButtonText: '取消',
								  type: 'warning'
								}).then(() => {
									let parms = {
										courseIDs:result[0].id
									}
									Delete(parms).then(res=>{
										that.ids = [];
										that.checkboxGroup2 = [];
										that.getInfo();
										this.$message({
											type: 'success',
											message: res.data.msg
										});
									})
								}).catch(() => {
								  this.$message({
									type: 'info',
									message: '已取消删除'
								  });          
								});
							
							//这里就是我点击的数组长度大于接口中的数组,就是判断为新增
						}else if(val.length > that.daqdes.length){
							let str1 = '';
							   for (let i = 0; i < that.checkboxGroup2.length; i++) {
							       if (i <that.checkboxGroup2.length - 1) {
							           str1 += that.checkboxGroup2[i] + ",";
							       } else {
							           str1 += that.checkboxGroup2[i];
							       }
							}
							
							let numID = val[val.length-1]
							
							this.$confirm('是否添加当天的课程', '提示', {
								  confirmButtonText: '确定',
								  cancelButtonText: '取消',
								  type: 'warning'
								}).then(() => {
									that.shangchuanPIC = that.shangchuanPIC.replace(that.picDoma,'')
									let parms = {
										no:this.$route.query.no,
										type:that.Stateval  == '课程' ? 2 : that.Stateval == '活动' ? 1  : that.Stateval,
										name:that.KeName,
										roomID:that.Activitynumber,
										price:that.price,
										maxCount:that.orderNumber,
										state:that.condition == '启用' ? 0 : that.condition == '禁用' ? 1 : that.condition,
										startTime:that.Startdata,
										endTime:that.Enddata,
										dates:numID,
										remark:that.remark,
										addAdmin:that.fabuName,
										pic:that.shangchuanPIC,
										tagIDs:str1,
									}
									Add(parms).then(res=>{
										if(res.data.state == 10001){
											that.ids = [];
											that.checkboxGroup2 = [];
											that.getInfo();
											this.$message({
												type: 'success',
												message: '添加成功'
											});
										}else{
											this.$message({
												type: 'success',
												message: res.data.msg
											});
										}
									})
								}).catch(() => {
								  this.$message({
									type: 'info',
									message: '已取消添加'
								  });          
								});
						}
					}
				
				    
				
				
			},
			deep:true
		}
	},
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element UI日期选择器DatePicker)有筛选功能,可以通过设置属性来实现。具体步骤如下: 1. 在需要使用DatePicker的组件引入DatePicker组件: ``` <template> <div> <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" @change="handleChange" ></el-date-picker> </div> </template> <script> import { DatePicker } from 'element-ui'; export default { components: { 'el-date-picker': DatePicker, }, data() { return { date: '', // 绑定的日期pickerOptions: { // 筛选选项 shortcuts: [ { text: '最近一周', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); picker.$emit('pick', [start, end]); }, }, { text: '最近一个月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); picker.$emit('pick', [start, end]); }, }, { text: '最近三个月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); picker.$emit('pick', [start, end]); }, }, ], }, }; }, methods: { handleChange(value) { console.log(value); }, }, }; </script> ``` 2. 在data定义一个pickerOptions对象,用于设置筛选选项。在本例,定义了三个快捷筛选选项:最近一周、最近一个月、最近三个月。当用户选择某个选项时,会触发onClick事件,设置选择的日期范围。 3. 在el-date-picker组件上设置pickerOptions属性,指定筛选选项为pickerOptions对象。 4. 监听DatePicker的change事件,当用户选择日期触发handleChange方法,可以在该方法获取用户选择的日期值。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值