1.0.4 • Published 4 years ago
vue-hotel-calendar v1.0.4
基于vue2.x的酒店日历选择插件
效果图
快速使用
安装：
npm install -S vue-hotel-calendar
或者
yarn add vue-hotel-calendar
使用：
import hotelCaldendar from 'vue-hotel-calendar'示例代码
<template>
<div>
<h2>在移动端模式查看</h2>
<input
:value="dateRange"
@click="showCalendar"
readonly
type="text"
class="input-wrap"
placeholder="点击唤起日历组件"
/>
<hotel-calendar
ref="hotelCalendar"
:visibility="show"
@select-date-range="selectDateRangeHandle"
:show-month="4"
format="YYYY-M-D"
></hotel-calendar>
</div>
</template>
<script>
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}晚`
}
}
}
</script>
<style>
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;
}
</style>使用描述：
参数
| props参数 | 类型 | 描述 | 是否必填 | 格式 |
|---|---|---|---|---|
| visibility | boolean | 选择弹框是否显示 | 必填 | 默认：false |
| format | String | 返回的日期格式 | 非必填 | 默认：YYYY-MM-DD |
| initDate | object | 初始化选中的日期范围 | 非必填 | 默认选中：当天日期~后天日期,传参格式{ startDate: 'xxxx-xx-xx', endDate: 'xxxx-xx-xx' } |
| showMonth | Number | 显示多少个月 | 非必填 | 默认：3 |
事件
| 回调函数 | 类型 | 描述 | 格式 |
|---|---|---|---|
| @select-date-range | function | 选择两个日期的后的回调函数，返回选中的日期 | 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' |
如果本身的需求和上述不相符，建议clone一份代码来自己开发,该项目基于webpack5搭建的vue简单应用
安装依赖
yarn install
启动服务
yarn example:dev