1. 前言
之前我们已经讲述了时间选择器，日期选择器的用法。
Element还提供了集日期时间与一体的选择器，即日期时间选择器，用于同时选择日期时间的场景。
2. 基本用法
代码如下：
基本用法，选择任意日期时间：{{value1}}
<el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
1
2
3
通过type="datetime"，设定了组件类型为日期时间选择器，通过value-format设置了值的格式，所以效果如下：
3. 设置默认时间
可以为日期时间选择器设定一个默认的时间。
设置默认时间
<el-date-picker v-model="value2" type="datetime" placeholder="选择日期时间" default-time="12:00:00">
</el-date-picker>
1
2
3
效果如下，就算不手动选择时间，也会有一个默认值：
4. 选择范围
通过将type设置为datetimerange，可以将日期时间选择器的功能设置为选择一个范围，代码：
选择日期时间的范围
<el-date-picker v-model="value3" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
1
2
3
效果如下：
5. 设置默认起止时刻
当用于选择范围时，还可以设置默认的起、止的时间点：
设置默认的起止时刻
<el-date-picker v-model="value4" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
</el-date-picker>
1
2
3
效果：
6. 小结
我个人感觉Element提供的日期选择器、时间选择器堪称完美，界面简洁功能又强大。
而日期时间选择器的界面容易让人迷糊，尤其是选择时间的部分不够明确。
所以也可以考虑用一个日期选择器+一个时间选择器来解决同时选择日期和时间的问题。
