jq 日期和时间插件


<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib  prefix="s"  uri="/struts-tags"  %>
<%
String serverName= request.getContextPath();;//项目名
 %>
<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="<%=serverName%>/css/jHsDate.css" />
    <style>
        input {
            height: 20px;
            padding: 5px;
            width: 400px;
            border: 1px solid #3ab2d0;
        }
    </style>
</head>
<body>
 
    <div style="text-align:center;margin-top:50px;">
        <span>时间日期格式化</span>
        <s:textfield id="datetimeformat" name="jHsDateStart"></s:textfield>
    </div>
 
</body>
   <script type="text/javascript" src="<%=serverName%>/js/jquery-1.10.2.js"></script> 
    <script type="text/javascript" src="<%=serverName%>/js/jHsDate.js"></script> 
<script>
   
    $('#datetimeformat').jHsDate({
        format: 'yyyy年MM月dd日 hh时mm分'
    });
   
   
</script>
</html>

css


body {
    position: static;
}

[name='jHsDate'] {
    position: absolute;
    max-width: 336px;
    width: auto;
    height: 164px;
    border: 1px solid #dddddd;
    border-radius: 2px;
    background-color:#ffffff;
}

.yearHsDate,
.dayHsDate,
.hourHsDate,
.minuteHsDate {
    height: 164px;
    width: 95px;
    margin: 0;
    padding: 0;
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 14px;
    display: inline-block;
}

.hs_year,
.hs_day,
.hs_hour,
.hs_minute {
    list-style: none;
    width: 72px;
    height: 32px;
    line-height: 32px;
    cursor: pointer;
}

    .hs_year:hover,
    .hs_day:hover,
    .hs_mon:hover {
        background-color: #eeeeee;
        color: #000000;
    }

.hs_check,
.hs_check :hover{
    background-color: #3ab2d0!important;
    color: #ffffff!important;
}

.monHsDate {
    width: 150px;
    display: inline-block;
    padding: 4px 5px;
    margin: 0;
}

.hs_mon {
    list-style: none;
    width: 29px;
    height: 15px;
    text-align: center;
    line-height: 15px;
    font-size: 14px;
    display: inline-block;
    padding: 7px 5px;
    border-radius: 4px;
    float: left;
    cursor: pointer;
    margin: 5px;
}

.noCheck {
    background-color: #f4f4f4;
    cursor: not-allowed;
}

.dayHsDate {
    width: 77px;
    border-left: 1px solid #dddddd;
}


jq


(function ($) {
    var defaultSettings = {
        format: 'yyyy-MM-dd',//默认日期格式
        callBack: function () { },//回掉函数
        maxDate: new Date(),//最大日期
        minDate: '1949-10-01',//最小日期
        defDate: '',//默认日期
        defIsShow: false,//是否在文本框中显示默认日期
        inputIsRead: false
    };
    $.fn.jHsDate = function (options) {
        options = $.extend({}, defaultSettings, options || {});
        var $this = this;
        if (options.inputIsRead) {
            $this.attr("readonly","readonly");
        }
        $this.attr("name", "jHsDateInput");
        if (options.maxDate == options.minDate) {
            alert("最大值最小值错误");
        }
        if (options.maxDate < options.defDate && options.defDate!='') {
            options.defDate = options.maxDate;
        }
        if (options.minDate > options.defDate && options.defDate != '') {
            options.defDate = options.minDate;
        }
        var html = "", yearHtml = "", monHtml = "", dayHtml = "", hourHtml = "", minuteHtml = "";
        var thisId = $this.attr("id");
        if (thisId == undefined) {
            alert('元素Id或元素不存在');
            return;
        }
        html = "<div id='" + thisId + "hsdate' name='jHsDate' style='box-shadow: 0 3px 5px rgba(221,221,221,0.5);'>";
        var formatTmp = options.format;
        var maxDateTmp = chromeDateToDate(options.maxDate);
        var minDateTmp = chromeDateToDate(options.minDate);
        var yearDateTmp = "";
        var clickType = "";
        if (formatTmp.indexOf("y") > -1) {
            yearHtml = setYear(maxDateTmp.split('-')[0], minDateTmp.split('-')[0]);
            clickType += "y"
        }
        if (formatTmp.indexOf("M") > -1) {
            monHtml = setMon();
            clickType += "M"
        }
        if (formatTmp.indexOf("d") > -1) {
            dayHtml = setDay(31);
            clickType += "d"
        }

        html += yearHtml + monHtml + dayHtml + hourHtml + minuteHtml;
        html += "</div>"
        $this.click(function () {
            if ($("#" + thisId + "hsdate").length > 0) {
                return false;
            }
            $('body').append(html);
            setDefDate(options.defDate, thisId + "hsdate");
            if (options.format.indexOf("h") > -1) {
                bindCkeckClick(clickType+"h")
            }
            //定位日期框
            var y = $this.offset().top;
            var x = $this.offset().left;
            var eleHeight = $this.outerHeight(false);
            var checkYear = "";
            $("#" + thisId + "hsdate").css({ "top": y + (eleHeight + 5), "left": x });
            $('.hs_year').click(function () {
                $('.yearHsDate> .hs_check').removeClass('hs_check');
                $(this).addClass('hs_check');
                //设置最大月份
                $('.monHsDate> .noCheck').removeClass('noCheck');
                checkYear = $(this).text();
                if (checkYear == new Date(maxDateTmp).getFullYear()) {
                    $('.monHsDate> .hs_check').removeClass('hs_check');
                    $("#" + thisId + "hsdate")
                        .children(".monHsDate")
                        .children(':gt(' + (new Date(maxDateTmp).getMonth()) + ')')
                        .addClass('noCheck');
                }
                //设置最小月份
                if (checkYear == new Date(minDateTmp).getFullYear()) {
                    $('.monHsDate> .hs_check').removeClass('hs_check');
                    $("#" + thisId + "hsdate")
                        .children(".monHsDate")
                        .children(':lt(' + (new Date(minDateTmp).getMonth()) + ')')
                        .addClass('noCheck');
                }
            });
            $('.hs_mon').click(function () {
                if (!$(this).hasClass('noCheck')) {
                    $('.monHsDate> .hs_check').removeClass('hs_check');
                    $(this).addClass('hs_check');
                    if (clickType.indexOf('d') > -1) {
                        showDay($(this).text());
                    }
                    //设置最大日
                    $('.dayHsDate> .noCheck').removeClass('noCheck');
                    if (checkYear == new Date(maxDateTmp).getFullYear() &&
                        $(this).text() == (new Date(maxDateTmp).getMonth() + 1) + "月") {
                        $('.dayHsDate> .hs_check').removeClass('hs_check');
                        $("#" + thisId + "hsdate")
                            .children(".dayHsDate")
                            .children(':gt(' + (new Date(maxDateTmp).getDate() - 1) + ')')
                            .addClass('noCheck');
                    }
                    //设置最小日

                    if (checkYear == new Date(minDateTmp).getFullYear() &&
                        $(this).text() == (new Date(maxDateTmp).getMonth() + 1) + "月") {
                        $('.dayHsDate> .hs_check').removeClass('hs_check');
                        $("#" + thisId + "hsdate")
                            .children(".dayHsDate")
                            .children(':lt(' + (new Date(minDateTmp).getDate() - 1) + ')')
                            .addClass('noCheck');
                        $('[class="hs_day"]').parent().scrollTop($('[class="hs_day"]').position().top);
                    }
                    bindCkeckClick(clickType);
                }
            });
        });
        //点击空白处关闭选择框
        $(document).click(function (e) {
            e = window.event || e; // 兼容IE7
            obj = $(e.srcElement || e.target);
            if (!$(obj).is("[name='jHsDateInput']") && !$(obj).is('[class^="hs_"]')) {
                $('[name="jHsDate"]').remove();
            }
        });
        if (options.defIsShow && options.defDate != '') {
            $this.val(DateFormat(options.defDate, options.format));
        }
        function bindCkeckClick(clickType) {
            switch (clickType) {
                case "y":
                    $('.hs_year').click(function () {
                        $($this).val($('[class="hs_year hs_check"]').text());
                        closeHsDate($("#" + thisId + "hsdate"));
                        options.callBack();
                    });
                    break;
                case "yM":
                    $('.hs_mon').click(function () {
                        var dateTmp = $('[class="hs_year hs_check"]').text() + "-" +
                            $('[class="hs_mon hs_check"]').text();
                        $($this).val(DateFormat(dateTmp.replace("月", ""), options.format));
                        closeHsDate($("#" + thisId + "hsdate"));
                        options.callBack();
                    });
                    break;
                case "yMd":
                    $('.hs_day').click(function () {
                        $('.dayHsDate>.hs_check').removeClass('hs_check');
                        $(this).addClass('hs_check');
                        var dateTmp = $('[class="hs_year hs_check"]').text() + "-" +
                            $('[class="hs_mon hs_check"]').text() + "-" +
                            $('[class="hs_day hs_check"]').text();
                        if (formatTmp.indexOf("h") > -1) {
                            hourHtml = setHour();
                            minuteHtml = setMinute();
                            $("#" + thisId + "hsdate").html(hourHtml + minuteHtml);
                            $("#" + thisId + "hsdate").children('.hourHsDate').children().click(function () {
                                dateTmp = dateTmp.split(' ')[0]
                                dateTmp += " " + $(this).text().replace("时", "");
                                $(this).parent().children().removeClass('hs_check');
                                $(this).addClass('hs_check');
                            });
                            $("#" + thisId + "hsdate").children('.minuteHsDate').children().click(function () {
                                dateTmp = dateTmp.split(':')[0]
                                dateTmp += ":" + $(this).text().replace("分", "");
                                $(this).parent().children().removeClass('hs_check');
                                $(this).addClass('hs_check');
                                $($this).val(DateFormat(dateTmp.replace("月", ""), options.format));
                                closeHsDate($("#" + thisId + "hsdate"));
                                options.callBack();
                            });

                        } else {
                            $($this).val(DateFormat(dateTmp.replace("月", ""), options.format));
                            closeHsDate($("#" + thisId + "hsdate"));
                            options.callBack();
                        }
                    });
                    break;
                case "h":
                    var dateTmp = "";
                    hourHtml = setHour();
                    minuteHtml = setMinute();
                    $("#" + thisId + "hsdate").html(hourHtml + minuteHtml);
                    $("#" + thisId + "hsdate").children('.hourHsDate').children().click(function () {
                        dateTmp = "";
                        dateTmp = $(this).text().replace("时", "");
                        $(this).parent().children().removeClass('hs_check');
                        $(this).addClass('hs_check');
                    });
                    $("#" + thisId + "hsdate").children('.minuteHsDate').children().click(function () {
                        dateTmp = dateTmp.split(':')[0]
                        dateTmp += ":" + $(this).text().replace("分", "");
                        $(this).parent().children().removeClass('hs_check');
                        $(this).addClass('hs_check');
                        $($this).val(dateTmp);
                        closeHsDate($("#" + thisId + "hsdate"));
                    });

                    break;
                default:
                    $('.hs_day').click(function () {
                        $('.dayHsDate>.hs_check').removeClass('hs_check');
                        $(this).addClass('hs_check');
                        var dateTmp = $('[class="hs_mon hs_check"]').text() + "-" +
                            $('[class="hs_day hs_check"]').text();
                        if (formatTmp.indexOf("h") > -1) {
                            hourHtml = setHour();
                            minuteHtml = setMinute();
                            $("#" + thisId + "hsdate").html(hourHtml + minuteHtml);
                            $("#" + thisId + "hsdate").children('.hourHsDate').children().click(function () {
                                dateTmp += " " + $(this).text().replace("时", "");
                                $(this).parent().children().removeClass('hs_check');
                                $(this).addClass('hs_check');
                            });
                            $("#" + thisId + "hsdate").children('.minuteHsDate').children().click(function () {
                                dateTmp = dateTmp.split(':')[0]
                                dateTmp += ":" + $(this).text().replace("分", "");
                                $(this).parent().children().removeClass('hs_check');
                                $(this).addClass('hs_check');
                                $($this).val(DateFormat(dateTmp.replace("月", ""), options.format));
                                closeHsDate($("#" + thisId + "hsdate"));
                            });

                        } else {
                            $($this).val(DateFormat(dateTmp.replace("月", ""), options.format));
                            closeHsDate($("#" + thisId + "hsdate"));
                        }
                    });
                    break;
            }
        }
        //显示天
        function showDay(chekMon) {
            if (isLeapYear($('.yearHsDate>.hs_check').text()) && chekMon == "2月") {
                dayHtml = setDay(29);
            } else if (chekMon == "1月" ||
                chekMon == "3月" || chekMon == "5月" ||
                chekMon == "7月" || chekMon == "8月" ||
                chekMon == "10月" || chekMon == "12月") {
                dayHtml = setDay(31);
            } else if (chekMon == "4月" || chekMon == "6月" ||
                chekMon == "9月" || chekMon == "11月") {
                dayHtml = setDay(30);
            } else if (!isLeapYear($('.yearHsDate>.hs_check').text()) && chekMon == "2月") {
                dayHtml = setDay(28);
            }
            $('.dayHsDate').remove();
            $('.monHsDate').after(dayHtml);
        }
        //设置默认值
        function setDefDate(defDate, dateid) {
            var d = new Date(defDate);
            var yeardef = d.getFullYear();
            var mondef = (d.getMonth() + 1) + "月";
            var daydef = d.getDate();
            $('#' + dateid).children('.yearHsDate').children('.hs_year').each(function () {
                if ($(this).text() == yeardef) {
                    $(this).addClass('hs_check');
                    $(this).parent().scrollTop($(this).position().top);
                    return false;
                }
            });
            $('#' + dateid).children('.monHsDate').children('.hs_mon').each(function () {
                if ($(this).text() == mondef) {
                    $(this).addClass('hs_check');
                    if (clickType.indexOf('d') > -1) {
                        showDay(mondef);
                    }
                    bindCkeckClick(clickType);
                    return false;
                }
            });

            $('#' + dateid).children('.dayHsDate').children('.hs_day').each(function () {
                if ($(this).text() == daydef) {
                    $(this).addClass('hs_check');
                    $(this).parent().scrollTop($(this).position().top);
                    return false;
                }
            });
        }
    };
    function setYear(maxYear, minYear) {
        var setYearHtml = "<ul class='yearHsDate'>";
        for (var i = maxYear; i >= minYear; i--) {
            setYearHtml += "<li class='hs_year' >" + i + "</li>";
        }
        setYearHtml += "</ul>";
        return setYearHtml;
    }
    function setMon() {
        var setMonHtml = "<ul class='monHsDate'>";
        for (var i = 1; i <= 12; i++) {
            setMonHtml += "<li class='hs_mon'>" + i + "月</li>"
        }
        setMonHtml += "</ul>"
        return setMonHtml;
    }
    function setHour() {
        var setHourHtml = "<ul class='hourHsDate'>";
        for (var i = 1; i <= 24; i++) {
            if (i <= 9) {
                setHourHtml += "<li class='hs_hour'>0" + i + "时</li>"
            } else {
                setHourHtml += "<li class='hs_hour'>" + i + "时</li>"
            }
        }
        setHourHtml += "</ul>"
        return setHourHtml;
    }
    function setDay(days) {
        var setDayHtml = "<ul class='dayHsDate'>";
        for (var i = 1; i <= days; i++) {
            setDayHtml += "<li class='hs_day' >" + i + "</li>";
        }
        setDayHtml += "</ul>";
        return setDayHtml;
    }
    function setMinute() {
        var setminuteHtml = "<ul class='minuteHsDate'>";
        for (var i = 0; i < 60; i++) {
            if (i <= 9) {
                setminuteHtml += "<li class='hs_minute'>0" + i + "分</li>"
            }
            else {
                setminuteHtml += "<li class='hs_minute'>" + i + "分</li>"
            }
        }
        setminuteHtml += "</ul>"
        return setminuteHtml;
    }
    //部分浏览器时间转换问题
    function chromeDateToDate(cdate) {
        var d = new Date(cdate);
        return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
    }
    //计算闰年
    function isLeapYear(Year) {
        if (((Year % 4) == 0) && ((Year % 100) != 0) || ((Year % 400) == 0)) {
            return true;
        }
        else {
            return false;
        }
    }
    //日期格式化
    function DateFormat(now, mask) {
        var d = new Date(now);
        var zeroize = function (value, length) {
            if (!length) length = 2;
            value = String(value);
            for (var i = 0, zeros = ''; i < (length - value.length); i++) {
                zeros += '0';
            }
            return zeros + value;
        };

        return mask.replace(/"[^"]*"|'[^']*'|\b(?:d{1,4}|m{1,4}|yy(?:yy)?|([hHMstT])\1?|[lLZ])\b/g, function ($0) {
            switch ($0) {
                case 'd': return d.getDate();
                case 'dd': return zeroize(d.getDate());
                case 'ddd': return ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'][d.getDay()];
                case 'dddd': return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][d.getDay()];
                case 'M': return d.getMonth() + 1;
                case 'MM': return zeroize(d.getMonth() + 1);
                case 'MMM': return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][d.getMonth()];
                case 'MMMM': return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][d.getMonth()];
                case 'yy': return String(d.getFullYear()).substr(2);
                case 'yyyy': return d.getFullYear();
                case 'h': return d.getHours() % 12 || 12;
                case 'hh': return zeroize(d.getHours() % 12 || 12);
                case 'H': return d.getHours();
                case 'HH': return zeroize(d.getHours());
                case 'm': return d.getMinutes();
                case 'mm': return zeroize(d.getMinutes());
                case 's': return d.getSeconds();
                case 'ss': return zeroize(d.getSeconds());
                case 'l': return zeroize(d.getMilliseconds(), 3);
                case 'L': var m = d.getMilliseconds();
                    if (m > 99) m = Math.round(m / 10);
                    return zeroize(m);
                case 'tt': return d.getHours() < 12 ? 'am' : 'pm';
                case 'TT': return d.getHours() < 12 ? 'AM' : 'PM';
                case 'Z': return d.toUTCString().match(/[A-Z]+$/);
                // Return quoted strings with the surrounding quotes removed
                default: return $0.substr(1, $0.length - 2);
            }
        });
    };
    function closeHsDate(ele) {
        $(ele).remove();
    }
})(jQuery);    







评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值