element-plus中date-picker组件属性default-time不生效解决办法
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>