标签：picker 00 string 日期 016 Date new DateTimePicker 选择器

1. DateTimePicker日期时间选择器

1.1. 在同一个选择器里选择日期和时间。

1.2. DateTimePicker由DatePicker和TimePicker派生, Picker Options或者其他选项可以参照DatePicker和TimePicker。

1.3. 日期时间选择器属性

1.4. Picker Options

1.5. Shortcuts

1.6. 事件

1.7. 方法

1.8. Slots

2. DateTimePicker日期时间选择器例子

2.1. 使用脚手架新建一个名为element-ui-datetimepicker的前端项目, 同时安装Element插件。

 2.2. 编写App.vue

<template>
  <div id="app">
    <h1>日期和时间点</h1>
    <h4>通过设置type属性为datetime, 即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与Date Picker相同。</h4>
    <div style="display: inline-block;">
      <span>默认: </span>
      <el-date-picker v-model="val11" type="datetime" placeholder="选择日期时间"></el-date-picker>
    </div>
    <div style="display: inline-block; margin-left: 20px;">
      <span>带快捷选项: </span>
      <el-date-picker v-model="val12" type="datetime" placeholder="选择日期时间" align="right" :picker-options="po1"></el-date-picker>
    </div>
    <div style="display: inline-block; margin-left: 20px;">
      <span>设置默认时间: </span>
      <el-date-picker v-model="val13" type="datetime" placeholder="选择日期时间" default-time="12:00:00"></el-date-picker>
    </div>

    <h1>日期和时间范围</h1>
    <h4>设置type为datetimerange即可选择日期和时间范围。</h4>
    <div style="display: inline-block;">
      <span>默认: </span>
      <el-date-picker v-model="val21" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
    </div>
    <div style="display: inline-block; margin-left: 20px;">
      <span>带快捷选项: </span>
      <el-date-picker v-model="val22" type="datetimerange" :picker-options="po2" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"></el-date-picker>
    </div>

    <h1>默认的起始与结束时刻</h1>
    <h4>使用datetimerange进行范围选择时, 在日期选择面板中选定起始与结束的日期, 默认会使用该日期的00:00:00作为起始与结束的时刻; 通过选项default-time可以控制选中起始与结束日期时所使用的具体时刻。default-time接受一个数组, 数组每项值为字符串, 形如12:00:00, 其中第一项控制起始日期的具体时刻, 第二项控制结束日期的具体时刻。</h4>
    <div style="display: inline-block;">
      <span>起始日期时刻为12:00:00</span>
      <el-date-picker v-model="val31" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00']"></el-date-picker>
    </div>
    <div style="display: inline-block; margin-left: 20px;">
      <span>起始日期时刻为12:00:00, 结束日期时刻为08:00:00</span>
      <el-date-picker v-model="val32" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00', '08:00:00']"></el-date-picker>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      val11: '',
      val12: '',
      val13: '',
      po1: {
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      val21: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      val22: '',
      po2: {
        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])
          }
        }]
      },
      val31: '',
      val32: ''
    }
  }
}
</script>

2.3. 运行项目

标签：picker,00,string,日期,016,Date,new,DateTimePicker,选择器
来源： https://blog.csdn.net/aihiao/article/details/123053373

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。