文档地址:https://ext.dcloud.net.cn/plugin?id=112
示例:
日期选择 - 示例
{{date}}
{{time}}
{{datetime}}
{{range[0]}} - {{range[1]}}
{{rangetime[0]}} - {{rangetime[1]}}
比如只需要使用日期时间功能
修改之后
template部分
//此标签一定要放在点击事件的外面,不然会无法关闭组件
js部分
import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
export default {
components: {
MxDatePicker
},
data():{
return {
showPicker: false,
datetime: new Date().toISOString().slice(0, 10) + ' 00:00:00', //此变量是显示和最终需要传递的值,也可以使用下方的value存结果
type: 'rangetime',
value: ''
}
},
method:{
DatePicker(type){//显示
this.type = type;
this.showPicker = true;
this.value = this[type];
},
ed(e) {//选择
this.showPicker = false;
if(e) {
this[this.type] = e.value;
//选择的值
console.log('value => '+ e.value);
//将值赋给显示的变量
this.datetime = e.value;
//原始的Date对象
console.log('date => ' + e.date);
}
},
}
0条评论