【element】element-ui时间日期设置范围pickerOptions

最新推荐文章于 2024-08-22 13:30:11 发布

前端小云儿

最新推荐文章于 2024-08-22 13:30:11 发布

阅读量1k

点赞数

分类专栏： elemenu-ui 文章标签： ui elementui vue.js

本文链接：https://blog.csdn.net/jieweiwujie/article/details/119743553

版权

elemenu-ui 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何在Vue.js应用中使用`el-date-picker`组件来实现月份范围的选择，并通过`pickerOptions`配置禁用未来的日期。在`watch`中监听`pickerValue`的变化并传递给父组件。此外，还展示了如何设置截止日期的`el-date-picker`组件，通过`disabledDate`禁用过去的时间，并在`change`事件中更新截止日期的值。

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

<el-date-picker

v-model="pickerValue"

type="monthrange"

value-format="yyyy-MM-dd"

range-separator="至"

start-placeholder="开始月份"

end-placeholder="结束月份"

:picker-options="pickerOptions"

</el-date-picker>

<!-- 1，range-separator="" 默认不写是‘-’

-->

</div>

</template>

export default {

name: 'Home',

components: {

watch:{

pickerValue(){

this.$emit('pickerValueFun',this.pickerValue)

}

data(){

return{

pickerValue:"",

pickerOptions:{

disabledDate(time) {

return time.getTime() > Date.now();

}

</script>

<el-date-picker
       v-model="deadline"
       type="datetime"
       placeholder="选择日期时间"
       @change="handleDate"
       value-format="yyyy-MM-dd HH:mm:ss"
       format="yyyy-MM-dd HH:mm:ss"
       :picker-options="expireTimeOption"
       ></el-date-picker>
data() {
       return {
           expireTimeOption: {
                   disabledDate(date) {
               //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
                       return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
                   }
               },
           deadline: "", // 截止时间
       }
   },
   methods:{
       // 截止日期
       handleDate(value) {
       this.deadline = value;
       },
   }
————————————————