015_DatePicker日期选择器

最新推荐文章于 2024-11-22 12:00:27 发布

原创最新推荐文章于 2024-11-22 12:00:27 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

element-ui 专栏收录该内容

57 篇文章

订阅专栏

本文详细介绍了Element UI中的DatePicker组件，包括日期选择器的基本用法、属性、事件、方法以及时间格式。提供了多种类型的日期选择，如日期、周、月、年和日期范围，并展示了如何配置快捷选项、禁用日期、自定义格式等。同时，通过示例代码展示了如何在Vue项目中使用DatePicker组件，包括基本日期选择、日期范围选择和格式化日期的用法。

1. DatePicker日期选择器

1.1. 用于选择或输入日期。

1.2. 时间选择器属性

参数	说明	类型	可选值	默认值
value / v-model	绑定值	date(DatePicker) / array(DateRangePicker)	无	无
readonly	完全只读	boolean	无	false
disabled	禁用	boolean	无	false
editable	文本框可输入	boolean	无	true
clearable	是否显示清除按钮	boolean	无	true
size	输入框尺寸	string	large / small / mini	无
placeholder	非范围选择时的占位内容	string	无	无
start-placeholder	范围选择时开始日期的占位内容	string	无	无
end-placeholder	范围选择时开始日期的占位内容	string	无	无
type	显示类型	string	year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange	date
format	显示在输入框中的格式	string	见日期格式	yyyy-MM-dd
align	对齐方式	string	left / center / right	left
popper-class	DatePicker下拉框的类名	string	无	无
picker-options	当前时间日期选择器特有的选项参考下表	object	无	{}
range-separator	选择范围时的分隔符	string	无	'-'
default-value	可选, 选择器打开时默认显示的时间	Date	可被new Date()解析	无
default-time	范围选择时选中日期所使用的当日内具体时刻	string[]	数组, 长度为2, 每项值为字符串, 形如: 12:00:00, 第一项指定开始日期的时刻, 第二项指定结束日期的时刻, 不指定会使用时刻00:00:00	无
value-format	可选, 绑定值的格式。不指定则绑定值为Date对象	string	见日期格式	无
name	原生属性	string	无	无
unlink-panels	在范围选择器里取消两个日期面板之间的联动	boolean	无	false
prefix-icon	自定义头部图标的类名	string	无	el-icon-date
clear-icon	自定义清空图标的类名	string	无	el-icon-circle-close
validate-event	输入时是否触发表单的校验	boolean	无	true

1.3. Picker Options

参数	说明	类型	可选值	默认值
shortcuts	设置快捷选项, 需要传入{ text, onClick }对象用法参考demo或下表	Object[]	无	无
disabledDate	设置禁用状态, 参数为当前日期, 要求返回Boolean	Function	无	无
cellClassName	设置日期的className	Function(Date)	无	无
firstDayOfWeek	周起始日	Number	1到7	7
onPick	选中日期后会执行的回调, 只有当daterange或datetimerange才生效	Function({ maxDate, minDate })	无	无

1.4. Shortcuts

参数	说明	类型
text	标题文本	string
onClick	选中后的回调函数, 参数是vm, 可通过触发'pick'事件设置选择器的值。例如: vm.$emit('pick', new Date())	function

1.5. 事件

事件名称	说明	回调参数
change	用户确认选定的值时触发	组件绑定值。格式与绑定值一致, 可受value-format控制
blur	当input失去焦点时触发	组件实例
focus	当input获得焦点时触发	组件实例

1.6. 方法

事件名称	说明
focus	使input获得焦点

2. 日期格式

2.1. 使用format指定输入框的格式; 使用value-format指定绑定值的格式。

2.2. 默认情况下, 组件接受并返回Date对象。以下为可用的格式化字串:

格式	含义	备注	举例
yyyy	年	无	2017
M	月	不补0	1
MM	月	无	01
W	周	仅周选择器的format可用; 不补0	1
WW	周	仅周选择器的format可用	01
d	日	不补0	2
dd	日	无	02
H	小时	24小时制; 不补0	3
HH	小时	24小时制	03
h	小时	12小时制, 须和A或a使用; 不补0	3
hh	小时	12小时制, 须和A或a使用	03
m	分钟	不补0	4
mm	分钟	无	04
s	秒	不补0	5
ss	秒	无	05
A	AM/PM	仅format可用, 大写	AM
a	am/pm	仅format可用, 小写	am
timestamp	JS时间戳	仅value-format可用; 组件绑定值为number类型	1483326245000
[MM]	不需要格式化字符	使用方括号标识不需要格式化的字符(如 [A] [MM])	MM

3. 日期选择器例子

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

3.2. 编写index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import DatePicker from '../components/DatePicker.vue'
import RangeDatePicker from '../components/RangeDatePicker.vue'
import FormatDatePicker from '../components/FormatDatePicker.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/DatePicker' },
  { path: '/DatePicker', component: DatePicker },
  { path: '/RangeDatePicker', component: RangeDatePicker },
  { path: '/FormatDatePicker', component: FormatDatePicker }
]

const router = new VueRouter({
  routes
})

export default router

3.3. 在components下创建DatePicker.vue

<template>
  <div>
    <h1>选择日-以[日]为基本单位, 基础的日期选择控件</h1>
    <h4>基本单位由type属性指定。快捷选项需配置picker-options对象中的shortcuts, 禁用日期通过disabledDate设置, 传入函数。</h4>
    <el-row>
      <el-col :span="5">
        <span>默认: </span>
        <el-date-picker v-model="val11" type="date" placeholder="选择日期"></el-date-picker>
      </el-col>
      <el-col :span="5">
        <span>带快捷选项: </span>
        <el-date-picker v-model="val12" align="right" type="date" placeholder="选择日期" :picker-options="po1"></el-date-picker>
      </el-col>
    </el-row>

    <h1>其他日期单位</h1>
    <h4>通过扩展基础的日期选择, 可以选择周、月、年或多个日期。</h4>
    <el-row>
      <el-col :span="5">
        <span>周: </span>
        <el-date-picker v-model="val21" type="week" format="yyyy 第 WW 周" placeholder="选择周"></el-date-picker>
      </el-col>
      <el-col :span="5">
        <span>月: </span>
        <el-date-picker v-model="val22" type="month" placeholder="选择月"></el-date-picker>
      </el-col>
      <el-col :span="5">
        <span>年: </span>
        <el-date-picker v-model="val23" type="year" placeholder="选择年"></el-date-picker>
      </el-col>
      <el-col :span="5">
        <span>多个日期: </span>
        <el-date-picker type="dates" v-model="val24" placeholder="选择一个或多个日期"></el-date-picker>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      val11: '',
      val12: '',
      po1: {
        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)
          }
        }]
      },
      val21: '',
      val22: '',
      val23: '',
      val24: ''
    }
  }
}
</script>

3.4. 在components下创建RangeDatePicker.vue

<template>
  <div>
    <h1>选择日期范围-可在一个选择器中便捷地选择一个时间范围</h1>
    <h4>在选择日期范围时, 默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份, 可以使用unlink-panels属性解除联动。</h4>
    <el-row>
      <el-col :span="5">
        <span>默认: </span>
        <el-date-picker v-model="val31" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-col>
      <el-col :span="5">
        <span>带快捷选项: </span>
        <el-date-picker v-model="val32" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="po3"></el-date-picker>
      </el-col>
    </el-row>

    <h1>选择月份范围-可在一个选择器中便捷地选择一个月份范围</h1>
    <h4>在选择月份范围时, 默认情况下左右面板会联动。如果希望两个面板各自独立切换当前年份, 可以使用unlink-panels属性解除联动。</h4>
    <el-row>
      <el-col :span="5">
        <span>默认: </span>
        <el-date-picker v-model="val41" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份"></el-date-picker>
      </el-col>
      <el-col :span="5">
        <span>带快捷选项: </span>
        <el-date-picker v-model="val42" type="monthrange" align="right" unlink-panels range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="po4"></el-date-picker>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      val31: '',
      val32: '',
      po3: {
        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])
          }
        }]
      },
      val41: '',
      val42: '',
      po4: {
        shortcuts: [{
          text: '本月',
          onClick (picker) {
            picker.$emit('pick', [new Date(), new Date()])
          }
        }, {
          text: '今年至今',
          onClick (picker) {
            const end = new Date()
            const start = new Date(new Date().getFullYear(), 0)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近六个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 6)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  }
}
</script>

3.5. 在components下创建FormatDatePicker.vue

<template>
  <div>
    <h1>日期格式</h1>
    <h4>使用format指定输入框的格式; 使用value-format指定绑定值的格式。默认情况下, 组件接受并返回Date对象。</h4>
    <el-row>
      <el-col :span="8">
        <p>默认为Date对象, 值：{{ val51 }}</p>
        <el-date-picker v-model="val51" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"></el-date-picker>
      </el-col>
      <el-col :span="8">
        <p>使用value-format, 值：{{ val52 }}</p>
        <el-date-picker v-model="val52" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
      </el-col>
      <el-col :span="8">
        <p>时间戳, 值：{{ val53 }}</p>
        <el-date-picker v-model="val53" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="timestamp"></el-date-picker>
      </el-col>
    </el-row>

    <h1>默认显示日期-在选择日期范围时, 指定起始日期和结束日期的默认时刻</h1>
    <h4>选择日期范围时, 默认情况下, 起始日期和结束日期的时间部分均为当天的0点0分0秒。通过default-time可以分别指定二者的具体时刻。default-time接受一个数组, 其中的值为形如12:00:00的字符串, 第一个值控制起始日期的时刻, 第二个值控制结束日期的时刻。</h4>
    <p>组件值: {{ val61 }}</p>
    <el-date-picker v-model="val61" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"></el-date-picker>
  </div>
</template>

<script>
export default {
  data () {
    return {
      val51: '',
      val52: '',
      val53: '',
      val61: ''
    }
  }
}
</script>

3.6. 运行项目, 访问http://localhost:8080/#/DatePicker