vue2组件系列第十五节:DatetimePicker 时间选择

时间选择器是应用很广的一个组件了。

准备工作：

1. 创建一个页面: DatetimePicker.vue
2. 在router.js里配置 DatetimePicker页面的路由

{
 path: '/datetimepicker',
 name: 'datetimepicker',
 component: () => import('./views/DatetimePicker.vue')
 }

1. 在index.vue里添加一项

<a href="javascript:void(0)" @click="$router.push('/datetimepicker')">
 <van-col span="6" class="marb20">
 <van-icon name="clock" />
 <div>DatetimePicker</div>
 </van-col>
</a>

至今为止呢，我们的首页显示的样式子是这样滴?不知道不觉间我们已经学完了11个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。

代码演示DateTimePicker时间选择：

按照习惯，我们做个小案例。

案例需求，点击输入框，弹出时间选择器，并将选择显示在输入框中。

分析步骤：

1.DOM里创建输入框和时间插件。时间插件不具备弹出功能，需要借助于popup组件

2.控制popup地弹出

3.确认并输出时间

首先我们创建一下输入框和时间插件：

<van-field
 v-model="myDate"
 label="请输入日期"
 placeholder="请输入日期"
 @focus="onClick"
 />
 <van-popup v-model="isShow" position="bottom">
 <van-datetime-picker
 v-model="currentDate"
 confirm-button-text="保存"
 type="date"
 :formatter="formatter"
 @confirm="confirm"
 />
</van-popup>

是这个样子滴：

获取焦点为时，触发focus事件，执行onClick，让popup弹出。

v-model: 时间选择器默认显示的时间，如果没有这个属性，初始值将是第一个值。如果不设置min-date, max-date，则初始值是10年前的第一天。不设置min-date, max-date，时间选择器的取值范围是前后10年，一共20年。

confirm-button-text：确认按钮上的文字设定。

type：类型，分为日期类型，时间类型，年月类型，依次分别为：date，tiem，year-month。

formatter：选项格式化函数。可以将日期格式化成任何你想要的形式。接收2个参数，type, value。type是年月日等这些key值，value就是其对应的value值。

confirm：点击“确认”按钮时触发。这个时间选择器支持confirm，cancel，change事件上。

data上设置为：

data() {
 return {
 isShow: false,
 myDate: '',
 currentDate: new Date(),
 }
},

currentDate设置为当前时间。

js部分：

onClick() {
 this.isShow = true;
},
confirm(value) {
 this.myDate = moment(value).format("YYYY年MM月DD日")
 this.isShow = false
},
formatter(type, value) {
 if(type === 'year') {
 return `${value}年`
 } else if(type === 'month') {
 return `${value}月`
 } else if(type === 'day') {
 return `${value}日`
 }
 return value
},

这里引用了一个moment时间插件，我们按了“保存”按钮后得出的value值是这个样子的：

我们需要将这个时间格式化成我们需要的形式。moment时间插件其中一个功能就是可以格式化时间。参数是value，我们想要格式化的时间，format是我们想格式化成的格式。

moment(value).format("YYYY年MM月DD日")

以上就是DatetimePicker时间选择器经常用到的属性和事件。

今天就到这里啦。休息休息一会儿吧?明天继续加油噢！加油