一、两个输入框
<template>
<Row>
<Col span="11">
<Form-item label="登记时间" prop="inputTime">
<DatePicker
:value="caseInfo.inputTime"
:options="disabledInputTime"
@on-change="changeAcceptTime"
type="date"
placeholder="请选择登记时间"
style="width: 220px"
></DatePicker>
</Form-item>
</Col>
<Col span="12">
<Form-item
label="案件侦办到期时间"
prop="casespyEndtime"
:label-width="185"
>
<DatePicker
:value="caseInfo.casespyEndtime"
:options="disabledCasespyEndtime"
@on-change="changeEndtime"
type="date"
placeholder="请选择到期时间"
style="width: 220px"
></DatePicker>
</Form-item>
</Col>
</Row>
</template>
<script>
function getCurrentDate() {
let myDate = new Date();
let year = myDate.getFullYear();
let month = myDate.getMonth() + 1;
let date = myDate.getDate();
let nowDate = `${year}-${month}-${date}`;
return nowDate;
}
let currentDate = getCurrentDate();
let disabledDay = GetNextMonthDay(currentDate, 6);
let disabledDayTime = new Date(disabledDay).getTime();
/**
*获取下一个月的输入日期
*{param:DateTime} date 输入日期(YYYY-MM-DD)
*{param:number } monthNum 月数
*/
function GetNextMonthDay(date, monthNum) {
var dateArr = date.split("-");
var year = dateArr[0]; //获取当前日期的年份
var month = dateArr[1]; //获取当前日期的月份
var day = dateArr[2]; //获取当前日期的日
var days = new Date(year, month, 0);
days = days.getDate(); //获取当前日期中的月的天数
var year2 = year;
var month2 = parseInt(month) + parseInt(monthNum);
if (month2 > 12) {
year2 =
parseInt(year2) +
parseInt(parseInt(month2) / 12 == 0 ? 1 : parseInt(month2) / 12);
month2 = parseInt(month2) % 12;
}
var day2 = day;
var days2 = new Date(year2, month2, 0);
days2 = days2.getDate();
if (day2 > days2) {
day2 = days2;
}
if (month2 < 10) {
month2 = "0" + month2;
}
var t2 = year2 + "-" + month2 + "-" + day2;
return t2;
}
export default {
name: "ControlCaseList",
data() {
return {
caseInfo: {
inputTime: currentDate,
casespyEndtime: disabledDay,
},
disabledInputTime: {
disabledDate(date) {
return date && date.valueOf() < Date.now() - 86400000;
},
},
disabledCasespyEndtime: {
disabledDate(date) {
return (
(date && date.valueOf() < Date.now() - 86400000) ||
date.valueOf() > disabledDayTime
);
},
},
}
},
methods: {
changeAcceptTime(value) {
this.caseInfo.inputTime = value;
},
changeEndtime(value) {
this.caseInfo.casespyEndtime = value;
},
},
mounted() {
},
watch: {
"caseInfo.inputTime"() {
let self = this;
this.disabledCasespyEndtime = {
disabledDate(date) {
if (self.caseInfo.inputTime) {
return (
(date &&
date.valueOf() < new Date(self.caseInfo.inputTime).getTime()) ||
date.valueOf() > disabledDayTime
);
}
},
};
},
"caseInfo.casespyEndtime"() {
let self = this;
this.disabledInputTime = {
disabledDate(date) {
if (self.caseInfo.casespyEndtime) {
return (
date &&
(new Date(self.caseInfo.casespyEndtime).getTime() <
date.valueOf() ||
date.valueOf() < Date.now() - 86400000)
);
}
},
};
},
},
};
</script>
二、一个输入框网上找的
<DatePicker ref="date" @click.native="onPick" type="datetimerange" :options = "options" placeholder="请选择日期" :clearable="false" v-model="searchDate" style="width: 280px;margin-right: 10px"></DatePicker>
// 动态限制日期时间选择器的可选范围
function disabledDate_start_end_native(value, from) {
const startTime = new Date(from);
const endTime = new Date(from);
startTime.setDate(from.getDate());
endTime.setDate(from.getDate() + 6);
return !(value >= startTime && value <= endTime) || (value && (value.valueOf() > Date.now() - 86400000));
}
methods:{
//设置时间
onPick() {
const target = (this.$refs.date).$refs.pickerPanel;
console.log('target', target)
const { from, to } = target.rangeState;
target.handlePickClick = (() => {
const selecting = target.rangeState;
const from1 = target.rangeState.from;
if (from1 && selecting) {
this.options = {
disabledDate(value) {
return disabledDate_start_end_native(value, from1);
},
};
}
});
if (from && !to) {
this.options = {
disabledDate(value) {
return disabledDate_start_end_native(value, from);
},
};
} else {
this.options = {
disabledDate(value) {
return value && (value.valueOf() > Date.now() - 86400000);
},
};
}
},
}，
data() {
return {
options:{
disabledDate (date) {
return date && date.valueOf() > new Date();
}
},
//开始时间，结束时间
searchDate:[],
}
}
