Vant Calendar calendar

Introduced

The calendar component is used to select a date or date interval, and version 2.4 starts to support this component

Introduced

import Vue from 'vue';
import { Calendar } from 'vant';

Vue.use(Calendar);

Code demo

Select a single date

The following demonstrates the use of combining cells to use the calendar component, which triggers the conferring event when the date selection is complete

<van-cell title="选择单个日期" :value="date" @click="show = true" />
<van-calendar v-model="show" @confirm="onConfirm" />

export default {
  data() {
    return {
      date: '',
      show: false
    };
  },
  methods: {
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    }
  }
};

Select the date interval

When type is set to range, you can select a date interval, at which point the confirm event returns an array structure, with the first item of the array being the start time and the second item being the end time.

<van-cell title="选择日期区间" :value="date" @click="show = true" />
<van-calendar v-model="show" type="range" @confirm="onConfirm" />

export default {
  data() {
    return {
      date: '',
      show: false
    };
  },
  methods: {
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
    }
  }
};

Quick selection

Setting show-sure to false hides the confirmation button, in which case the conferm event is triggered immediately after the selection is complete

<van-calendar v-model="show" :show-confirm="false" />

Custom colors

The color of the calendar can be customized with the color of the color of the color, effective for the selected date and the bottom button

<van-calendar v-model="show" color="#07c160" />

Customize the date range

Define the range of calendars with min-date and max-date

<van-calendar
  v-model="show"
  :min-date="minDate"
  :max-date="maxDate"
/>

export default {
  data() {
    return {
      show: false,
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(2010, 0, 31)
    };
  }
};

Custom button text

Set the text of the button with the confirm-text, and set the text when the button is disabled by the confirm-disabled-text

<van-calendar
  v-model="show"
  type="range"
  confirm-text="完成"
  confirm-disabled-text="请选择结束时间"
/>

Custom date document

Format the contents of each grid on the calendar by passing in the formatt function

<van-calendar
  v-model="show"
  type="range"
  :formatter="formatter"
/>

export default {
  methods: {
    formatter(day) {
      const month = day.date.getMonth() + 1;
      const date = day.date.getDate();

      if (month === 5) {
        if (date === 1) {
          day.topInfo = '劳动节';
        } else if (date === 4) {
          day.topInfo = '五四青年节';
        } else if (date === 11) {
          day.text = '今天';
        }
      }

      if (day.type === 'start') {
        day.bottomInfo = '入住';
      } else if (day.type === 'end') {
        day.bottomInfo = '离店';
      }

      return day;
    }
  }
}

Customize the pop-up location

Customize the pop-up position of the pop-up layer with theposition property, with the optional values top, left, right

<van-calendar
  v-model="show"
  :round="false"
  position="right"
/>

The maximum range of the date range

When you select a date interval, you can specify the maximum number of optional days through the max-range property, and when you select a range that exceeds the maximum number of optional days, a prompt will pop up

<van-calendar
  type="range"
  :max-range="3"
  :style="{ height: '500px' }"
/>

Tile display

Set popable to false, and the calendar appears directly on the page, rather than as a bullet layer

<van-calendar
  title="日历"
  :poppable="false"
  :show-confirm="false"
  :style="{ height: '500px' }"
/>

Api

Props

Parameters	Description	Type	The default
v-model	Whether to display the calendar spring window	boolean	false
type	Select type, single select a single date, range the selection date interval	string	single
title	The calendar title	string	日期选择
color	Color, effective for the bottom button and the selected date	string	#ee0a24
min-date	Minimum date	Date	The current date
max-date	The maximum date	Date	Six months after the current date
default-date	The date selected by default	Date | Date[]	Today
row-height	The date line is high	number | string	64
formatter	The date format function	(day: Day) => Day	-
position	Pop-up location with an optional top right left	string	bottom
poppable	Whether to display the calendar in the form of a bullet layer	boolean	true
round	Whether to display a rounded e-window	boolean	true
show-mark	Whether to display the month background watermark	boolean	true
show-confirm	Whether to display the confirmation button	boolean	true
close-on-popstate v2.4.4	Whether to close automatically when the page is rolled back	boolean	false
close-on-click-overlay	Whether to close after tapping the matte layer	boolean	true
safe-area-inset-bottom	Whether to turn on the bottom safety zone to fit	boolean	true
confirm-text	Confirm the text of the button	string	确定
confirm-disabled-text	The text that confirms that the button is disabled	string	确定
max-range v2.4.3	The date interval is optional for a maximum number of days, with no limit by default	number | string	-
range-prompt v2.4.3	Select the prompt case when it exceeds the interval range	string	选择天数不能超过 xx 天
get-container v2.4.4	Specify the mounted node, using an example	string | () => Element	-

Day data structure

Each date in the calendar corresponds to a Day object, and the contents of the Day object can be customized through the formatter property

The key name	Description	Type
date	The Date object for the date	Date
type	Date type, optional values selected start middle end disabled	string
text	The text that appears in the middle	string
topInfo	The prompt above	string
bottomInfo	The prompts below	string
className	Additional class names	string

Events

The name of the event	Description	Callback parameters
select	Triggered when you click on any date	value: Date | Date[]
confirm	Triggered when the date selection is show-confirm true click the confirmation button to trigger	value: Date | Date[]

Slots

Name	Description
title	Custom title
footer	Customize the bottom area content

Method

Ref allows you to get to the Calendar instance and call the instance method, as detailed in the component instance method

The method name	Description	Parameters	Returns a value
reset	Reset the selected date to the default	-	-

Problems

Failed to initialize components on iOS systems?

If you're having trouble rendering components on iOS, make sure you're not creating a Date object with a writing like new Date ('2020-01-01'), iOS doesn't support a date format separated by a midline, which is new Date ('2020/01/01').

A detailed explanation of this problem: stackoverflow .