el-date-picker 有效时间精确到时分秒 且给有效时间添加标记
el-date-picker实现有效日期做标记且时分秒限制选择范围
代码如下：
// html部分
<el-date-pickerv-model="dateTime"type="datetime":picker-options="pickerOptions"
>
</el-date-picker>// js部分
/*** 回放有效日期开始时间*/
@Prop({default: function() {return null},required: false
})
recordStartTime!: Date/*** 回放有效日期结束时间*/
@Prop({default: function() {return null},required: false
})
recordStopTime!: Date// el-date-picker绑定的值
dateTime： number = new Date().getTime()get choosedDate() {let dateObj = {year: new Date(this.dateTime).getFullYear(),month: new Date(this.dateTime).getMonth(),date: new Date(this.dateTime).getDate()}return JSON.stringify(dateObj)
}@Watch('choosedDate', { immediate: true })
watchChoosedDate(newVal) {let dateObj = JSON.parse(newVal)/*** 开始时间限制*/if (dateObj.year == new Date(this.recordStartTime).getFullYear() &&dateObj.month == new Date(this.recordStartTime).getMonth() &&dateObj.date == new Date(this.recordStartTime).getDate()) {this.pickerOptions = {cellClassName: (time) => {let that = thisif(time.getTime() > new Date(that.recordStartTime).getTime() - 8.64e7 && time.getTime() < new Date(that.recordStopTime).getTime()){return 'custom_date_class';}},selectableRange: `${new Date(this.recordStartTime).format('hh:mm:ss')} - 23:59:59`}} /*** 结束时间限制*/else if (dateObj.year == new Date(this.recordStopTime).getFullYear() &&dateObj.month == new Date(this.recordStopTime).getMonth() &&dateObj.date == new Date(this.recordStopTime).getDate()) {this.pickerOptions = {cellClassName: (time) => {let that = thisif(time.getTime() > new Date(that.recordStartTime).getTime() - 8.64e7 && time.getTime() < new Date(that.recordStopTime).getTime()){return 'custom_date_class';}},selectableRange: `00:00:00 - ${new Date(this.recordStopTime).format('hh:mm:ss')}`}} /*** 其他时间*/else {this.pickerOptions = {cellClassName: (time) => {let that = thisif(time.getTime() > new Date(that.recordStartTime).getTime() - 8.64e7 && time.getTime() < new Date(that.recordStopTime).getTime()){return 'custom_date_class';}},selectableRange: `00:00:00 - 23:59:59`}}
}// css部分 给有效日期下面添加标记
<style lang="less">
.custom_date_class {&::after {content: "";display: block;position: absolute;width: 4px;height: 4px;border-radius: 100%;background-color: var(--mb-main-color);left: 50%;transform: translateX(-2px);}
}
</style>