uni-app时间选择器并选择时间段

效果图:

uni-app时间选择器并选择时间段_第1张图片

1.在script中引用自定义组件:mx-datepicker.vue

import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";

2.注册组件:

components: {
            MxDatePicker
        },

uni-app时间选择器并选择时间段_第2张图片

 3.新建时间选择页面代码:



代码说明:

(1).时间、日期点击事件onShowDatePicker,传递的参数是选择时间日期的类型

uni-app时间选择器并选择时间段_第3张图片

type:date =》日期选择

uni-app时间选择器并选择时间段_第4张图片

type:time =》时间选择

 uni-app时间选择器并选择时间段_第5张图片

type:datetime =》日期+时间选择

 uni-app时间选择器并选择时间段_第6张图片

 type:range =》日期范围选择

uni-app时间选择器并选择时间段_第7张图片

 type:rangetime =》时间+日期范围选择

 uni-app时间选择器并选择时间段_第8张图片

 组件使用:

 uni-app时间选择器并选择时间段_第9张图片


4.mx-datepicker.vue

 uni-app时间选择器并选择时间段_第10张图片


 

下载demo,里面包含 mx-datepicker.vue

 

最后是交流公众号,大家可以关注一下

你可能感兴趣的:(vue,前端,uni-app)