526互联

element-plus中date-picker组件属性default-time不生效解决办法

发布时间 2023-07-10 11:35:31作者: 狂奔的豆芽

element-plus中date-picker组件属性default-time不生效解决办法
在此之前解决这类问题，我通常会以以下两种方法解决，但是在element-plus中没有起到效果：
第一种：

<el-date-picker
class="form_date_picker"
v-model="formData.orderTime"
format="yyyy-MM-DD HH:mm:ss"
value-format="yyyy-MM-DD HH:mm:ss"
type="datetimerange"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
:disabled-time="['00:00:00', '23:59:59']"
/>

第二种：

<el-date-picker
:clearable="false"
value-format="yyyy-MM-dd HH:mm:ss" v-model="timeRange"
type="datetimerange"
:picker-options="pickerOptions"
align="left"
@focus="changeDatePickerLeft">
</el-date-picker>

<script>
export default{
data(){
pickerOptions: {
disabledDate (time) {
return time.getTime() > new Date(moment().format('L') + ' 23:59:59');
},
shortcuts: [],
defaultTime: ['00:00:00', '23:59:59']
},
}
}
</script>

在发现没有效果之后，并结合之前在time-select组件中发现传进去的日期需要使用new Data（）传入，于是修改了一下写法，成功将默认时间加了上去，记录一下，并希望能帮助您，后续看源码=_=。(y变成了大写）

<el-date-picker
class="form_date_picker"
v-model="formData.orderTime"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
type="datetimerange"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
:default-time="defaultTime"
:disabled-date="disabledDate"
/>

<script>
import { reactive, ref } from 'vue'
const defaultTime = reactive([new Date(0,0,0,0,0,0), new Date(0,0,0,23,59,59)])
const disabledDate = (time) => {
const date = new Date()
return time.getTime() > new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59).getTime()
}
</script>