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

最新推荐文章于 2024-08-08 17:17:58 发布

加油ing......

最新推荐文章于 2024-08-08 17:17:58 发布

阅读量5k

点赞数 6

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/weixin_49651379/article/details/129695214

版权

在element-plus的date-picker组件中，通过default-time设置默认时间未生效。文章提供了两种常见尝试但无效的解决方案，并分享了最终成功的方法，即使用`reactive`创建`defaultTime`并用`newDate()`构造时间对象。同时，`disabledDate`函数用于禁用当前时间之后的日期选择。

摘要由CSDN通过智能技术生成

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>