• DatePicker 日期选择器
    • 选择日
    • 其他日期单位
    • 选择日期范围
    • 日期格式
    • 默认显示日期
    • Attributes
    • Picker Options
    • Shortcuts
    • Events
    • Methods

    DatePicker 日期选择器

    用于选择或输入日期

    选择日

    以「日」为基本单位,基础的日期选择控件

    DatePicker 日期选择器 - 图1

    基本单位由type属性指定。快捷选项需配置picker-options对象中的shortcuts,禁用日期通过 disabledDate 设置,传入函数

    1. <template>
    2. <div class="block">
    3. <span class="demonstration">默认</span>
    4. <el-date-picker
    5. v-model="value1"
    6. type="date"
    7. placeholder="选择日期">
    8. </el-date-picker>
    9. </div>
    10. <div class="block">
    11. <span class="demonstration">带快捷选项</span>
    12. <el-date-picker
    13. v-model="value2"
    14. align="right"
    15. type="date"
    16. placeholder="选择日期"
    17. :picker-options="pickerOptions1">
    18. </el-date-picker>
    19. </div>
    20. </template>
    21. <script>
    22. export default {
    23. data() {
    24. return {
    25. pickerOptions1: {
    26. disabledDate(time) {
    27. return time.getTime() > Date.now();
    28. },
    29. shortcuts: [{
    30. text: '今天',
    31. onClick(picker) {
    32. picker.$emit('pick', new Date());
    33. }
    34. }, {
    35. text: '昨天',
    36. onClick(picker) {
    37. const date = new Date();
    38. date.setTime(date.getTime() - 3600 * 1000 * 24);
    39. picker.$emit('pick', date);
    40. }
    41. }, {
    42. text: '一周前',
    43. onClick(picker) {
    44. const date = new Date();
    45. date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
    46. picker.$emit('pick', date);
    47. }
    48. }]
    49. },
    50. value1: '',
    51. value2: '',
    52. };
    53. }
    54. };
    55. </script>

    其他日期单位

    通过扩展基础的日期选择,可以选择周、月、年或多个日期

    DatePicker 日期选择器 - 图2

    1. <div class="container">
    2. <div class="block">
    3. <span class="demonstration"></span>
    4. <el-date-picker
    5. v-model="value3"
    6. type="week"
    7. format="yyyy 第 WW 周"
    8. placeholder="选择周">
    9. </el-date-picker>
    10. </div>
    11. <div class="block">
    12. <span class="demonstration"></span>
    13. <el-date-picker
    14. v-model="value4"
    15. type="month"
    16. placeholder="选择月">
    17. </el-date-picker>
    18. </div>
    19. </div>
    20. <div class="container">
    21. <div class="block">
    22. <span class="demonstration"></span>
    23. <el-date-picker
    24. v-model="value5"
    25. type="year"
    26. placeholder="选择年">
    27. </el-date-picker>
    28. </div>
    29. <div class="block">
    30. <span class="demonstration">多个日期</span>
    31. <el-date-picker
    32. type="dates"
    33. v-model="value14"
    34. placeholder="选择一个或多个日期">
    35. </el-date-picker>
    36. </div>
    37. </div>
    38. <script>
    39. export default {
    40. data() {
    41. return {
    42. value3: '',
    43. value4: '',
    44. value5: '',
    45. value14: []
    46. };
    47. }
    48. };
    49. </script>

    选择日期范围

    可在一个选择器中便捷地选择一个时间范围

    DatePicker 日期选择器 - 图3

    在选择日期范围时,默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份,可以使用unlink-panels属性解除联动。

    1. <template>
    2. <div class="block">
    3. <span class="demonstration">默认</span>
    4. {{value6}}
    5. <el-date-picker
    6. v-model="value6"
    7. type="daterange"
    8. range-separator="至"
    9. start-placeholder="开始日期"
    10. end-placeholder="结束日期">
    11. </el-date-picker>
    12. </div>
    13. <div class="block">
    14. <span class="demonstration">带快捷选项</span>
    15. <el-date-picker
    16. v-model="value7"
    17. type="daterange"
    18. align="right"
    19. unlink-panels
    20. range-separator="至"
    21. start-placeholder="开始日期"
    22. end-placeholder="结束日期"
    23. :picker-options="pickerOptions2">
    24. </el-date-picker>
    25. </div>
    26. </template>
    27. <script>
    28. export default {
    29. data() {
    30. return {
    31. pickerOptions2: {
    32. shortcuts: [{
    33. text: '最近一周',
    34. onClick(picker) {
    35. const end = new Date();
    36. const start = new Date();
    37. start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    38. picker.$emit('pick', [start, end]);
    39. }
    40. }, {
    41. text: '最近一个月',
    42. onClick(picker) {
    43. const end = new Date();
    44. const start = new Date();
    45. start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
    46. picker.$emit('pick', [start, end]);
    47. }
    48. }, {
    49. text: '最近三个月',
    50. onClick(picker) {
    51. const end = new Date();
    52. const start = new Date();
    53. start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
    54. picker.$emit('pick', [start, end]);
    55. }
    56. }]
    57. },
    58. value6: '',
    59. value7: ''
    60. };
    61. }
    62. };
    63. </script>

    日期格式

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

    默认情况下,组件接受并返回Date对象。以下为可用的格式化字串,以 UTC 2017年1月2日 03:04:05 为例:

    请注意大小写

    格式 含义 备注 举例
    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小时制,须和 Aa 使用;不补0 3
    hh 小时 12小时制,须和 Aa 使用 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

    DatePicker 日期选择器 - 图4

    1. <template>
    2. <div class="block">
    3. <span class="demonstration">默认为 Date 对象</span>
    4. <div class="demonstration">值:{{ value10 }}</div>
    5. <el-date-picker
    6. v-model="value10"
    7. type="date"
    8. placeholder="选择日期"
    9. format="yyyy 年 MM 月 dd 日">
    10. </el-date-picker>
    11. </div>
    12. <div class="block">
    13. <span class="demonstration">使用 value-format</span>
    14. <div class="demonstration">值:{{ value11 }}</div>
    15. <el-date-picker
    16. v-model="value11"
    17. type="date"
    18. placeholder="选择日期"
    19. format="yyyy 年 MM 月 dd 日"
    20. value-format="yyyy-MM-dd">
    21. </el-date-picker>
    22. </div>
    23. <div class="block">
    24. <span class="demonstration">时间戳</span>
    25. <div class="demonstration">值:{{ value12 }}</div>
    26. <el-date-picker
    27. v-model="value12"
    28. type="date"
    29. placeholder="选择日期"
    30. format="yyyy 年 MM 月 dd 日"
    31. value-format="timestamp">
    32. </el-date-picker>
    33. </div>
    34. </template>
    35. <script>
    36. export default {
    37. data() {
    38. return {
    39. value10: '',
    40. value11: '',
    41. value12: ''
    42. };
    43. }
    44. };
    45. </script>

    默认显示日期

    在选择日期范围时,指定起始日期和结束日期的默认时刻。

    DatePicker 日期选择器 - 图5

    选择日期范围时,默认情况下,起始日期和结束日期的时间部分均为当天的 0 点 0 分 0 秒。通过default-time可以分别指定二者的具体时刻。default-time接受一个数组,其中的值为形如12:00:00的字符串,第一个值控制起始日期的时刻,第二个值控制结束日期的时刻。

    1. <template>
    2. <div class="block">
    3. <p>组件值:{{ value13 }}</p>
    4. <el-date-picker
    5. v-model="value13"
    6. type="daterange"
    7. start-placeholder="开始日期"
    8. end-placeholder="结束日期"
    9. :default-time="['00:00:00', '23:59:59']">
    10. </el-date-picker>
    11. </div>
    12. </template>
    13. <script>
    14. export default {
    15. data() {
    16. return {
    17. value13: []
    18. };
    19. }
    20. };
    21. </script>

    Attributes

    参数 说明 类型 可选值 默认值
    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 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

    Picker Options

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

    Shortcuts

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

    Events

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

    Methods

    方法名 说明 参数
    focus 使 input 获取焦点

    原文: http://element-cn.eleme.io/#/zh-CN/component/date-picker