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.

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

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

<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

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=, }.

  Properties

  Name	Type	Default	Description
  startOf	string=	'day'	The base date. Supported values include 'day' / 'week' / 'month' / 'quarter' / 'year'.
  day	number=	-	Offset in days.
  week	number=	-	Offset in weeks.
  month	number=	-	Offset in months.
  quarter	number=	-	Offset in quarters.
  year	number=	-	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

Events

Configs

Icons