VEUI

VEUI on GitHub
中文

DatePicker

Demos

Selecting a single date

By default, you can click a date cell in the dropdown overlay to select a single date. Use the clearable prop to make selected values clearable. Use the placeholder prop to customize the description text displayed when nothing is selected yet.

Clearable

Customizable placeholder

Pick a day

Supports v-model with value type being the native Date.

Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <h4>Clearable</h4>
    <veui-date-picker
      v-model="date"
      clearable
    />
  </section>
  <section>
    <h4>Customizable placeholder</h4>
    <veui-date-picker
      v-model="date2"
      placeholder="Pick a day"
    />
  </section>
</article>
</template>

<script>
import { DatePicker } from 'veui'

export default {
  components: {
    'veui-date-picker': DatePicker
  },
  data () {
    return {
      date: new Date(),
      date2: null
    }
  }
}
</script>

<style lang="less" scoped>
section:not(:last-child) {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Selecting a date range

When range is true, you can select a date range in the dropdown overlay.

Clearable

开始日期
~
结束日期

Customizable placeholder

Pick a date range...
~

Supports v-model, with value type being [Date, Date] when selecting a date range.

Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <h4>Clearable</h4>
    <veui-date-picker
      v-model="range"
      range
      clearable
    />
  </section>
  <section>
    <h4>Customizable placeholder</h4>
    <veui-date-picker
      v-model="range"
      class="custom"
      range
      placeholder="Pick a date range..."
    />
  </section>
</article>
</template>

<script>
import { DatePicker } from 'veui'

export default {
  components: {
    'veui-date-picker': DatePicker
  },
  data () {
    return {
      range: null
    }
  }
}
</script>

<style lang="less" scoped>
section:not(:last-child) {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Setting selection shortcuts

When selecting a date range, the shortcuts prop can be used to provide predefined date range shortcuts to be selected from.

开始日期
~
结束日期
Edit this demo on GitHubEdit
<template>
<article>
  <veui-date-picker
    v-model="range"
    :shortcuts="shortcuts"
    range
    clearable
  />
</article>
</template>

<script>
import { DatePicker } from 'veui'

export default {
  components: {
    'veui-date-picker': DatePicker
  },
  data () {
    return {
      range: null,
      shortcuts: [
        {
          label: '上个月',
          from: {
            startOf: 'month',
            month: -1
          },
          to: {
            startOf: 'month',
            days: -1
          }
        },
        {
          label: '本月',
          from: {
            startOf: 'month'
          },
          to: 0
        },
        {
          label: '本周',
          from: {
            startOf: 'week',
            days: 0
          },
          to: 0
        },
        {
          label: '最近7天',
          from: -6,
          to: 0
        },
        {
          label: '今天',
          to: 0
        }
      ]
    }
  }
}
</script>

API

Props

NameTypeDefaultDescription
rangeboolean=falseWhether users can select a date range. When the value is not 'date', range will be ignored.
selectedDate | Array=-

v-model

The selected date (range). Value type is determined by whether range is true.

rangeType
falseDate
true[Date, Date]
panelnumber=1The number of month panel displayed in the dropdown overlay.
todayDate=new Date()The date of “today”.
week-startnumber=calendar.weekStartThe start of a week. Can be globally configured.
fill-monthboolean=trueWhether to show dates of previous and next month in current panel when there's only one month panel.
date-classstring | Array | Object | function={}Custom HTML class for specified date. All class expressions supported by Vue are available for non-function values. When specified as a function, whose signature is function(Date): string | Array<string>|Object<string, boolean>, the return value is also class expressions suppported by Vue.
disabled-datefunction(Date, Date=): boolean=() => falseUsed to customize whether the specified date is disabled or not. The first parameter is the date to be used to determine if the date is disabled. When in the range selection process and a date is already selected, it is passed as the second parameter.
clearableboolean=falseWhether selected date (ranges) can be cleared.
placeholderstring=range ? datepicker.rangePlaceholder : datepicker.placeholderThe placeholder text displayed when nothing is selected. Can be globally configured respectively for both range and single date.
formatstring | function(Date): string='YYYY-MM-DD'When being string type, denotes the format expression for displaying final selected date (ranges). See details at the documentation of date-fns. Can also be a function to customize the formatting logic.
parsefunction(string): Date=Custom function to parse the input string expressions into Date objects.
shortcutsArray<Object>=datepicker.shortcuts

Selection shortcuts can be custmized when selecting a date range. The data type is Array<{label, from, to}>. Can be globally configured.

NameTypeDescription
labelstringText displayed for the shortcut option.
fromDenotes the start date of the shortcut option. See more at Date offset format for shortcut option below.
toDenotes the end date of the shortcut option. See more at Date offset format for shortcut option below.
(#configs-datepicker-shortcutsPosition).
expandedboolean=false

.sync

Whether the dropdown overlay is expanded.

disabledboolean=falseWhether the date picker is disabled.
readonlyboolean=falseWhether the date picker is read-only.

Date offset format for shortcut option

The from and to property in shortcuts options, which are used to calculate the start/end date of an shortcut option, share the same format which is number | Object and default to 0.

  • number values are the offset in days calculated against “today”. eg. -1 means { startOf: 'day', days: -1 }, which is “yesterday”.

  • Object values have the type of {startOf: string=, days: number=, weeks: number=, months: number=, }.

    NameTypeDefaultDescription
    startOfstring='day'The base date. Supported values include 'day' / 'week' / 'month' / 'quarter' / 'year'.
    daynumber=-Offset in days.
    weeknumber=-Offset in weeks.
    monthnumber=-Offset in months.
    quarternumber=-Offset in quarters.
    yearnumber=-Offset in years.

The final date is calculated by accumulating the offset onto the base date.

The following example with labels may help to better understand the calculation logic. You can rapidly set shortcut options once you understand the underlying logic.

[
  {
    label: 'Last month',
    // Turn back a month from the first day of current month,
    // which is the first day of last month
    from: {
      startOf: 'month',
      month: -1
    },
    // Turn back a day from the first day of current month,
    // which is the last day of last month
    to: {
      startOf: 'month',
      days: -1
    }
  },
  {
    label: 'This month',
    // The first day of current month
    from: {
      startOf: 'month'
    },
    // Today
    to: 0
  },
  {
    label: 'This week',
    // The first day of the week, days being 0 can be omitted
    from: {
      startOf: 'week',
      days: 0
    },
    // Today
    to: 0
  },
  {
    label: 'Last 7 days',
    // Turn back 6 days backward from today
    from: -6,
    // To today
    to: 0
  },
  {
    label: 'Today',
    to: 0
  }
]

Slots

NameDescription
date

The content of each date cell in the dropdown overlay. Displays the corresponding day of month by default.

NameTypeDescription
yearnumberThe full representation of year.
monthnumberMonth of a year, starting from 0 as January.
datenumberThe day of month.

Events

NameDescription
select

v-model

Triggered when the selected date (range) is changed. The callback parameter list is (selected) with selected having the same type with the selected prop.

selectstartTriggered when selecting a date range and a start date is selected. The callback parameter list is (picking: Date), being the selected start date.
selectprogress

Triggered when selecting a date range and an end date is marked with pointer/keyboard interaction, and for each time the end date changes. The callback parameter list is (picking), with picking being the marked date range. The type of picking depends on the value of the multiple prop.

multipleType
false[Date, Date]
trueArray<[Date, Date]>
toggleTriggered when the expanded state is going to change. The callback parameter list is (expanded: boolean). expanded denotes whether the dropdown overlay is to be expanded or collapsed.

Configs

KeyTypeDefaultDescription
datepicker.shortcutsArray[]Default shortcut options.
datepicker.shortcutsPositionstring'before'Shows the shortcut options before or after month panels. Corresponds to 'before' and 'after' respectively.
datepicker.placeholderstring@@datepicker.selectDatePlaceholder text displayed when selecting a single date.
datepicker.monthPlaceholderstring@@datepicker.selectMonthPlaceholder text displayed when selecting a month.
datepicker.yearPlaceholderstring@@datepicker.selectYearPlaceholder text displayed when selecting a year.
datepicker.rangePlaceholderstring@@datepicker.selectRangePlaceholder text displayed when selecting a date range.

Icons

NameDescription
calendarCalendar.
clearClear selection.
Edit this page on GitHubEdit
© Baidu, Inc. 2023