参考文档链接
一、设置可选时间范围为 当前日期 当前时间 10分钟以后 的时间
1、HTML代码
<el-date-picker
v-model="form.publishTime"
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
start=""
:picker-options="startPickerOptions"
@change="handle"
placeholder=""
>
</el-date-picker>
2、脚本代码
<script>
import moment from 'moment'
export default {
data() {
return {
form: {
publishTime: ''
},
startPickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000 // 禁用超过当前时间的日期
},
selectableRange: '00:00:00 - 23:59:59' //这个加上之后,时分秒上面才有禁止选择变灰,如果不加,也可以禁止选择,但是不会变灰
}
}
},
watch: {
'form.publishTime': {
handler(newValue, oldValue) {
if (newValue) {
let date = new Date()
let min = date.getMinutes()
date.setMinutes(min + 1) //这里加1分钟,是为了解决值改变后,系统秒数就过期限制了,无法点击“此刻”按钮, 如果监听 “系统时间”的改变,则会影响性能。
let nowDate = moment(date).format('HH:mm:ss')
let st = ''
// 如果当前日期 等于 选中日期 十分钟做限制 并修改可选范围
if (
moment(date).format('yyyy-MM-DD') ===
moment(newValue).format('yyyy-MM-DD')
) {
let hh1 = moment(newValue).format('HH:mm:ss')
// 如果 选中日期时分秒 小于当前日期 时分秒
if (hh1 < nowDate) {
// 重新赋值为当前时间10分钟后 日期时间
let times = new Date(new Date().getTime() + 10 * 60 * 1000)
this.form.publishTime = this.handleTime(times, 0)
}
// 获取当前日期十分钟后 时间
let _date = new Date(new Date().getTime() + 10 * 60 * 1000)
let _nowDate = moment(_date).format('HH:mm:ss')
st = _nowDate
} else {
st = '00:00:00'
}
this.startPickerOptions.selectableRange = st + ' - 23:59:59'
this.startPickerOptions = this.startPickerOptions
}
},
deep: true,
immediate: true
}
},
methods: {
// 处理时间
handleTime($event, rowData) {
if (!$event) {
return null
}
var date = new Date($event) //当前时间
var month =
date.getMonth() + 1 < 10
? '0' + (date.getMonth() + 1)
: date.getMonth() + 1 //月
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() //日
// var day = this.zeroFill(date.getDate()); //日
let hh = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
let mf =
date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
let ss =
date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
if (rowData == 0) {
var curTime =
date.getFullYear() +
'-' +
month +
'-' +
day +
' ' +
hh +
':' +
mf +
':' +
ss
} else {
var curTime = date.getFullYear() + '-' + month + '-' + day
}
return curTime
}
}
}
</script>
二、设置只能选择当前日期 当前时间 之前的时间
1.HTML
<el-date-picker
v-model="form.beginTime"
type="datetime"
:placeholder="开始时间"
align="right"
:picker-options="startPickerOptions"
value-format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>
2、脚本代码
<script>
import moment from 'moment'
export default {
data() {
return {
startPickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now(); // 禁用超过当前时间的日期
},
selectableRange: "00:00:00 - 23:59:59",//这个加上之后,时分秒上面才有禁止选择变灰,如果不加,也可以禁止选择,但是不会变灰
},
}
},
watch:{
"form.beginTime": {
handler(newValue, oldValue) {
if (newValue) {
let date = new Date();
let min = date.getMinutes();
date.setMinutes(min + 1); //这里加1分钟,是为了解决值改变后,系统秒数就过期限制了,无法点击“此刻”按钮, 如果监听 “系统时间”的改变,则会影响性能。
let nowDate = moment(date).format("HH:mm:ss");
let st = "";
if (moment(date).format("yyyy-MM-DD") === moment(newValue).format("yyyy-MM-DD")){
let hh1 = moment(newValue).format("HH:mm:ss")
if(hh1 > nowDate) {
this.form.beginTime = new Date();
}
st = nowDate;
} else {
st = "23:59:59";
}
this.startPickerOptions.selectableRange = "00:00:00 - " + st;
this.startPickerOptions = this.startPickerOptions;
}
},
deep: true,
immediate: true,
},
},
}
</script>
三、日期时间范围选择,限制 当前日期 一个月前 的范围可选;
例如当前日期是2024.8.9号,可选时间范围是 2024-07-07 00:00:00 ~ 2024-08-09 23:59:59;
1、HTML代码
<el-date-picker
v-model="timeRange"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
>
</el-date-picker>
2、脚本代码
export default {
data() {
return {
timeRange: null,
pickerOptions: {
disabledDate(time) {
function startTime() {
const currentDate = new Date()
// 获取当前日期的年份和月份
const year = currentDate.getFullYear()
const month = currentDate.getMonth() // 注意:月份是从0开始的,0表示1月,11表示12月
// 创建一个新的日期对象,设置为上一个月
const lastMonthDate = new Date(
year,
month - 1,
currentDate.getDate()
)
// 返回上一个月的日期
return lastMonthDate
}
function endTime() {
let date = new Date(),
year = date.getFullYear(), //获取完整的年份(4位)
month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
strDate = date.getDate() // 获取当前日(1-31)
if (month < 10) month = `0${month}` // 如果月份是个位数,在前面补0
if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数,在前面补0
return `${year}-${month}-${strDate} 23:59:59`
}
return (
time.getTime() < new Date(startTime()).getTime() ||
time.getTime() > new Date(endTime()).getTime()
)
}
}
}
},
}