时间选择器jquerry特效

Posted 2020-09-16 尽欢

double-date.js代码

$(function() {
    var dateStr = ‘<div class="date-list"><div class="header clearfix"><div class="header-left fl">&lt;</div><div class="fl"><select class="year"></select></div><div class="fl"><select class="month"><option value="1">1月</option><option value="2">2月</option><option value="3">3月</option><option value="4">4月</option><option value="5">5月</option><option value="6">6月</option><option value="7">7月</option><option value="8">8月</option><option value="9">9月</option><option value="10">10月</option><option value="11">11月</option><option value="12">12月</option></select></div><div class="header-right fl">&gt;</div><div class="fr today">今日</div><div class="fl cls">清空</div></div><table class="dateTable"><thead><tr><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th><th>日</th></tr></thead><tbody><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></div>‘
    $(dateStr).appendTo($(".date"));
    var $date0 = $(".date:first"),
        $date1 = $(".date:eq(1)"),
        $date_check0 = $(".date-check:first"),
        $date_check1 = $(".date-check:eq(1)"),
        $date_list0 = $(".date-list:first"),
        $date_list1 = $(".date-list:eq(1)"),
        $y0 = $(".year:first"),
        $y1 = $(".year:eq(1)"),
        $m0 = $(".month:first"),
        $m1 = $(".month:eq(1)"),
        today = new Date(),
        today_year = today.getFullYear() + "",
        today_month = (today.getMonth() + 1) + "",
        today_date = today.getDate() + "",
        today_str = today_year + "-" + zero(today_month) + "-" + zero(today_date);
    flag0 = 1,
    flag1 = 1;
    for (var i = 1917; i < 2118; i++) {
        var opt = "<option>" + i + "</option>";
        $(opt).appendTo($y0);
        $(opt).appendTo($y1);
    }

    function clearTDcss($td) {
        $td.unbind("mouseenter").unbind("mouseleave");
        var td = $td[0];
        td.style.background = "#FED";
        td.style.color = "#000";
    }
    function clearTDcss_($td) {
        clearTDcss($td);

        $td.hover(function() {
            $(this).css({
                "background" : "#ccc",
                "color" : "#fff"
            });
        }, function() {
            $(this).css({
                "background" : "#FED",
                "color" : "black"
            });
        });
    }
    function setTDcss($td, c) {
        var td = $td[0];
        td.style.color = "#fff";
        if (c == ‘now‘)
            td.style.background = "#00cdec";
        else if (c == ‘current‘) {
            td.style.background = "#66ff00";
            $td.unbind("mouseenter").unbind("mouseleave");
        }
    }
    //月份和日期小于10的补0
    function zero(num) {
        return num >= 10 ? num : "0" + num;
    }
    function check() {
        var from = $date_check0.val(),
            to = $date_check1.val();
        var from_seconds = from == ‘‘ ? 0 : new Date(from.replace("-", "/").replace("-", "/")).getTime(),
            to_seconds = to == ‘‘ ? 0 : new Date(to.replace("-", "/").replace("-", "/")).getTime();

        var maxDateSpan = $date0.attr("maxDateSpan");
        if (!isNaN(maxDateSpan))
            maxDateSpan = parseInt(maxDateSpan);
        else
            maxDateSpan = 0;

        var errMsg = null;
        if (from != "" && to != "" && from_seconds > to_seconds)
            errMsg = "截止日期不能早于起始日期！";
        else if (maxDateSpan > 0 && (from == ‘‘ || to == ‘‘))
            errMsg = "如果限定了时间间隔的最大天数，则起始日期和截止日期都不能为空！";
        else if (maxDateSpan > 0 && to_seconds - from_seconds > 1000 * 60 * 60 * 24 * (maxDateSpan - 1))
            errMsg = "时间间隔不能超过 " + maxDateSpan + " 天！";

        if (errMsg == null) {
            $date0.removeClass("date-error");
            $date1.removeClass("date-error");
        } else {
            $date0.addClass("date-error");
            $date1.addClass("date-error");
            alert(errMsg);
        }
    }
    function updateDateTds($date_list, year, month, curYear, curMonth, curDate) {
        var lastDay = new Date(year, month, 0).getDate();
        var firstDate = new Date(year, month - 1, 1);
        var firstDay = firstDate.getDay();
        if (firstDay == 0)
            firstDay = 7;

        var num = 1;
        $date_list.find("td").each(function() {
            var $eq = $(this).index() + 1;
            //给td赋值
            if ($eq < firstDay && $(this).parent("tr").index() === 0)
                $(this).html("");
            else if (num <= lastDay)
                $(this).html(num++);
            else
                $(this).html("")

            var d = $(this).html();
            //去掉内容为空的tr
            if (d == "" && $(this).siblings().html() == "")
                $(this).parents("tr").css("display", "none");
            else
                $(this).parents("tr").css("display", "table-row")

            clearTDcss($(this));
            if (year == today_year && month == today_month && d == today_date)
                setTDcss($(this), "now");
            else if (year == curYear && month == curMonth && d == curDate)
                setTDcss($(this), "current");

            $(this).hover(function() {
                if (d != ‘‘ && (year != today_year || month != today_month || d != today_date) && (year != curYear || month != curMonth || d != curDate))
                    $(this).css({
                        "background" : "#ccc",
                        "color" : "#fff"
                    });
            }, function() {
                if (d != ‘‘ && (year != today_year || month != today_month || d != today_date) && (year != curYear || month != curMonth || d != curDate))
                    $(this).css({
                        "background" : "#FED",
                        "color" : "black"
                    });
            });
        });
    }

    document.onclick = function() {
        var ev = window.event || event;
        var $obj = $(ev.target || ev.srcElement);
        if (!$obj.is(‘.date-check‘)) {
            if (flag0 == 1)
                $date_list0.css("display", "none");
            if (flag1 == 1)
                $date_list1.css("display", "none");
        }
    }
    $date_list0.hover(function() {
        flag0 = 0;
    }, function() {
        flag0 = 1;
    });
    $date_list1.hover(function() {
        flag1 = 0;
    }, function() {
        flag1 = 1;
    });

    $(".date-check").each(function(i, obj) {
        $(this).attr("readonly", "readonly");
        var $date_list = i == 0 ? $date_list0 : $date_list1,
            $y = i == 0 ? $y0 : $y1,
            $m = i == 0 ? $m0 : $m1;
        if ($(this).val() == ‘‘ || $(this).val() == today_str) {
            $y.val(today_year);
            $m.val(today_month);
            updateDateTds($date_list, today_year, today_month, ‘‘, ‘‘, ‘‘);
        } else {
            var select_year = $(this).val().substring(0, 4),
                select_month = $(this).val().substring(5, 7),
                select_date = $(this).val().substring(8);
            if (select_month.charAt(0) == ‘0‘)
                select_month = select_month.substring(1);
            if (select_date.charAt(0) == ‘0‘)
                select_date = select_date.substring(1);

            $y.val(select_year);
            $m.val(select_month);
            updateDateTds($date_list, select_year, select_month, select_year, select_month, select_date);
        }

        $(this).on("focus", function() {
            // 显示前重新获取当前日期，解决跨日问题
            today = new Date();
            today_year = today.getFullYear() + "";
            today_month = (today.getMonth() + 1) + "";
            today_date = today.getDate() + "";
            today_str = today_year + "-" + zero(today_month) + "-" + zero(today_date);

            if ($(this).val() != ‘‘) {
                var select_year = $(this).val().substring(0, 4),
                    select_month = $(this).val().substring(5, 7),
                    select_date = $(this).val().substring(8);
                if (select_month.charAt(0) == ‘0‘)
                    select_month = select_month.substring(1);
                if (select_date.charAt(0) == ‘0‘)
                    select_date = select_date.substring(1);

                if (select_year != $y.val() || select_month != $m.val()) {
                    $y.val(select_year);
                    $m.val(select_month);
                    updateDateTds($date_list, select_year, select_month, select_year, select_month, select_date);
                }
            } else if (today_year != $y.val() || today_month != $m.val()) {
                $y.val(today_year);
                $m.val(today_month);
                updateDateTds($date_list, today_year, today_month, ‘‘, ‘‘, ‘‘);
            }
            if (i == 0) {
                $date_list0.css("display", "block");
                $date_list1.css("display", "none");
            } else {
                $date_list1.css("display", "block");
                $date_list0.css("display", "none");
            }
        });
        $(this).on("blur", function() {
            if (i == 0 && flag0 == 1)
                $date_list0.css("display", "none");
            else if (i == 1 && flag1 == 1)
                $date_list1.css("display", "none");
        })
    });

    $(".header-left").each(function(i, obj) {
        $(this).on("click", function() {
            var $y = i == 0 ? $y0 : $y1,
                $m = i == 0 ? $m0 : $m1;
            var year = parseInt($y.val());
            var mon = parseInt($m.val());
            if (mon >= 2)
                mon -= 1;else {
                year -= 1;
                mon = 12;
                $y.val(year)
            }
            $m.val(mon);
            var $date_list = i == 0 ? $date_list0 : $date_list1,
                $date_check = i == 0 ? $date_check0 : $date_check1;
            if ($date_check.val() == ‘‘)
                updateDateTds($date_list, year, mon, ‘‘, ‘‘, ‘‘);else {
                var select_year = $date_check.val().substring(0, 4),
                    select_month = $date_check.val().substring(5, 7),
                    select_date = $date_check.val().substring(8);
                if (select_month.charAt(0) == ‘0‘)
                    select_month = select_month.substring(1);
                if (select_date.charAt(0) == ‘0‘)
                    select_date = select_date.substring(1);
                updateDateTds($date_list, year, mon, select_year, select_month, select_date);
            }
        })
    });
    $(".header-right").each(function(i, obj) {
        $(this).on("click", function() {
            var $y = i == 0 ? $y0 : $y1,
                $m = i == 0 ? $m0 : $m1;
            var year = parseInt($y.val());
            var mon = parseInt($m.val());
            if (mon < 12)
                mon += 1;else {
                year += 1;
                mon = 1;
                $y.val(year)
            }
            $m.val(mon);
            var $date_list = i == 0 ? $date_list0 : $date_list1,
                $date_check = i == 0 ? $date_check0 : $date_check1;
            if ($date_check.val() == ‘‘)
                updateDateTds($date_list, year, mon, ‘‘, ‘‘, ‘‘);else {
                var select_year = $date_check.val().substring(0, 4),
                    select_month = $date_check.val().substring(5, 7),
                    select_date = $date_check.val().substring(8);
                if (select_month.charAt(0) == ‘0‘)
                    select_month = select_month.substring(1);
                if (select_date.charAt(0) == ‘0‘)
                    select_date = select_date.substring(1);
                updateDateTds($date_list, year, mon, select_year, select_month, select_date);
            }
        })
    });
    $(".header select").each(function(j, obj) {
        $(this).on("change", function() {
            var i = j < 2 ? 0 : 1;
            if (i == 0)
                flag0 = 0;
            else
                flag1 = 0;

            var $date_check = i == 0 ? $date_check0 : $date_check1,
                $date_list = i == 0 ? $date_list0 : $date_list1,
                $y = i == 0 ? $y0 : $y1,
                $m = i == 0 ? $m0 : $m1;
            if ($date_check.val() == ‘‘)
                updateDateTds($date_list, $y.val(), $m.val(), ‘‘, ‘‘, ‘‘);else {
                var select_year = $date_check.val().substring(0, 4),
                    select_month = $date_check.val().substring(5, 7),
                    select_date = $date_check.val().substring(8);
                if (select_month.charAt(0) == ‘0‘)
                    select_month = select_month.substring(1);
                if (select_date.charAt(0) == ‘0‘)
                    select_date = select_date.substring(1);
                updateDateTds($date_list, $y.val(), $m.val(), select_year, select_month, select_date);
            }
        })
    });
    $(".today").each(function(i, obj) {
        $(this).on("click", function() {
            var $date_check = i == 0 ? $date_check0 : $date_check1,
                $date_list = i == 0 ? $date_list0 : $date_list1;
            $date_list.css("display", "none");
            var select_str = $date_check.val();
            if (today_str != select_str) {
                if (‘‘ != select_str) {
                    var select_year = select_str.substring(0, 4),
                        select_month = select_str.substring(5, 7),
                        select_date = select_str.substring(8);
                    if (select_month.charAt(0) == ‘0‘)
                        select_month = select_month.substring(1);
                    if (select_date.charAt(0) == ‘0‘)
                        select_date = select_date.substring(1);

                    if (select_year == today_year && select_month == today_month) {
                        $date_list.find("td").each(function() {
                            if ($(this).html() == select_date) {
                                clearTDcss_($(this));
                                return false;
                            }
                        });
                    }
                }

                $date_check.val(today_str);
                check();
            }
        })
    });
    //点击清空则把日期清空
    $(".cls").each(function(i, obj) {
        $(this).on("click", function() {
            var $date_check = i == 0 ? $date_check0 : $date_check1,
                $date_list = i == 0 ? $date_list0 : $date_list1;
            $date_list.css("display", "none");
            var select_str = $date_check.val();
            if (‘‘ != select_str) {
                var select_year = select_str.substring(0, 4),
                    select_month = select_str.substring(5, 7),
                    select_date = select_str.substring(8);
                if (select_month.charAt(0) == ‘0‘)
                    select_month = select_month.substring(1);
                if (select_date.charAt(0) == ‘0‘)
                    select_date = select_date.substring(1);

                if (select_year == today_year && select_month == today_month) {
                    $date_list.find("td").each(function() {
                        if ($(this).html() == select_date) {
                            clearTDcss_($(this));
                            return false;
                        }
                    });
                }

                $date_check.val(‘‘);
                check();
            }
        })
    });
    $(".date td").on("click", function() {
        if ($(this).html() == "")
            return;

        var d0 = $(this).parents(".date").is(‘.date0‘);
        var $date_check = d0 ? $date_check0 : $date_check1,
            $date_list = d0 ? $date_list0 : $date_list1,
            $y = d0 ? $y0 : $y1,
            $m = d0 ? $m0 : $m1;
        $date_list.css("display", "none");
        var str = $y.val() + "-" + zero($m.val()) + "-" + zero($(this).html());
        var select_str = $date_check.val();
        if (str != select_str) {
            if (select_str == ‘‘) {
                if (str != today_str)
                    setTDcss($(this), "current");
            } else {
                var select_year = select_str.substring(0, 4),
                    select_month = select_str.substring(5, 7),
                    select_date = select_str.substring(8);
                if (select_month.charAt(0) == ‘0‘)
                    select_month = select_month.substring(1);
                if (select_date.charAt(0) == ‘0‘)
                    select_date = select_date.substring(1);

                var cur_year = str.substring(0, 4),
                    cur_month = str.substring(5, 7),
                    cur_date = str.substring(8);
                if (cur_month.charAt(0) == ‘0‘)
                    cur_month = cur_month.substring(1);
                if (cur_date.charAt(0) == ‘0‘)
                    cur_date = cur_date.substring(1);

                if (select_year != cur_year || select_month != cur_month) { // 不同框，不用清除以前的选择TD样式
                    if (str != today_str)
                        setTDcss($(this), "current");
                } else {
                    var k = 0;
                    $date_list.find("td").each(function() {
                        if ($(this).html() != ‘‘) {
                            if ($(this).html() == select_date) {
                                if (select_str != today_str)
                                    clearTDcss_($(this));
                                if (++k == 2)
                                    return false;
                            } else if ($(this).html() == cur_date) {
                                if (str != today_str) {
                                    $(this).unbind("mouseenter").unbind("mouseleave");
                                    setTDcss($(this), "current");
                                }
                                if (++k == 2)
                                    return false;
                            }
                        }
                    });
                }
            }

            $date_check.val(str);

            check();

        }
    });


    document.body.onselectstart = document.body.ondrag = function() {
        return false;
    }
})

double-date.css代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.date {
    position: relative;
    display: inline;
}

/* .date0 {

} */

.date-check{
    width:150px;
    height:20px;
    /* line-height:30px; */
    border: 1px solid #ccc;
    /* padding: 0 5px; */
}

.dateTable {
    border-collapse: collapse;
    /* table-layout: fixed; */
}

.clearfix {
    zoom: 1;
}
.clearfix:after {
    content: ".";
    display: block;
    width: 0;
    height: 0;
    visibility: hidden;
    clear: both;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.date-list {
    display: none;
    position: absolute;
    top: 16px !important;
    *top: 11px;
    _top: 23px;
    left: 0;
    padding-top: 6px;
    background: #FED;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow: hidden;
    border: 1px solid;
    border-color: #ccc #ccc transparent #ccc;
    /* z-index: 999; */
}

.header {
    margin-bottom: 4px;
    padding: 0 5px;
}

.header .fl {
    margin-right: 5px;
}

.header .fl, .header .fr {
    cursor: pointer;
}

.header select {
    vertical-align: top;
}

.header-left, .header-right {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
    vertical-align: middle;
    padding: 2px 0px 0px 2px;
    border: 1px solid #ccc;
}

.today, .cls {
    padding: 2px 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #ccc;
    color: #fff;
    font-size: 12px;
    width: 36px;
}

.date-list, .date-list table {
    width: 260px;
}

.date-list thead {
    background: #00cdec;
}

.date-list th {
    padding: 2px;
    color: #fff;
    border: 1px solid #ccc;
    font-size: 14px;
    font-weight: normal;
}

.date-list td {
    border: 1px solid #ccc;
    padding: 2px 0;
    text-align: center;
    font-size: 12px;
}

.date-list td.now {
    background: #00cdec;
    color: #fff;
}

.date-list td.current {
    background: #66ff00;
    color: #fff;
}

.date-error .date-check {
    border: 1px solid red;
}

jsp代码

<script type="text/javascript" src="<c:url value="/js/double-date.js"/>"></script>

<link rel="StyleSheet" href="<c:url value="/styles/double-date.css"/>"
    type="text/css" />

.imgButtonDefault {
    border: 1px solid #EBF2EB;
}

.imgButtonDown {
    border-top: 1px solid #CACAFF;
    border-left: 1px solid #CACAFF;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    cursor: hand;
}

.imgButtonOver {
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #CACAFF;
    border-bottom: 1px solid #CACAFF;
    cursor: hand;
}

$(function() {
        $(".imgButtonDefault").each(function(i, obj) {
            $(this).bind(
                {
                    mouseover : function() {
                        this.className = "imgButtonOver";
                    },
                    mouseout : function() {
                        this.className = "imgButtonDefault";
                    },
                    mousedown : function() {
                        this.className = "imgButtonDown";
                    },
                    mouseup : function() {
                        this.className = "imgButtonOver";
                    },
                    click : function() {
                        query(i);
                    }
                });
        });

<span>&nbsp;&nbsp;&nbsp;&nbsp;邮寄起始日期：</span>
        <div class="date date0" maxDateSpan=7>
            <input id="from1" type="text"
                value="<fmt:formatDate value=‘${requestScope.beginTime}‘ pattern=‘yyyy-MM-dd‘/>"
                class="date-check" />
        </div>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;邮寄截止日期：</span>
        <div class="date">
            <input id="to1" type="text"
                value="<fmt:formatDate value=‘${requestScope.endTime}‘ pattern=‘yyyy-MM-dd‘/>"
                class="date-check" />
        </div>