使用Element的el-date-picker组件学习:下拉框基于一个时间段的查询功能

1. 前言

日期选择器用来选择一个或者多个日期，例如选择某个人的生日，再例如选择订单的创建日期，应用还是非常普遍的。

本篇就来介绍下Element提供的日期选择器的常见用法。

2. 基本用法

编写html代码如下：

	选择任意日期：
    <el-date-picker v-model="value" type="date" placeholder="选择日期" @change="dateChange"> 
    </el-date-picker>

如上代码会显示一个日期选择器，且选中日期的值绑定了value变量，且当选中日期发生变化时，会触发dateChange方法。

对应效果如下：

3. 日期格式化

有时候我们需要，按照我们设定的格式，来处理绑定的日期值，可以通过value-format属性来指定格式，常用的格式化字符串包括：

• yyyy 年
• MM 月
• WW 周
• dd 日
• HH 时 (24小时制)
• hh 时 (12小时制)
• mm 分钟
• ss 秒

所以，如果按照MySQL数据库对日期字符串格式化要求，编写代码如下：

日期格式化:{{value}}
    <el-date-picker v-model="value" type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss">
    </el-date-picker>