【ElenmentUI el-date-picker日期选择器，结束时间不得早于开始时间，且只能选择距开始时间指定天数的日期】

场景：

1、开始时间不得晚于结束时间；结束时间不得早于开始时间；

2、开始时间与结束时间之间，有可选择的天数间隔，只可选择间隔日期内的日期；

例如：设置间隔时间为5天；日期的取值范围，如下：

2022-05-26 00:00:00——2022-05-30 23:59:59

2022-05-26 10:00:00——2022-05-31 10:00:00

效果：

完整代码：

<template><div><el-button @click="dialogVisible = true">打开</el-button><el-dialogtitle="提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"><el-form ref="form" :model="form" :rules="rules" label-width="120px"><el-form-item label="开始时间" prop="start"><el-date-pickertype="datetime"placeholder="请输入开始时间"v-model="form.start"style="width: 100%"value-format="yyyy-MM-dd HH:mm:ss"@change="ksTime"></el-date-picker></el-form-item><el-form-item label="结束时间" prop="end"><el-date-pickertype="datetime"placeholder="请输入结束时间"v-model="form.end"style="width: 100%"value-format="yyyy-MM-dd HH:mm:ss":picker-options="pickerEndOptions"></el-date-picker></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button type="primary" @click="onsubmit('form')">确 定</el-button><el-button @click="close('form')">取 消</el-button></span></el-dialog></div>
</template><script>
export default {watch: {'form.end':{handler(newValue, oldValue) {if(newValue && this.form.start){const st = this.form.start.split(' ')[1];//检测两个日期是否为同一天const datesAreOnSameDay = (first, second) =>first.getFullYear() === second.getFullYear() &&first.getMonth() === second.getMonth() &&first.getDate() === second.getDate();// 1、如果是同一天的话，时间不能早于开始时间；// 2、如果是最后一天的话，时间不能晚于开始时间；if(datesAreOnSameDay(new Date(newValue), new Date(this.form.start))){this.pickerEndOptions.selectableRange = [`${st} - 23:59:59`];}else if(datesAreOnSameDay(new Date(new Date(this.form.start).getTime()+1000*60*60*24*this.optionalDate), new Date(newValue))){this.pickerEndOptions.selectableRange = [`00:00:00 - ${st}`];}else{this.pickerEndOptions.selectableRange = [`00:00:00 - 23:59:59`];}}}} },data() {return {// 间隔天数optionalDate:5,// 日期限制pickerEndOptions: {disabledDate: (time) => {if (this.form.start) {const st = this.form.start.split(' ')[1];let dateTime = new Date(this.form.start);let startDateTime = dateTime.setDate(dateTime.getDate() - (st=='00:00:00'? 0: 1));let endDateTime = dateTime.setDate(dateTime.getDate() + (st=='00:00:00'?this.optionalDate-1:this.optionalDate+1));return (time.getTime() < new Date(startDateTime).getTime() ||time.getTime() > new Date(endDateTime).getTime());}},// 限制时间selectableRange: []},dialogVisible: false,form: {start: "",end: "",},rules: {start: [{required: true,message: "开始时间不能为空",trigger: ["blur", "change"],},],end: [{required: true,message: "结束时间不能为空",trigger: ["blur", "change"],},],},};},methods: {// 选择开始日期ksTime(){this.form.start && (this.form.end = '')},// 关闭弹窗的二次确认handleClose(done) {this.$confirm("确认关闭？").then((_) => {this.close('form');done();}).catch((_) => {});},// 提交onsubmit(formName) {this.$refs[formName].validate((valid) => {if (valid) {console.log({ ...this.form });this.close(formName);} else {console.log("error submit!!");return false;}});},// 关闭close(formName) {// 重置表单this.$nextTick(() => {this.$refs[formName].resetFields();});this.dialogVisible = false;},}
};
</script><style scoped>
</style>

【ElenmentUI el-date-picker日期选择器，结束时间不得早于开始时间，且只能选择距开始时间指定天数的日期】相关推荐

vue-element日期选择器（默认显示当前年月日，并且只能选择当前及当前之前的日期）
页面执行效果如下: //年|月|日可分别选择并默认显示当前年月日 //只能选择当前年之前的年月日 <el-date-pickerv-model="value1"type=&q ...
顶级的 Bootstrap 日期选择器和时间选择器插件（附免费下载链接）
顶级的 Bootstrap 日期选择器和时间选择器插件 Bootstrap的Datepicker元素是一种用户友好和直观的方式,可以轻松选择日期.它可用于移动端和PC端,还可以选择以 "从右 ...
通过日期选择器输入时间并判断年龄（周岁）
今天的我特别的高产,已经写了三篇文章了,主要就是乘着空闲把最近遇到的问题都记录下来老规矩,先上图如果年龄小于0,则提示错误 xml文件就不贴了,很简单实现这个功能主要用两个方法,一个是写一个计算 ...
elment ui 时间组件（el-date-picker）限制只能选择当前时间之前的时间(包括时分秒的限制)
elment ui 时间组件(el-date-picker)限制只能选择当前时间之前的时间(包括时分秒的限制) 先上效果图: 如图当前是2022-04-07 10:43; 当前时间以后的时间不让选择, ...
vue 日期选择器默认时间_vue-datepicker
vue-datepicker 基于 Vue 的日期/时间选择组件. 安装 NodeJS 环境 (commonjs) npm i @hyjiacan/vue-datepicker 或者 yarn add ...
element 时间选择器限制时分秒_关于elementUI里日期选择器禁用时间的一些小技巧...
DatePicker日期选择器算是日常开发中用得比较多的插件之一了,特别是做一些后台管理系统,选择时间.日期也是特别的方便,相比于原生的input中的date,elementUI中的日期选择器显得更加 ...
Flutter 日期选择器与时间选择器
更多文章请查看 lutter从入门到精通 1 日期选择器 //设置默认显示的日期为当前DateTime initialDate = DateTime.now();void showDefaultYe ...
android双日期选择器,AndroidPicker 安卓选择器类库，包括日期选择器、时间选择器、单项选择器、双项选择器、城市地址选择器、车牌号选择器 @codeKK Android开源站...
安卓选择器类库,包括日期及时间选择器(可设置范围).单项选择器(可用于性别.职业.学历.星座等).城市地址选择器(分省级.地级及县级).数字选择器(可用于年龄.身高.体重.温度等).双项选择器.颜色选 ...
vue 日期选择器默认时间_ant-design-vue 时间选择器赋值默认时间的操作
我就废话不多说了,大家还是直接看代码吧~ show-time format="YYYY/MM/DD HH:mm:ss" :value="[this.moment(star ...

【ElenmentUI el-date-picker日期选择器，结束时间不得早于开始时间，且只能选择距开始时间指定天数的日期】

场景：

例如：设置间隔时间为5天；日期的取值范围，如下：

效果：

完整代码：

【ElenmentUI el-date-picker日期选择器，结束时间不得早于开始时间，且只能选择距开始时间指定天数的日期】相关推荐

最新文章

热门文章