vue组件中显示当前日期（DatetimePicker）

代码演示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时间选择器经常用到的属性和事件。

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