mint-ui 时间选择器Datetime Picker的用法介绍

墨蓝 2023-02-13 11:35 89阅读 0赞

官方文档坑爹啊，调用mint-ui中的Datetime Picker显示，必须使用该组件的open()方法。以前版本的有介绍，新版本就压根没提这档子事，干的漂亮！

--------------------

**下面详解一下用法！**  
首先，你得有一个元素来控制显示选择好的数据，这里我是通过控制isClicked的布尔值来显示。year变量的值就是选择后的值。

> selectYear函数是用来调用组件的open()事件。  
> isClicked属性用来控制显示默认的 年 还是选择后的时间。  
> year属性的值表示选择好的时间。

--------------------

上面的代码只是控制显示，下面的代码才是实际上的Datatime Picker组件。

> 1.  v-model中绑定的dateValue属性表示点击datatime picker的值，该值初始值即为datatime
> 2.  picker的初始值。如果为空，则datatime picker的默认值为最小值。picker的初始值。如果为空，则datatime picker的默认值为最小值。
> 3.  type表示类型，有date，datetime，time三种，官网介绍的没问题。type表示类型，有date，datetime，time三种，官网介绍的没问题。
> 4.  ref用来给元素或者子组件注册引用信息的，这里是方便我们待会调用datatime picker的open方法，坑爹这里文档只字不提。
> 5.  year-format、…这3个表示待会date picker显示的值，和文档一样 后面的属性都和文档一样，这里没问题。

<mt-datetime-picker v-model="dateValue" type="date" ref="datePicker" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" :endDate="new Date()" @confirm="handleConfirm">
        </mt-datetime-picker>

--------------------

data中设置的属性：

> isClicked属性用来控制显示默认的 年 还是选择后的时间。  
> year属性的值表示选择好的时间。  
> v-model中绑定的dateValue属性表示点击datatime picker的值，该值初始值即为datatime

![在这里插入图片描述][20190108095137819.png]

--------------------

methods中的方法如下：

> selectYear方法调用组件的open()  
> handleConfirm 方法默认传参为选择好的时间数值，是Date格式的。

methods: { 
        selectYear () { 
          this.$refs.datePicker.open();
        },
        handleConfirm (value) { 
          console.log(value);
          this.year = value.getFullYear();
          this.month = value.getMonth() + 1;
          this.date = value.getDate();
          this.isClicked = true;
        },
      }
    
      
       
      
       
        查看效果，妥妥的。 只想说一句文档坑爹。 查看文档的时候，查看这个版本 。下面的中文版不齐全，上面的版本才有正确的接口提示和用法！！！

[20190108095137819.png]: https://img-blog.csdnimg.cn/20190108095137819.png