elementUI+vue3+ts日期选择器(开始时间 大于 结束时间限制)
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
<el-form-item label="报名日期" prop="enrollDate">
<el-date-picker :disabled="isDisabled" v-model="addActivity.enrollDate" value="YYYY-MM-DD" value-format="YYYY-MM-DD" type="daterange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" @change="enrollDateChangeFn"
:disabledDate="disabledDate" @calendar-change="calendarChangeFn"
@visible-change="visibleChangeFn" :shortcuts="shortcuts">
</el-date-picker>
</el-form-item>
const addActivity :any = reactive({
enrollDate:[]
})
let startTime = ref();
const enrollDateChangeFn=(time:any)=>{
console.log("enrollDateChange")
console.log(time)
}
const calendarChangeFn=(time:any)=>{
console.log("calendarChange")
console.log(time)
startTime.value=time[0];
}
const visibleChangeFn=(time:any)=>{
console.log("visibleChangeFn")
console.log(time)
//消失的时候 开始时间赋值为0
startTime.value=null;
}
//VUE3 写法
const shortcuts = [
{
text: '最近一周',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start, end]
},
},
{
text: '最近一个月',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start, end]
},
},
{
text: '最近三个月',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start, end]
},
},
]
//vue2 写法
// const shortcuts= [
// {
// text: '今天',
// onClick(picker:any) {
// let start = new Date()
// let end = new Date()
// start.setHours(0, 0, 0)
// end.setHours(23, 59, 59)
// picker.emit('pick', [start, end]);
// }
// },
// {
// text: '昨天',
// onClick(picker:any) {
// let start = new Date()
// let end = new Date()
// start.setTime(start.getTime() - 3600 * 1000 * 24)
// end.setTime(end.getTime() - 3600 * 1000 * 24)
// start.setHours(0, 0, 0)
// end.setHours(23, 59, 59)
// picker.emit('pick', [start, end]);
// }
// }
// ]
const disabledDate=(time:any)=>{
console.log("disabledDate")
//开始时间》结束时间
return time.getTime() < startTime.value?.getTime();
}
两个时间选择器互相限制时间,
<el-form-item label="报名日期" prop="enrollDate">
<el-date-picker v-model="addActivity.enrollDate"
:disabled="isDisabled"
:disabledDate="enrollDisabledDate"
end-placeholder="结束日期"
range-separator="至"
start-placeholder="开始日期"
type="daterange"
value="YYYY-MM-DD"
value-format="YYYY-MM-DD"
@calendar-change="enrollCalendarChangeFn">
</el-date-picker>
</el-form-item>
<el-form-item label="活动日期" prop="activityDateArr">
<el-date-picker v-model="addActivity.activityDateArr"
:disabled="isDisabled"
:disabledDate="activityDisabledDate"
end-placeholder="结束日期"
range-separator="至"
start-placeholder="开始日期"
type="daterange"
value="YYYY-MM-DD"
value-format="YYYY-MM-DD"
@calendar-change="activityDalendarChangeFn">
</el-date-picker>
</el-form-item>
let enrollDateTime = ref<any>([]);
let activityDateTime = ref<any>([]);
const day = 60 * 60 * 24 * 1000;
const enrollCalendarChangeFn = (time: any) => {
enrollDateTime.value = time;
}
const activityDisabledDate = (time: any) => {
//活动开始时间>报名结束时间
if (enrollDateTime.value.length == 2) {
return time.getTime() < enrollDateTime.value[1]?.getTime() + day;
}
}
const activityDalendarChangeFn = (time: any) => {
activityDateTime.value = time;
}
const enrollDisabledDate = (time: any) => {
//报名结束时间《活动开始时间
if (enrollDateTime.value.length == 2) {
return time.getTime() > activityDateTime.value[0]?.getTime() - day;
}
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)