uni-app开箱即用的日历组件,简单易用

GITHUB地址

一款结合携程、同程艺龙开发的日历(支持日期选择模式,酒店模式,往返模式,价格日历模式),可自定义主题色,支持英文版

  • Calendar.vue 可以传参设置主题色(如:themeColor=”‘#f60′”),不依赖任何less,sass,stylus等预加载
  • Calendar-simple.vue(有默认主题色)不可以动态传参设置主题色,但是可以通过源代码less变量@color进行全局修改(依赖less)
    uni-app开箱即用的日历组件,简单易用
    uni-app开箱即用的日历组件,简单易用
    uni-app开箱即用的日历组件,简单易用
    uni-app开箱即用的日历组件,简单易用

使用方法

若在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:日期选择后获取到的数据(所有你想要的都有)

原文链接:https://github.com/tanagang/mobile-calendar-simple

发表评论

登录后才能评论