VEUI

VEUI on GitHub
Play!中文

Calendar

Examples

Single date

By default, clicking on a date selects a single date.

Mon Tue Wed Thu Fri Sat Sun

Selected: Monday, September 9, 2024

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

Edit this demo on GitHubEdit
<template>
<article>
  <veui-calendar v-model="date"/>
  <p>Selected: {{ readableDate }}</p>
</article>
</template>

<script>
import { Calendar } from 'veui'

export default {
  components: {
    'veui-calendar': Calendar
  },
  data () {
    return {
      date: new Date()
    }
  },
  computed: {
    readableDate () {
      return this.date.toLocaleDateString(this.$i18n.locale, {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
    }
  }
}
</script>

Multiple dates and ranges

When the multiple prop is set, multiple dates can be selected. When the range prop is set, a date range can be selected.

Multiple dates

Mon Tue Wed Thu Fri Sat Sun
Selected: Nothing.

Date ranges

Mon Tue Wed Thu Fri Sat Sun
Selected: Nothing.

Supports v-model, with value type being Array<Date> when selecting multiple dates, being [Date, Date] when selecting a date range.

Edit this demo on GitHubEdit
<template>
<article>
  <section class="col">
    <h4>Multiple dates</h4>
    <veui-calendar
      v-model="dates"
      multiple
    />
    <section>Selected: {{ readableDates }}</section>
  </section>
  <section class="col">
    <h4>Date ranges</h4>
    <veui-calendar
      v-model="range"
      range
    />
    <section>Selected: {{ readableRange }}</section>
  </section>
</article>
</template>

<script>
import { Calendar } from 'veui'

export default {
  components: {
    'veui-calendar': Calendar
  },
  data () {
    return {
      dates: null,
      range: null
    }
  },
  computed: {
    readableDates () {
      if (!this.dates || !this.dates.length) {
        return 'Nothing.'
      }
      return this.toReadable(this.dates).join(', ')
    },
    readableRange () {
      if (!this.range) {
        return 'Nothing.'
      }
      return this.toReadable(this.range).join(' to ')
    }
  },
  methods: {
    toReadable (dates) {
      return dates.map(date => date.toLocaleDateString(this.$i18n.locale))
    }
  }
}
</script>

<style lang="less" scoped>
article {
  overflow: hidden;
}

.col {
  float: left;
  width: 340px;
  margin-right: 20px;
}

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

Multiple date ranges

When the multiple and range properties are set simultaneously, multiple date ranges can be selected. When the panel prop is set, the number of calendar panels can be specified. The strategy for merging the two selected time periods is to select the time period if no date has been selected, otherwise the time period is deselected.

Mon Tue Wed Thu Fri Sat Sun
Mon Tue Wed Thu Fri Sat Sun
Selected: Nothing.

Supports v-model, with value type being Array<[Date, Date]> when selecting multiple date ranges.

Edit this demo on GitHubEdit
<template>
<article>
  <veui-calendar
    v-model="ranges"
    range
    multiple
    :panel="2"
  />
  <section>Selected: {{ readableRanges }}</section>
</article>
</template>

<script>
import { Calendar } from 'veui'

export default {
  components: {
    'veui-calendar': Calendar
  },
  data () {
    return {
      ranges: null
    }
  },
  computed: {
    readableRanges () {
      if (!this.ranges || this.ranges.length === 0) {
        return 'Nothing.'
      }
      return this.ranges
        .map(range => this.toReadable(range).join(' to '))
        .join(', ')
    }
  },
  methods: {
    toReadable (dates) {
      return dates.map(date => date.toLocaleDateString(this.$i18n.locale))
    }
  }
}
</script>

Calendar types

Set the type prop to specify the type of calendar: year, month, or day.

Mon Tue Wed Thu Fri Sat Sun
Edit this demo on GitHubEdit
<template>
<article>
  <veui-radio-group
    v-model="type"
    class="group"
    :items="types"
  />
  <veui-calendar :type="type"/>
</article>
</template>

<script>
import { Calendar, RadioGroup } from 'veui'

export default {
  components: {
    'veui-calendar': Calendar,
    'veui-radio-group': RadioGroup
  },
  data () {
    return {
      date: new Date(),
      type: 'date',
      types: [
        { label: 'date', value: 'date' },
        { label: 'month', value: 'month' },
        { label: 'year', value: 'year' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.group {
  margin-bottom: 20px;
}
</style>

Show Dates from Other Months

Set the fill-month prop to control whether to display dates from other months.

Mon Tue Wed Thu Fri Sat Sun
Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <veui-checkbox v-model="isFill">
      Fill month
    </veui-checkbox>
  </section>
  <veui-calendar :fill-month="isFill"/>
</article>
</template>

<script>
import { Calendar, Checkbox } from 'veui'

export default {
  components: {
    'veui-calendar': Calendar,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      date: new Date(),
      isFill: true
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}
</style>

Disabled dates

Set the disabled-date prop to customize whether a specific date is disabled.

只允许选未来的日期

Mon Tue Wed Thu Fri Sat Sun
Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <h4>只允许选未来的日期</h4>
    <veui-calendar :disabled-date="disabledDate"/>
  </section>
</article>
</template>

<script>
import { Calendar } from 'veui'

export default {
  components: {
    'veui-calendar': Calendar
  },
  created () {
    this.now = new Date()
    this.now.setHours(0, 0, 0, 0)
  },
  methods: {
    disabledDate (date) {
      return this.now.getTime() > date.getTime()
    }
  }
}
</script>

Custom date style

Set date-class to customize the class of specified dates.

Mon Tue Wed Thu Fri Sat Sun
Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <veui-calendar
      class="demo-date-class"
      :date-class="dayClass"
    />
  </section>
</article>
</template>

<script>
import { Calendar } from 'veui'

export default {
  components: {
    'veui-calendar': Calendar
  },
  methods: {
    dayClass (date) {
      return [0, 6].includes(date.getDay()) ? 'weekend' : undefined
    }
  }
}
</script>

<style lang="less" scoped>
.demo-date-class {
  ::v-deep .weekend button {
    color: rebeccapurple;
  }
}
</style>

Custom date content

Use the before slot to customize the content before the calendar.

Mon Tue Wed Thu Fri Sat Sun
Edit this demo on GitHubEdit
<template>
<article>
  <veui-calendar
    v-model="date"
    class="default"
  >
    <template #before>
      <veui-stack
        class="before"
        gap="xxs"
        justify="center"
      >
        <veui-button
          ui="s ghost"
          @click="pickDay(-1)"
        >
          Yesterday
        </veui-button>
        <veui-button
          ui="s ghost"
          @click="pickDay(0)"
        >
          Today
        </veui-button>
        <veui-button
          ui="s ghost"
          @click="pickDay(1)"
        >
          Tomorrow
        </veui-button>
      </veui-stack>
    </template>
    <template #date="d">
      <u v-if="d.date === 1">{{ d.date }}</u>
      <template v-else>
        {{ d.date }}
      </template>
    </template>
  </veui-calendar>
</article>
</template>

<script>
import { Calendar, Button, Stack } from 'veui'

export default {
  components: {
    'veui-calendar': Calendar,
    'veui-button': Button,
    'veui-stack': Stack
  },
  data () {
    return {
      date: new Date()
    }
  },
  methods: {
    pickDay (d) {
      let date = new Date()
      date.setDate(date.getDate() + d)
      this.date = date
    }
  }
}
</script>

<style scoped>
.before {
  padding: 8px;
  border-bottom: 1px solid #e2e6f0;
}
</style>

API

Props

NameTypeDefaultDescription
typestring'date'The type of the calendar, available values are 'date', 'month', and 'year', corresponding to the date/month/year view.
multiplebooleanfalseWhether multiple dates (ranges) can be selected.
rangebooleanfalseWhether to select a date range.
selectedDate | Array-

v-model

The value of the selected date (range), depending on the values of the multiple and range properties, has a different data format.

multiplerangeType
falsefalseDate
truefalseArray<Date>
falsetrue[Date, Date]
truetrueArray<[Date, Date]>
panelnumber1The number of calendar panels.
todayDatenew Date()The date of "today".
week-startnumbercalendar.weekStartThe start of the week. Can be configured globally here.
fill-monthbooleantrueWhether to display dates outside of the current month in the current month panel when there is only one panel.
date-classstring | Array | Object | function{}Custom HTML class for specific dates. When passed a non-function value, the data format is all Vue-supported class expressions; when passed a function, the signature is function(Date): string | Array<string>|Object<string, boolean>, and the return value format is also all Vue-supported class expressions.
disabled-datefunction(Date, Date=): boolean() => falseUsed to customize whether specified dates are disabled. The first parameter is the date that needs to be checked for disablement. If in the process of selecting a range and a date has already been selected, it will be passed in as the second parameter.
disabledbooleanfalseWhether the calendar is disabled.
readonlybooleanfalseWhether the calendar is read-only.

Slots

NameDescription
beforeAn area above the panel that can be customized.
afterAn area below the panel that can be customized.
date

An area within a single day cell that can be used to customize the content for each day.

Default content: the date of the corresponding date.

NameTypeDescription
yearnumberThe full year.
monthnumberThe month number, 0 means January.
datenumberThe date within the month.

Events

NameDescription
select

v-model

Triggered after selection changes, called back with (selected). The data type is the same as the selected prop.

selectstartTriggered when selecting a date range, called back with (picking: Date), representing the selected start date.
selectprogress

Triggered when selecting a date range, and the end date marked by mouse or keyboard interaction changes after selecting the start date. Called back with (picking), representing the current marked date range, the type depends on the value of the multiple prop.

multipleType
false[Date, Date]
trueArray<[Date, Date]>
viewchangeTriggered when the displayed month of the panel changes. Called back with (month: Object<{year: number, month: number, index: number}>), representing the current year and month (month is 0 for January).

Configs

KeyTypeDefaultDescription
calendar.weekStartnumber1The day of the week when the week starts. Monday to Sunday corresponds to 1 to 7.

Icons

NameDescription
backwardPrevious year.
prevPrevious page.
nextNext page.
forwardNext year.
expandExpand the drop-down menu.
Edit this page on GitHubEdit
© Baidu, Inc. 2024