vue.js 日期选择
VUE酒店日期选择器 (vue-hotel-datepicker)
A responsive date range picker for Vue.js that displays the number of nights selected and allow several useful options like custom check-in/check-out rules, localisation support and more.
Vue.js的响应日期范围选择器,它显示所选的夜晚数量,并允许几个有用的选项,例如自定义入住/退房规则,本地化支持等。
安装 (Installation)
NPM (NPM)
Install the package:
安装软件包:
npm install vue-hotel-datepicker --save
import HotelDatePicker from 'vue-hotel-datepicker'
export default {
components: {
HotelDatePicker,
},
}
<HotelDatePicker />
道具/选项 (Props/Options)
格式 (format)
Type:
String
类型:
String
Default:
YYYY-MM-DD
默认值:
YYYY-MM-DD
The date format string.
日期格式字符串。
开始日期 (startDate)
Type:
Date
orString
类型:
Date
或String
Default:
new Date()
默认值:
new Date()
The start view date. All the dates before this date will be disabled.
开始查看日期。 此日期之前的所有日期将被禁用。
结束日期 (endDate)
Type:
Date
orString
orBoolean
类型:
Date
或String
或Boolean
Default:
false
默认值:
false
The end view date. All the dates after this date will be disabled.
结束观看日期。 此日期之后的所有日期将被禁用。
minNights (minNights)
Type:
Number
类型:
Number
Default:
1
默认值:
1
Minimum nights required to select a range of dates.
选择日期范围所需的最短住宿天数。
maxNights (maxNights)
Type:
Number
类型:
Number
Default:
0
默认值:
0
Maximum nights required to select a range of dates.
选择日期范围所需的最长时间。
DisabledDates (disabledDates)
Type:
Array
类型:
Array
Default:
[]
默认值:
[]
An array of strings in this format: YYYY-MM-DD
. All the dates passed to the list will be disabled.
此格式的字符串数组: YYYY-MM-DD
。 传递到列表的所有日期都将被禁用。
DisabledDaysOfWeek (disabledDaysOfWeek)
Type:
Array
类型:
Array
Default:
[]
默认值:
[]
An array of strings in this format: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
. All the days passed to the list will be disabled.
此格式的字符串数组: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
。 传递到列表的所有日期都将被禁用。
allowRanges (allowedRanges)
Type:
Array
类型:
Array
Default:
[]
默认值:
[]
An array of numbers. Example: [7,10,14]
. After selecting the start date the calendar will be updated only allowing the checkout 7, 10 or 14 days after.
数字数组。 例如: [7,10,14]
。 选择开始日期后,日历将仅在7、10或14天后允许结帐时进行更新。
enableCheckout (enableCheckout)
Type:
Boolean
类型:
Boolean
Default:
false
默认值:
false
If true
, allows the checkout on a disabled date.
如果为true
,则允许在禁用日期进行检出。
悬停工具提示 (hoveringTooltip)
Type:
Boolean
orFunction
类型:
Boolean
或Function
Default:
true
默认值:
true
Shows a tooltip with the number of nights when hovering a date.
显示带有日期停留时间的工具提示。
工具提示消息 (tooltipMessage)
Type:
String
类型:
String
Default
null
默认为
null
If provided, it will override the default tooltip "X nights" with the text provided. You can use HTML in the string.
如果提供的话,它将使用提供的文本覆盖默认的工具提示“ X晚”。 您可以在字符串中使用HTML。
i18n (i18n)
Type:
Object
类型:
Object
Default:
默认:
i18n: {
night: 'Night',
nights: 'Nights',
'day-names': ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'],
'check-in': 'Check-in',
'check-out': 'Check-Out',
'month-names': ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
}
API (API)
hideDatepicker() (hideDatepicker())
Hide datepicker
隐藏日期选择器
showDatepicker() (showDatepicker())
Show datepicker
显示日期选择器
toggleDatepicker() (toggleDatepicker())
Toggle datepicker
切换日期选择器
大事记 (Events)
checkInChanged (checkInChanged)
Emitted every time a new check in date is selected with the new date as payload
每次选择新的入住日期(以新日期作为有效负载)时发出
checkOutChanged (checkOutChanged)
Emitted every time a new check out date is selected with the new date as payload
每次选择新的退房日期并以新日期作为有效负载时发出
vue.js 日期选择