jQuery手机端酒店日历插件

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

43743 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暴力拆词工具

jQuery手机考勤日历插件

一款简单的手机端日历插件，可以根据年月选择查看当月的考勤情况

日期和时间

30404 243

jQuery双日历选择

jQuery实现双日历选择插件double-date.js

日期和时间

41663 342

jQuery移动端上下滑动日期选择插件mobileSelect.js

jQuery多功能的移动端滚动选择器，支持单选到多选、支持多级级联、提供自定义回调函数等

日期和时间

29945 217

html+css+js 动态时钟

就是用纯html+js+css写的一个动态时钟

日期和时间

49845 400

讨论这个项目（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;
                            }
                        });
                }