jQuery手机端酒店日历插件

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

43636 360 查看评论 (76)

分享到微信朋友圈

查看演示立即下载

插件描述：一款简单的手机端日历插件，可以选择入住和离店日期，控制选择天数

更新时间：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
});

jQuery垂直四级导航

jQuery暴力拆词工具

zepto移动端时间选择插件

简单的移动端时间选择，去掉年显示，适合线上预定下单

日期和时间

52964 383

jQuery移动端入住时间择插件

移动端酒店入住和离开时间一次性选择插件,界面一般但是功能绝对OK

日期和时间

30284 305

jQuery蓝色发光网站倒计时模板

日期和时间

40121 381

jquery日历控件datePicker

jquery.datePicker日历控件应用text文本框弹出日历表与默认显示日历表

日期和时间

66446 370

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

跨越时代/tp 1

2022/1/29 11:45:28

冯广超0

2022/4/2 12:11:55

当默认日期为周六的时候，离店日期选择有问题，需要改一下_initselected函数

_initselected
if ($(this).next().text() != "") {
    $(this).next().append('</br><p class="rz">返程
        ');
    }
    else {
        // 选下一个月
        let nextTr = $(this).parent().next();
        if (nextTr[0] && (nextTr[0].tagName == "TR" || nextTr[0].tagName == "tr")) {
            nextTr.children().eq(0).append('</br><p class="rz">返程
                ');
            }
            else {
                $(".dateTable").eq(1).find("td").each(function(index, el) {
                        if ($(this).text() != "") {
                            $(this).append('</br><p class="rz">返程
                                ');
                                return false;
                            }
                        });
                }