如果您对vueelement-ui日期选择器el-date-picker设置开始日期和结束日期的选择区间感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解vueelement-ui日期选择器el-
如果您对vue element-ui 日期选择器el-date-picker设置开始日期和结束日期的选择区间感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解vue element-ui 日期选择器el-date-picker设置开始日期和结束日期的选择区间的各种细节，此外还有关于EasyUI-datebox设置开始日期小于结束日期，并且结束日期小于当前日期、el-data-picker 结束日期不能小于开始日期、element el-date-picker 日期时间选择器 有默认值后选其他日期回显无效、Element UI日期选择器el-date-picker设置默认的时刻踩坑的实用技巧。
本文目录一览：- vue element-ui 日期选择器el-date-picker设置开始日期和结束日期的选择区间
- EasyUI-datebox设置开始日期小于结束日期，并且结束日期小于当前日期
- el-data-picker 结束日期不能小于开始日期
- element el-date-picker 日期时间选择器 有默认值后选其他日期回显无效
- Element UI日期选择器el-date-picker设置默认的时刻踩坑
vue element-ui 日期选择器el-date-picker设置开始日期和结束日期的选择区间
<el-form-item label="项目开始日：" prop="F_StartDate" :rules="{ required: false, message: ''请输入项目开始日'', trigger: ''blur'' }">
<el-date-picker v-model="form.F_StartDate"
type="date"
size="small"
placeholder="选择项目开始日"
value-format="yyyy-MM-dd"
:picker-options="pickerBeginDateBefore"
style="width: 100%;">
</el-date-picker>
</el-form-item><el-form-item label="项目截止日：" prop="F_EndDate" :rules="{ required: false, message: ''请输入项目截止日'', trigger: ''blur'' }">
<el-date-picker v-model="form.F_EndDate"
type="date"
size="small"
placeholder="选择项目截止日"
value-format="yyyy-MM-dd"
:picker-options="pickerBeginDateAfter"
style="width: 100%;">
</el-date-picker>
</el-form-item>data: {
pickerBeginDateBefore: {
disabledDate: time => {
let endDate = vm.form.F_EndDate;
let beginDateVal = new Date(endDate);
if (endDate) {
return time.getTime() > beginDateVal;
}
}
},
pickerBeginDateAfter: {
disabledDate: time => {
let startDate = vm.form.F_StartDate;
let beginDateVal = new Date(startDate);
if (startDate) {
return time.getTime() < beginDateVal - 3600 * 1000 * 24 * 1;
}
}
},
} 
EasyUI-datebox设置开始日期小于结束日期，并且结束日期小于当前日期
datebox设置开始日期小于结束日期，并且结束日期小于当前日期
//日期控制扩展选择日期小于等于当前日期，开始日期小于等于结束日期
$("#datebox1").datebox(''calendar'').calendar({
validator:function(beginDate){
var date = new Date();
return beginDate < date;
}
});
$("#datebox1").datebox({
onSelect:function(beginDate){
$(''#datebox2'').datebox().datebox(''calendar'').calendar({
validator:function(endDate){
var date = new Date();
return beginDate <= endDate && endDate < date;
}
});
}
});
});
el-data-picker 结束日期不能小于开始日期
<template>
<el-form :model="project">
<el-form-item>
<el-col :span="11">
<el-date-picker
size="mini"
v-model="project.planDateSta"
value-format="yyyy-MM-dd"
type="data"
placeholder="开始日期"
autocomplete="off"
style="width: 100%"
// data中调用
:picker-options="pickerOptionsStart"
></el-date-picker>
</el-col>
<el-col:span="2">-</el-col>
<el-col :span="11">
<el-date-picker
size="mini"
v-model="project.planDateEnd"
value-format="yyyy-MM-dd"
type="data"
align="right"
placeholder="结束日期"
autocomplete="off"
style="width: 100%"
:picker-options="pickerOptionsEnd"
></el-date-picker>
</el-col>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
// 开始日期 :picker-options 中引用
pickerOptionsStart: {
disabledDate: time => {
// 获取结束日期的 v-model 值并赋值给新定义的对象
let endDateVal = this.project.planDateEnd;
if (endDateVal) {
// 比较 距 1970 年 1 月 1 日之间的毫秒数：
return time.getTime() > new Date(endDateVal).getTime();
}
}
},
// 结束日期 :picker-options 中引用
pickerOptionsEnd: {
disabledDate: time => {
// 获取开始日期的 v-model 值并赋值给新定义的对象
let beginDateVal = this.project.planDateSta;
if (beginDateVal) {
// 比较 距 1970 年 1 月 1 日之间的毫秒数：
return time.getTime() < new Date(beginDateVal).getTime() - 1 * 24 * 60 * 60 * 1000
}
}
}
}
}
}
</script>
element el-date-picker 日期时间选择器 有默认值后选其他日期回显无效
//html：<el-form-item label="开始日期" prop="cxBeginTime"> <el-date-picker v-model="queryParams.cxBeginTime" type="date" placeholder="选择开始日期"> </el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-form-item>//data:queryParams:{cxBeginTime:'''',cxEndTime:''''},//computed: { timeDefault() { var date = new Date(); var s1 = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate()+1); return s1; } }, mounted() { // 初始化查询，默认为后一天 this.$set(this.queryParams,"cxBegi.........
Element UI日期选择器el-date-picker设置默认的时刻踩坑
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。
作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。
踩坑经历
使用日期选择器，选择日期时，试图让selectTime能取到选择日期的最后一刻的时间戳。
举例：2023-01-06 23:59:59的时间戳1673020799999
<el-date-picker
v-model="selectTime"
type="date"
value-format="timestamp"
placeholder="选择日期">
</el-date-picker>查看文档看到一个default-time，企图直接设置default-time属性给日期选择组件
企图的实现，下面这样不能实现哦，因为这个字段根本不是用来设置该组件默认时刻的，该字段只对日期范围类型的日期选择器有效；具体详情看官网对该字段的描述
<el-date-picker
v-model="selectTime"
default-time=“23:59:59”
type="date"
value-format="timestamp"
placeholder="选择日期">
</el-date-picker>
实现办法：
因为我的需求是提交的时候，提交日期的最后一刻就行了，因此我可以直接把值转换一下就可以了，项目中用到了dayjs插件，因此此处直接用
const time = dayjs(this.selectTime).endOf(''day'').valueOf()如果没有引入dayjs的话，这里提供一种方法
const time = new Date(this.selectTime)
const y = time.getFullYear()
const m = time.getMonth()
const d = time.getDate()
// 得到日期的最后一刻的时间戳
const targetTime = new Date(y, m, d, 23, 59, 59).getTime()❤️欢迎素质三连[点赞 + 收藏 + 评论]
我是小梅，有兴趣的话可以在微信搜一搜「小梅的前端之路」第一时间接收文章更新通知，一起沟通、学习成长呀。
今天关于vue element-ui 日期选择器el-date-picker设置开始日期和结束日期的选择区间的讲解已经结束，谢谢您的阅读，如果想了解更多关于EasyUI-datebox设置开始日期小于结束日期，并且结束日期小于当前日期、el-data-picker 结束日期不能小于开始日期、element el-date-picker 日期时间选择器 有默认值后选其他日期回显无效、Element UI日期选择器el-date-picker设置默认的时刻踩坑的相关知识，请在本站搜索。
本文标签：
