更新记录

2.1.1(2019-07-25)

  • 兼容价格日历日期格式,如2019-08-01、2019/08/01、2019/8/1
  • 优化app对toLocaleDateString方法的bug

2.1.0(2019-07-07)

  • 修复H5进入日历时没有定位到date||startDate的问题
查看更多

组件开篇 (mobile-calendar-simple)

支持微信小程序、支付宝小程序、H5,其他未测试,理论支持

  • Calendar.vue 可以传参设置主题色(如:themeColor="'#f60'"),不依赖任何less,sass,stylus等预加载
  • Calendar-simple.vue(有默认主题色)不可以动态传参设置主题色,但是可以通过源代码less变量@color进行全局修改(依赖less)
+ 为了及时响应大家的各种功能需求,可谓不遗余力
+ 所以希望能在下面github链接里给个star和fork一下,也算是鼓励一下了!
+ 同时有什么新的需求和建议可以继续联系我,我及时更新...

github链接 链接名称

使用方法

若在vue-cli项目中安装:npm install mobile-calendar-simple -S (若使用uniapp的工具HBuilderX导入,可以忽略此步骤)

<template>
    <div>
        <!--用法一-->
        <Calendar :date="'yyyy-mm-dd'" @callback="getDate" /> 如果默认今天可简写:<Calendar />
        <!--用法二(默认:mode="1",酒店入住模式)-->
        <Calendar :startDate="'yyyy-mm-dd'" :endDate="'yyyy-mm-dd'"  @callback="getDate" />
        <!--用法三(:mode="2"),往返模式-->
        <Calendar  :startDate="'yyyy-mm-dd'" :endDate="'yyyy-mm-dd'" :mode="2"  @callback="getDate" />
        <!--用法四,价格日历模式-->
        <Calendar  :priceList="priceList"  @callback="getDate" />
        <!--用法五,不可操作的日期-->
        <Calendar  :disabledList="disabledList"  @callback="getDate" />
        <!--设置主题色-->
        <Calendar :date="'yyyy-mm-dd'" :themeColor="'#FF6600'"  @callback="getDate" />
        <!--如果需要solt-->
        <Calendar :date="'yyyy-mm-dd'"  @callback="getDate">
            <div>
                ...此处也支持slot注入(不需要可以忽略此div)
            </div>
        </Calendar>
    </div>
</template>

    import Calendar from '@/components/mobile-calendar-simple/Calendar.vue'
    export default {
        data(){
            return {
                disabledList:['2019-6-25','2019-6-26'],//不可操作的日期
                priceList:[//价格日历列表
                    {date:'2019-6-24',price:'¥199'},
                    {date:'2019-6-25',price:'¥500'},
                    {date:'2019-6-26',price:'¥199'},
                    {date:'2019-6-27',price:'¥500'},
                    {date:'2019-6-28',price:'¥500'}
                ]
            }
        },
        methods:{
            //获取回调的日期数据
            getDate(date){
                console.log(date)
            }
        },
        components:{
            Calendar
        }
    }

参数如下

  • :date:传入初始日期(默认当天)
  • :startDate:酒店\往返模式的入住日期
  • :endDate:酒店\往返模式的离开日期
  • :themeColor:日历的主题色,例:themeColor="'#FF6600'"(默认#415FFB)
  • :mode:模式选择(默认1),1酒店模式,2往返模式
  • :preDisabled:默认(false),当设置为true时,所有小于初始日期(date和startDate)都disabled置灰
  • :lang(默认cn),值包含中文版cn和英文版en
  • :initMonthCount 要初始多少个月份(默认6个月)最小1个月
  • :initPreMonthCount 初始化date或者startDate之前几个月的日历数据
  • :allAbled="true" 取消所有disabled的限制,包含今天之前所有日期均都可操作
  • :priceList='priceList' 添加价格日历列表
  • :disabledList="disabledList" 设置不可点击的日期
  • :switchMonth="true" 当设置此值时,可以手动切换月份(上一月,下一月)
- 注意:date(日历模式)与startDate、endDate(酒店\往返日历模式)不能共存
- 要么 <Calendar :date="'2019-06-04'"  :themeColor="'#415FFB'" @callback="XXX" />
- 要么 <Calendar :startDate="'2019-06-06'" :endDate="'2019-06-08'" :themeColor="'#415FFB'"  @callback="XXX" />

回调函数

  • @callback:日期选择后获取到的数据(所有你想要的都有)

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问