vue.js 日期选择_Vue.js的响应日期范围选择器，显示所选的夜晚数-CSDN博客

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的响应日期范围选择器，它显示所选的夜晚数量，并允许几个有用的选项，例如自定义入住/退房规则，本地化支持等。

View demo 查看演示 Download Source 下载源

安装 (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 or String
类型： Date或String
Default: new Date()
默认值： new Date()

The start view date. All the dates before this date will be disabled.

开始查看日期。此日期之前的所有日期将被禁用。

结束日期 (endDate)

Type: Date or String or Boolean
类型： 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 or Function
类型： 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'],
}