Form-datepicker日期选择器

╰半夏微凉° 2022-03-29 10:06 794阅读 0赞

DatePicker 日期选择器：用于选择或输入日期

**1、基本单位由type属性指定。type=date时**

type：显示类型，默认date，year/month/date/dates（可以选择多个日期）/ week/datetime/datetimerange/daterange

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70][]![20190223140620801.png][]

<el-date-picker
        v-model="value1"
        type="date"
        placeholder="选择日期">
      </el-date-picker>
      <script>
        new Vue({
          el: '#app',
          data() {
            return {
              value1: '',
            };
          }
        })
      </script>

**1.1Picker Options对象**

shortcuts：设置快捷选项，需要传入 \{ text, onClick \} 对象；

disabledDate：设置禁用日期，传入函数 ，参数为当前日期，要求返回 Boolean，返回为true的日期即禁用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70 1][]

<el-date-picker
        v-model="value2"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions1">
      </el-date-picker>
    <script>
        new Vue({
          el: '#app',
          data() {
            return {
              pickerOptions1: {
                disabledDate(time) {
                  return time.getTime() > Date.now();
                },
                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);
                  }
                }]
              },
              value2: '',
            };
          }
        })
      </script>

**2.1 选择日期范围，type=daterange**

可在一个选择器中便捷地选择一个时间范围；在选择日期范围时，默认情况下左右面板会联动。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70 2][]

v-model绑定的默认时间格式要类似如下数组

![20190222202932137.png][]

<div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="value6"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            value6: ''
          };
        }
      })
    </script>

**2.2 Picker Options选项**

**情景：最多查询31天的日期数据**

change事件：用户确认选定的值时触发，组件绑定值。格式与绑定值一致，可受 `value-format` 控制。

onPick：选中日期后会执行的回调，只有当 `daterange` 或 `datetimerange` 才生效。

参数1maxDate为后选的日期，一般为选中的较大日期，参数2minDate为先选的日期，一般为选中的较小日期，都是0点               时刻。形如：

![20190223144057738.png][]

disabledDate：参数为当前日期，且是0点时刻

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70 3][]

<el-date-picker
        v-model="time_interval"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions2"
        @change="getList()">
      </el-date-picker>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            time_interval: [],
            //选中的第一个时间，0点时刻的时间戳格式
            choiceDate: '',
            pickerOptions2: {
              shortcuts: [{
                text: '最近3天',
                onClick(picker) {
                  const end = new Date()
                  const start = new Date()
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
                  picker.$emit('pick', [start, end])
                }
              }, {
                text: '最近7天',
                onClick(picker) {
                  const end = new Date()
                  const start = new Date()
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
                  picker.$emit('pick', [start, end])
                }
              }, {
                text: '最近30天',
                onClick(picker) {
                  const end = new Date()
                  const start = new Date()
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 29)
                  picker.$emit('pick', [start, end])
                }
              }],
              onPick: ({ maxDate, minDate }) => {
                this.choiceDate = minDate.getTime()
                if (maxDate) {
                  this.choiceDate = ''
                }
              },
              //最多只能查连续31天的数据，减30获取min值或加30获取max值都包含31天
              //这里的时间参数，以0点时刻的日期为单位
              disabledDate: time => {
                if (this.choiceDate) {
                  const one = 30 * 24 * 3600 * 1000
                  const minTime = this.choiceDate - one
                  const maxTime =
                    this.choiceDate + one > Date.now()
                      ? Date.now()
                      : this.choiceDate + one
                  return time.getTime() < minTime || time.getTime() > maxTime
                } else {
                  //没有选中第一个日期时
                  return time.getTime() > Date.now()
                }
              }
            }
          };
        },
        methods: {
            getList(){
                alert('查询的时间参数发生改变，重新请求接口')
            }
        }
      })
    </script>

**3. 日期格式与绑定值格式**  
 format：指定输入框显示的格式；默认yyyy-MM-dd，可进行官网参考

value-format：指定绑定值的格式。默认情况下，组件接受并返回Date对象。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70 4][]

<div class="block">
        <span class="demonstration">默认为 Date 对象</span>
        <div class="demonstration">值：{
       { value10 }}</div>
        <el-date-picker
          v-model="value10"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">使用 value-format</span>
        <div class="demonstration">值：{
       { value11 }}</div>
        <el-date-picker
          v-model="value11"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">时间戳</span>
        <div class="demonstration">值：{
       { value12 }}</div>
        <el-date-picker
          v-model="value12"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="timestamp">
        </el-date-picker>
      </div>

### Attributes ###

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

### 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> 
  <tr> 
   <td>onPick</td> 
   <td>选中日期后会执行的回调，只有当&nbsp;<code>daterange</code>&nbsp;或&nbsp;<code>datetimerange</code>&nbsp;才生效</td> 
   <td>Function({ maxDate, minDate })</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

### 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>

### Events ###

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>change</td> 
   <td>用户确认选定的值时触发</td> 
   <td>组件绑定值。格式与绑定值一致，可受&nbsp;<code>value-format</code>&nbsp;控制</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190223140612690.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ==,size_16,color_FFFFFF,t_70
[20190223140620801.png]: /images/20220329/3d4e05d3f3ad42c5944e6eee4cabeb5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70 1]: /images/20220329/019e9fcc45b549caa63cd55d63450452.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70 2]: /images/20220329/b1692c5f4b7142eaaf65211b0802a446.png
[20190222202932137.png]: /images/20220329/ae2e6e1df5f94d13968651bfe2178916.png
[20190223144057738.png]: /images/20220329/8324819a00cf48d4a476f110bfc874bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70 3]: /images/20220329/62ae694a618343d0a57cb2fb41ca1341.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70 4]: /images/20220329/e2df355c221b437d828778a91fc58222.png