layui实现简单的酒店入住离店日历

本人新手一枚，写博客的目的是为了做记录，不喜勿喷，谢谢~。这是我做毕设时需要用到的一个小功能，功能较简单，代码较通俗。
效果图如下：

1. 引入layui的日期组件laydate，具体引入方法详见layui的官方文档。

注：上述地址，根据自己的项目情况而定。

var currentDate = formatDate(new Date());
    layui.use(['form','laydate'], function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#in_and_out_date'
            , type: 'datetime'
            , range: ' 到 '
            , format: 'yyyy-MM-dd'
            , theme: '#85ab00'
            , min: currentDate // 限定可选日期为当前系统时间
            , btns: ['clear', 'confirm']
            , done: function (value, date) {
               ...
            }
            , change: function (value, date) {
                // 选择时间，时间改变时
                console.log('你选择的日期是：' + value + '<br><br>获得的对象是' + JSON.stringify(date))

            }
        });
    });

效果图如下：

2. 在页面加载时，向后台发送请求，获得待改变文本的日期列表。我存入数据库的记录中包含一个时间范围，sql语句不再阐述，下述代码主要说明java获取指定时间范围内的所有日期。

/**
     * 生成XXXX-XX-XX ~ XXXX-XX-XX 天的，月/日 横坐标、默认值
     * @param preDateStre 起始日期
     * @param  endDateStr 终止日期
     * */
    private List<DateInfo> atteToDayList(String preDateStre,String endDateStr) throws  Exception{
        List<DateInfo>  toDayist = new ArrayList<DateInfo>();  //返回结果集
        // 把入住日期存入集合
        DateInfo dateInfo = new DateInfo();
        dateInfo.setDate(preDateStre);
        dateInfo.setInfo("无房");
        if (judgeDate(preDateStre)){
            toDayist.add(dateInfo);
        }
        while(!preDateStre.equals(endDateStr)){
            String dateStr = DateUtil.getNextDateStr(preDateStre);
            preDateStre = dateStr;
            DateInfo atd = new DateInfo();
            atd.setDate(dateStr);  //进行字符串切割，拼接成 如：01/02 的格式
            atd.setInfo("无房");
            if (judgeDate(dateStr)){
                toDayist.add(atd);
            }
        }
        return toDayist;
    }
    
/**
     * 通过HashSet剔除list集合中的重复元素（无序）
     * @param dateInfos
     * @return
     */
    private List<DateInfo> removeDuplicate(List<DateInfo> dateInfos) {
        Set<DateInfo> set = new HashSet<DateInfo>(dateInfos);
        // 清除原有的list
        dateInfos.clear();
        dateInfos.addAll(set);
        return dateInfos;
    }
    
  /**
     * 将待加入集合的日期与当前日期做比较，
     * 如果待加入日期小于当前日期，则不加入集合
     * 获得当前日期的时间戳、待比较日期的时间戳
     * 将当前日期的时间戳与待比较日期的时间戳相减
     * 如果值为负，则待比较日期大于当前日期，可以加入待返回集合，返回true
     * 如果值为正，则待比较日期小于当前日期，该日期可不加入待返回集合，返回false
     * @param date
     * @return
     */
    private boolean judgeDate(String date) throws ParseException {
        // 获取当前日期
        Date currentDate = new Date();
        Long curValue = currentDate.getTime();
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        Long comValue = sdf.parse(date).getTime();
        Long value = curValue-comValue;
        if (value<=0){
            return true;
        } else {
            return false;
        }
    }
DateUtil的getNextDateStr方法如下：**
/**
     * 计算参数日期的后一天,返回:2019-01-01
     * */
    public static String getNextDateStr(String currentDate) throws Exception {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        Date date = sdf.parse(currentDate);
        Calendar c = Calendar.getInstance();
        c.setTime(date);
        c.add(Calendar.DAY_OF_MONTH,1);
        return sdf.format(c.getTime());
    }  

3. 前端接收后台传来的数据，主要代码如下：

var mark = {}; // mark是放置于layui组件mark属性的信息的
function getDateInfo(houseId) {
        var url = "../order/queryDate.do";
        $.ajax({
            "url": url,
            "type": "GET",
            "data": "houseid=" + houseId,
            "dataType": "json",
            "success": function (json) {
                // 根据返回的状态码对异常信息进行说明
                if (json.state == 200) {
                    var data = json.data;
                    for (var i=0;i<data.length;i++){
                    	// data[i].date是指后台传来的对象中的日期属性，我用一个类封装了日期和该日期包含的信息的
                        mark[data[i].date]='<span style="color: red;">'+data[i].info+'</span>';
                    }
                }
            },
            "error": function (xhr) {
                layer.msg("您还未登录，请先登录！");
            }
        });
    }

4. 将后台返回的数据添加到mark属性中，即可实现在指定日期自定义文本：

format: 'yyyy-MM-dd'
, theme: '#85ab00'
, min: currentDate // 限定可选日期为当前系统时间
mark: mark // 添加这个属性即可

效果图如下：

5. 实现选择“无房”日期弹出提示，代码如下：

			// 为layui日期组件添加时间，done是点击“确定”按钮触发的事件
            done: function (value, date) {
                var arr = value.split(" 到 ");
                var preTime = arr[0].substr(0, 11);
                var endTime = arr[1].substr(0, 11);
                console.log("arr: "+getDateRange(preTime,endTime));
                if (!getDateRange(preTime,endTime)){
                    layer.msg("呀~你晚来了一步，你选择的日期范围中含有被预定的日期，换个日期吧~~~");
                    $("#in_and_out_date").html("");
                    return;
                }
            }
            , change: function (value, date) {
                // 选择时间，时间改变时
                console.log('你选择的日期是：' + value + '<br><br>获得的对象是' + JSON.stringify(date))

            }
        });
        // js根据时间范围获取所有日期
        /*获取传入的时间范围内的日期*/
    function getDateRange(preTime,endTime) {
        if (!preTime || !endTime){
            layer.msg("有时间为空");
            return false;
        }
        var ab = preTime.split('-');			// 把日期参数分割，注意，如果以'/'连接，则分割'/'
        var ae = endTime.split('-');
        var db = new Date();
        db.setUTCFullYear(ab[0], ab[1]-1, ab[2]);			// 返回符合UTC的时间格式
        var de = new Date();
        de.setUTCFullYear(ae[0], ae[1]-1, ae[2]);
        var unixDb = db.getTime();
        var unixDe = de.getTime();
        for(var k = unixDb; k <= unixDe;){
            // arr.push(timestampToTimeShort(k));
            debugger
            // 将时间范围内的时间戳转换成指定日期格式
            var time = timestampToTimeShort(k);
            // 判断该日期是否已经被预定
            if (mark.hasOwnProperty(time)){
                if (mark[time].indexOf("无房")){
                    // 该房源被预定
                    return false;
                }
            }
            k = k + 24 * 60 * 60 * 1000;
        }
        return true;
    }
	// 将时间戳转换为指定格式的时间
	function timestampToTimeShort(timestamp) {
	    var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
	    Y = date.getFullYear() + '-';
	    M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
	    D = change(date.getDate()) + '';
	    return Y + M + D;
	}

即可实现以下效果：

自定义mark标记，可参考以下博客：
http://www.cnblogs.com/qiuyueding/p/8296776.html
这是我第一次写博客，有什么考虑不周到的地方，请留言，我在以后的学习过程中慢慢改正。