DatePicker 日期选择器 (组件) - Element UI 中文开发手册

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

成熟的伏特加 · 美国队出局！法国队闯进篮球世界杯4强_手机新浪网· 1 月前 ·

忐忑的围巾 · 美国再发“中国军力报告”，金一南：不合逻辑， ...· 5 月前 ·

礼貌的消防车 · 【SERES赛力斯赛力斯SF5相关文章】赛力 ...· 1 年前 ·

活泼的枕头 · 中国主题公园的困境与出路！_腾讯新闻· 1 年前 ·

会搭讪的茄子 · 比特斯拉还要猛，687马力的奔驰AMG ...· 1 年前 ·

腾讯云

备案控制台

开发者社区

TVP

文章/答案/技术大牛

写文章

<template>
  <div class="block">
    <span class="demonstration">默认</span>
    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
  <div class="block">
    <span class="demonstration">带快捷选项</span>
    <el-date-picker
      v-model="value2"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions1">
    </el-date-picker>
</template>
<script>
  export default {
    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);
        value1: '',
        value2: '',
</script>

<div class="container">
  <div class="block">
    <span class="demonstration">周</span>
    <el-date-picker
      v-model="value3"
      type="week"
      format="yyyy 第 WW 周"
      placeholder="选择周">
    </el-date-picker>
  <div class="block">
    <span class="demonstration">月</span>
    <el-date-picker
      v-model="value4"
      type="month"
      placeholder="选择月">
    </el-date-picker>
<div class="container">
  <div class="block">
    <span class="demonstration">年</span>
    <el-date-picker
      v-model="value5"
      type="year"
      placeholder="选择年">
    </el-date-picker>
  <div class="block">
    <span class="demonstration">多个日期</span>
    <el-date-picker
      type="dates"
      v-model="value14"
      placeholder="选择一个或多个日期">
    </el-date-picker>
<script>
  export default {
    data() {
      return {
        value3: '',
        value4: '',
        value5: '',
        value14: []
</script>

DatePicker 日期选择器

选择日

其他日期单位

选择日期范围