jQuery手机端酒店日历插件

所属分类:输入-日期和时间

 38093  330  查看评论 (73)
分享到微信朋友圈
X
jQuery手机端酒店日历插件 ie兼容10

更新时间:2019/2/25 下午4:59:49

更新说明:

  • 增加了显示时默认选中输入框内的日期

  • 修复了之前显示月份index值设置的bug

  • 修复了 controlDay字段的设置无效的bug

  • 修复了 daysnumber 默认为90的限制


更新时间:2017/9/13 上午11:05:23

更新说明:代码有相应的优化。新增了入住天数的功能。


更新时间:2017/9/9 下午5:25:52

更新说明:date.js 52行 设置月份时多加一个月 已修正


使用方法

1、开始

引入相关文件

<link rel="stylesheet" href="calendar.css" />
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="date.js"></script>

2、html代码

<input type="text" id="startDate" />
<input type="text" id="endDate" />
<div id="calendar"></div>
<div id="firstSelect">选择按钮</div>

input是日期框;

id=calendar的div是日期列表的父元素;

3、js代码

$('#firstSelect').calendarSwitch({
    selectors : {
        sections : "#calendar"
    },
    index : 4,      //展示的月份个数
    animateFunction : "toggle",        //显示日历的动画效果
    controlDay:false,//是否控制在daysnumber天之内,这个数值的设置前提是总显示天数大于90天
    daysnumber : "90",     //控制天数,具体天数要配合index参数
    comeColor : "blue",       //入住颜色
    outColor : "red",      //离店颜色
    comeoutColor : "#0cf",        //入住和离店之间的颜色
    callback : "" ,   //回调函数
    comfireBtn:'.comfire'//确定按钮的class或者id
});
相关插件-日期和时间

新浪的一款时间插件

新浪的一款时间插件
  日期和时间
 58101  412

jQuery日历插件

jQuery日历插件
  日期和时间
 44754  285

移动端万年历类型(滑动效果)

基于swiper的万年历模板,简单,移动端日历
  日期和时间
 54919  516

html+css+js 动态时钟

就是用纯html+js+css写的一个动态时钟
  日期和时间
 43275  372

讨论这个项目(73)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    思途-许强 0
    2019/5/31 13:38:31
    月份重复问题没有修复啊 出现两个7月 回复
    岸边的树~ 0
    2019/5/17 10:52:38
    我并不是用作酒店选日期的 所以想选择前一个月的怎么办呢 回复
    我是一个小暖炉。 0
    2019/4/27 9:56:34
    大神,这个单选一天的时候开始时间后面就会多个1,应该怎么解决啊 回复
    123456456 0
    2019/3/12 20:34:17
    zhanghn 0
    2019/2/18 23:58:26
    现在日历排布是从星期日开始的,如何改成从星期一开始呢?
        枫叶0
        2019/2/21 17:27:35
        开始日期是当前时间,不一定是周日
    回复
    七城 0
    2019/1/24 16:16:04
    加上后a标签不能跳转?
        枫叶0
        2019/2/25 17:05:29
        哪里加a
    回复
    ya 0
    2019/1/18 18:45:22
    index 设置小于4就会报错请问是什么原因
        枫叶0
        2019/2/25 17:07:53
        已修复
    回复
    科科姑姑 0
    2018/12/27 15:51:50
    大神, 我在这个日历基础上加了个取消按钮。 当我只选择入店日期,然后我点取消、日历关闭,但当我再次选择日历的时候,我需要页面显示的是外面展示的入店离店日期。 现在问题是: 我选择入店,直接点取消按钮,然后在进入日历后,只显示取消的入店日期
        枫叶1
        2019/2/25 17:06:57
        已经增加了默认选择input框内的日期
    回复
    Truth 0
    2018/11/8 11:46:47
    预订不能选择怎么设定呀,请问
    回复
    日月星辉 0
    2018/7/30 10:48:02
    哈哈哈哈哈哈哈哈
        1234564560
        2019/3/12 20:33:03
        。。。
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复