Form-datetimepicker日期时间选择器

- 日理万妓 2022-03-29 10:50 518阅读 0赞

**一、 日期和时间点**

DateTimePicker 日期时间选择器,在同一个选择器里选择日期和时间  
  
通过设置type属性为datetime，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。

<div class="block">
      <span class="demonstration">默认</span>
      <el-date-picker
        v-model="value1"
        type="datetime"
        placeholder="选择日期时间">
      </el-date-picker>
    </div>
    <div class="block">
      <span class="demonstration">带快捷选项</span>
      <el-date-picker
        v-model="value2"
        type="datetime"
        placeholder="选择日期时间"
        align="right"
        :picker-options="pickerOptions1">
      </el-date-picker>
    </div>
    <div class="block">
      <span class="demonstration">设置默认时间</span>
      <el-date-picker
        v-model="value3"
        type="datetime"
        placeholder="选择日期时间"
        default-time="12:00:00">
      </el-date-picker>
    </div>

**二、日期和时间范围 **  
设置type为datetimerange即可选择日期和时间范围

<div class="block">
      <span class="demonstration">默认</span>
      <el-date-picker
        v-model="value4"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </div>
    <div class="block">
      <span class="demonstration">带快捷选项</span>
      <el-date-picker
        v-model="value5"
        type="datetimerange"
        :picker-options="pickerOptions2"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right">
      </el-date-picker>
    </div>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            pickerOptions2: {
              shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近一个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近三个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                  picker.$emit('pick', [start, end]);
                }
              }]
            },
            value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
            value5: ''
          };
        }
      })
    </script>

**三、默认的起始与结束时刻**  
使用datetimerange进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的00:00:00作为起始与结束的时刻；通过选项default-time可以控制选中起始与结束日期时所使用的具体时刻。default-time接受一个数组，数组每项值为字符串，形如12:00:00，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。

<div class="block">
      <span class="demonstration">起始日期时刻为 12:00:00</span>
      <el-date-picker
        v-model="value6"
        type="datetimerange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['12:00:00']">
      </el-date-picker>
    </div>
    <div class="block">
      <span class="demonstration">起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span>
      <el-date-picker
        v-model="value7"
        type="datetimerange"
        align="right"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['12:00:00', '08:00:00']">
      </el-date-picker>
    </div>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            value6: '',
            value7: ''
          };
        }
      })
    </script>

### Attributes ###

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>size</td> 
   <td>输入框尺寸</td> 
   <td>string</td> 
   <td>large, small, mini</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>placeholder</td> 
   <td>非范围选择时的占位内容</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>start-placeholder</td> 
   <td>范围选择时开始日期的占位内容</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>end-placeholder</td> 
   <td>范围选择时结束日期的占位内容</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>time-arrow-control</td> 
   <td>是否使用箭头进行时间选择</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>显示类型</td> 
   <td>string</td> 
   <td>year/month/date/week/ datetime/datetimerange/daterange</td> 
   <td>date</td> 
  </tr> 
  <tr> 
   <td>format</td> 
   <td>显示在输入框中的格式</td> 
   <td>string</td> 
   <td>见<a href="http://element-cn.eleme.io/#/zh-CN/component/date-picker%23ri-qi-ge-shi" rel="nofollow">日期格式</a></td> 
   <td>yyyy-MM-dd</td> 
  </tr> 
  <tr> 
   <td>align</td> 
   <td>对齐方式</td> 
   <td>string</td> 
   <td>left, center, right</td> 
   <td>left</td> 
  </tr> 
  <tr> 
   <td>picker-options</td> 
   <td>当前时间日期选择器特有的选项参考下表</td> 
   <td>object</td> 
   <td>—</td> 
   <td>{}</td> 
  </tr> 
  <tr> 
   <td>range-separator</td> 
   <td>选择范围时的分隔符</td> 
   <td>string</td> 
   <td>-</td> 
   <td>'-'</td> 
  </tr> 
  <tr> 
   <td>default-time</td> 
   <td>选中日期后的默认具体时刻</td> 
   <td>非范围选择时：string / 范围选择时：string[]</td> 
   <td>非范围选择时：形如<code>12:00:00</code>的字符串；范围选择时：数组，长度为 2，每项值为字符串，形如<code>12:00:00</code>，第一项指定开始日期的时刻，第二项指定结束日期的时刻。不指定会使用时刻&nbsp;<code>00:00:00</code></td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>value-format</td> 
   <td>可选，绑定值的格式。不指定则绑定值为 Date 对象</td> 
   <td>string</td> 
   <td>见<a href="http://element-cn.eleme.io/#/zh-CN/component/date-picker%23ri-qi-ge-shi" rel="nofollow">日期格式</a></td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

### [¶][Link 1]Picker Options ###

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>shortcuts</td> 
   <td>设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表</td> 
   <td>Object[]</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>disabledDate</td> 
   <td>设置禁用状态，参数为当前日期，要求返回 Boolean</td> 
   <td>Function</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

### [¶][Link 2]Shortcuts ###

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text</td> 
   <td>标题文本</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>onClick</td> 
   <td>选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())</td> 
   <td>function</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

[Link 1]: http://element-cn.eleme.io/#/zh-CN/component/datetime-picker%23picker-options
[Link 2]: http://element-cn.eleme.io/#/zh-CN/component/datetime-picker%23shortcuts