html页面酒店日历插件,基于vue2.x的酒店日历选择插件

基于vue2.x的酒店日历选择插件

效果图

快速使用安装：

npm install -S vue-hotel-calendar

或者

yarn add vue-hotel-calendar

使用：

import hotelCaldendar from 'vue-hotel-calendar'

示例代码

在移动端模式查看

:value="dateRange"

@click="showCalendar"

readonly

type="text"

class="input-wrap"

placeholder="点击唤起日历组件"

/>

ref="hotelCalendar"

:visibility="show"

@select-date-range="selectDateRangeHandle"

:show-month="4"

format="YYYY-M-D"

>

import hotelCalendar from 'vue-hotel-calendar'

export default {

components: {

hotelCalendar

},

data() {

return {

show: false,

dateRange: ''

}

},

mounted() {

var e = this.$refs.hotelCalendar.getValue()

this.selectDateRangeHandle(e)

},

methods: {

showCalendar() {

this.show = true;

},

selectDateRangeHandle(e) {

this.show = false;

this.dateRange = `入住${e.startDate}离店${e.endDate}, 住${e.seletDays - 1}晚`

}

}

}

h2 {

text-align: center;

}

.input-wrap {

width: 300px;

height: 36px;

box-sizing: border-box;

border-radius: 10px;

outline: none;

border: 1px solid #666;

padding-left: 10px;

display: block;

margin: auto;

}

使用描述：props参数类型描述是否必填格式visibilityboolean选择弹框是否显示必填默认：false

formatString返回的日期格式非必填默认：YYYY-MM-DD

initDateobject初始化选中的日期范围非必填默认选中：当天日期~后天日期,传参格式{ startDate: 'xxxx-xx-xx', endDate: 'xxxx-xx-xx' }

showMonthNumber显示多少个月非必填默认：3回调函数类型描述格式select-date-rangefunction选择两个日期的后的回调函数，返回选中的日期function(res) {....}内置方法描述this.$refs['hotelCalendar'].getValue()返回选中的日期,格式： {startDate: YYYY-MM-DD,endDate: YYYY-MM-DD,seletDays: Days }

this.$refs['hotelCalendar'].getCalenderList(date, mixDate, maxDate)重新渲染列表， 格式：date: YYYY-MM 开始月份, mixDate: YYYY-MM-DD，maxDate: 'YYYY-MM-DD'