Press UI

# Calendar

The calendar component is used to select a date or date range.

# Usage

# Select a single date

The following demonstrates the use of the calendar component in conjunction with the cell, and the confirm event will be triggered after the date selection is completed.

<press-cell title="Select a single date" :value="date" @click="onDisplay" />
<press-calendar :show="show" @close="onClose" @confirm="onConfirm" />

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

# Select multiple dates

After setting type to multiple, multiple dates can be selected. At this time, the date returned by the confirm event is an array structure, and the array contains several selected dates.

<press-cell title="Select Multiple Dates" :value="text" @click="onDisplay" />
<press-calendar
   :show="show"
   type="multiple"
   @close="onClose"
   @confirm="onConfirm"
/>

export default {
   data() {
     return {
       text: '',
       show: false,
     }
   },
   methods: {
     onDisplay() {
       this. show = true;
     },
     onClose() {
       this. show = false;
     },
     onConfirm(detail) {
       this. show = false;
       this.date = `${detail.length} dates selected`;
     },
   }
};

# Select date range

After setting type to range, you can choose a date range. At this time, the date returned by the confirm event is an array structure. The first item of the array is the start time, and the second item is the end time.

<press-cell title="Select Date Range" :value="date" @click="onDisplay" />
<press-calendar
   :show="show"
   type="range"
   @close="onClose"
   @confirm="onConfirm"
/>

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

Tips: By default, the start and end time of the date range cannot be the same day, you can set the allow-same-day attribute to allow the same day to be selected.

# Shortcut selection

Setting show-confirm to false can hide the confirm button, in which case the confirm event will be triggered immediately after the selection is completed.

<press-calendar :show="show" :show-confirm="false" />

# Custom Colors

The color of the calendar can be customized through the color attribute, which is effective for the selected date and the bottom button.

<press-calendar :show="show" color="#07c160" />

# Custom date range

Define the range of the calendar through min-date and max-date. It should be noted that the interval between min-date and max-date should not be too large, otherwise it will cause serious performance problems.

<press-calendar
   :show="show"
   :min-date="minDate"
   :max-date="maxDate"
/>

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

# Custom button text

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

<press-calendar
   :show="show"
   type="range"
   confirm-text="Complete"
   confirm-disabled-text="Please select an end time"
/>

# Custom date text

Format the content of each cell on the calendar by passing in the formatter function

<press-calendar :show="show" type="range" :formatter="formatter" />

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

         if (month === 5) {
           if (date === 1) {
             day.topInfo = 'Labor Day';
           } else if (date === 4) {
             day.topInfo = 'May Fourth Youth Day';
           } else if (date === 11) {
             day.text = 'today';
           }
         }

         if (day.type === 'start') {
           day.bottomInfo = 'check in';
         } else if (day.type === 'end') {
           day.bottomInfo = 'Check out';
         }

         return day;
       },
     }
   },
};

# Customize popup position

Use the position attribute to customize the pop-up position of the pop-up layer. The optional values are top, left, right.

<press-calendar :show="show" round="false" position="right" />

# Maximum date range

When selecting a date range, you can use the max-range attribute to specify the maximum number of days that can be selected. When the selected range exceeds the maximum number of days that can be selected, a corresponding prompt copy will pop up.

<press-calendar type="range" :max-range="3" />

# Custom week start day

Set the day the week starts with the first-day-of-week prop.

<press-calendar :first-day-of-week="1" />

# Tiled display

Set poppable to false, the calendar will be displayed directly on the page instead of popup.

<press-calendar
   title="Calendar"
   :poppable="false"
   :show-confirm="false"
   class="calendar"
/>

.calendar {
   --calendar-height: 500px;
}

# API

# Props

Parameter Description Type Default
type Selection type:
singlemeans selecting a single date,
multiplemeans selecting multiple dates,
rangemeans selecting a date range		 string single
title calendar title string date selection
color theme color, effective for bottom button and selected date string #ee0a24
min-date Optional minimum date timestamp current date
max-date maximum date to choose timestamp six months after current date
default-date The date selected by default, an array when type is multiple or range timestamp | timestamp[] today
row-height date row height number | string 64
formatter date formatting function (day: Day) => Day -
poppable Whether to display the calendar as a popup boolean true
show-mark Whether to show month background watermark boolean true
show-title Whether to show calendar title boolean true
show-subtitle Whether to show calendar subtitle (year, month) boolean true
show-confirm Whether to show the confirm button boolean true
confirm-text Text of the confirm button string OK
confirm-disabled-text Text when confirm button is disabled string OK
first-day-of-week Set the first day of the week 0~6 0
readonly v1.9.1 whether it is read-only, date cannot be selected in read-only state boolean false

# Poppable Props

When poppable of Calendar is true, the following props are supported:

Parameter Description Type Default
show Whether to show the calendar popup boolean false
position Popup position, optional values are top right left string bottom
round Whether to show rounded popups boolean true
close-on-click-overlay Whether to close the overlay on click boolean true
safe-area-inset-bottom Whether to enable bottom safe area adaptation boolean true

# Range Props

When the type of Calendar is range, the following props are supported:

Parameter Description Type Default
max-range The maximum number of optional days in the date range, the default is unlimited number | string -
range-prompt Prompt text when the range selection exceeds the maximum selectable days string | null Selected days cannot exceed xx days
show-range-prompt Whether to display the prompt text when the range selection exceeds the maximum selectable days boolean true
allow-same-day Whether to allow date ranges to start and end on the same day boolean false

# Day data structure

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

key name description type
date The Date object corresponding to the date Date
type date type, optional values are selected, start, middle, end, disabled string
text text displayed in the middle string
topInfo Top tip information string
bottomInfo Bottom message string
className custom className string

# Events

Event Name Description Callback Parameters
@select Triggered when any date is clicked value: Date | Date[]
@unselect When the type of the Calendar is multiple, trigger when the selected date is clicked value: Date
@confirm Triggered after the date is selected, if show-confirm is true, it will be triggered after clicking the confirm button value: Date | Date[]
@open Triggered when the popup layer is opened -
@close Triggered when the popup layer is closed -
@opened Triggered when the popup layer is opened and the animation ends -
@closed Triggered when the popup layer is closed and the animation ends -
@over-range Triggered when the range selection exceeds the maximum selectable days -
@click-subtitle v1.8.1 Triggered when the calendar subtitle is clicked WechatMiniprogram.TouchEvent

# Slots

Name Description
title custom title
footer Customize the content of the bottom area

# method

You can get the Calendar instance and call the instance method through selectComponent.

method name description parameters return value
reset reset selected date to default value - -
横屏

← Cascader →