年月日日历选择组件

时间：2024-03-17 19:48:31

功能：年月日日历选择插件，可指定显示日期。

目的：仅为项目需要，所以封装为一个组件，同时也作为对工作的日常记录，用以以后复用。

1.html简单代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>年月日插件</title>
</head>

<body>
<div class="ymdCalendar">
    <select class="year" name="year"></select>
    <select class="month" name="month"></select>
    <select class="day" name="day"></select>
</div>
</body>
</html>
 
 
2.以下为jquery完整代码：
<script>
/**
*@file 年月日选择插件
*@author Zhou
*@time 2016/10/31
*/

;(function($){
    $.fn.ymdCalendar = function (options) {
        var defaults = {
                Yclass: \'.year\', // 默认年份选择器
                Mclass: \'.month\',// 默认月份选择器
                Dclass: \'.day\',  // 默认日选择器
                  Year: \'\',      // 默认年
                 Month: \'\',      // 默认月
                   Day: \'\'       // 默认日
            };
        var opts = $.extend({}, defaults, options);
        var DateTime = new Date();
        var nowY = opts.Year || DateTime.getFullYear();
        var nowM = opts.Month || DateTime.getMonth()+1;
        var nowD = opts.Day || DateTime.getDate();
        var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        return this.each(function(){
            
            // 年月日选择器
            var Y = $(this).find(opts.Yclass);
            var M = $(this).find(opts.Mclass);
            var D = $(this).find(opts.Dclass);
            
            // 默认选中当天
            if (isRun(nowY)) days[1] = 29;
            Y.html(tcFn(nowY-30, nowY+30, nowY));// 设置年份,前后30年
            M.html(tcFn(1, 12, nowM));// 设置月份
            D.html(tcFn(1, days[nowM-1], nowD));// 设置天
            
            // 年份改变日期改变
            Y.change(function(){
                isRun($(this).val()) ? days[1] = 29 : days[1] = 28;
                console.log(days)
                D.html(tcFn(1, days[M.val()-1], $(this).val()));
            })
            
            // 月份改变日期改变
            M.change(function(){
                isRun(Y.val()) ? days[1] = 29 : days[1] = 28;
                D.html(tcFn(1, days[M.val()-1], Y.val()));
            })
        })
        
        // 填充函数
        function tcFn(startTime, endTime, date) {
            var html = \'\';
            var a =\'\';
            for (var i = startTime; i <= endTime; i++) {
                if(i == date){
                    a = \'<option value="\' + i + \'" selected="selected">\' + i + \'</option>\';
                } else {
                    a = \'<option value="\' + i + \'">\' + i + \'</option>\';
                }
                html += a;
            }
            return html;
        }
        
        // 判断是否闰年
        function isRun(year){
            return(year%4 == 0 && (year%100 != 0 || year%400 == 0));
        }
    };
})(jQuery)


$(function () {
    $(\'.ymdCalendar\').ymdCalendar();// 实例组件
    $(\'#ymdCalendar\').ymdCalendar({// 设置显示日期
             Year: 2007,
            Month: 8,
              Day: 8
        });
    
})
</script>

若有幸被您看到，并发现有问题，可留言，楼主看到尽快修改。

3.更新2016-11-07

由于项目需要，该些时间必须在指定范围内可选则，比如从过去10个月至今日，这个时间点才可选择，因此优化为下（一下为完整代码）：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>年月日插件</title>
</head>

<body>
<div class="ymdCalendar1">
    <select class="year" name="year"></select>
    <select class="month" name="month"></select>
    <select class="day" name="day"></select>
</div>
<div class="ymdCalendar2">
    <select class="year" name="year"></select>
    <select class="month" name="month"></select>
    <select class="day" name="day"></select>
</div>
<div class="ymdCalendar3">
    <select class="year" name="year"></select>
    <select class="month" name="month"></select>
    <select class="day" name="day"></select>
</div>
<!--<div class="ymdCalendar" id="ymdCalendar">
    <select class="year" name="year"></select>
    <select class="month" name="month"></select>
    <select class="day" name="day"></select>
</div>-->
<script src="http://www.qbaobei.com/Public/Home/qbaobei3/js/jquery.js"></script>
<script>
/**
*@file 年月日选择插件
*@author Zhou
*@time 2016/11/07
*/

;(function($){
    $.fn.ymdCalendar = function (options) {
        var defaults = {
                Yclass: \'.year\', // 默认年份选择器
                Mclass: \'.month\',// 默认月份选择器
                Dclass: \'.day\',  // 默认日选择器
                  Year: \'\',      // 默认年
                 Month: \'\',      // 默认月
                   Day: \'\',      // 默认日
            beforeTime: 0        // 从当天开始之前时长（以月为单位） 
            };
        var opts = $.extend({}, defaults, options);
        var DateTime = new Date();
        var nowY = opts.Year || DateTime.getFullYear();
        var nowM = opts.Month || DateTime.getMonth()+1;
        var nowD = opts.Day || DateTime.getDate();
        var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        var lastYear = 5 , lastMonth = 1 , finaMonth = 12;
        if (opts.beforeTime != 0) {
            DateTime.setMonth(nowM - opts.beforeTime);  // 分别为2个月，分别为10个月，分别为65个月
            var beforeYeaar = DateTime.getFullYear();// 开始年份
            var beforeMonth = DateTime.getMonth();// 开始月份
            console.log(beforeYeaar)
            if (nowY == beforeYeaar) {
                lastYear = 0;
                lastMonth = beforeMonth
                finaMonth = nowM;
            } else {
                lastYear = nowY - beforeYeaar;
            }
        }
        return this.each(function(){
            
            // 年月日选择器
            var Y = $(this).find(opts.Yclass);
            var M = $(this).find(opts.Mclass);
            var D = $(this).find(opts.Dclass);
            
            // 默认选中当天
            if (isRun(nowY)) days[1] = 29;
            Y.html(tcFn(nowY-lastYear, nowY, nowY));// 设置年份,前后30年
            M.html(tcFn(lastMonth, finaMonth, nowM));// 设置月份
            D.html(tcFn(1, days[nowM-1], nowD));// 设置天
            
            // 年份改变日期改变
            Y.change(function(){
                isRun($(this).val()) ? days[1] = 29 : days[1] = 28;
                D.html(tcFn(1, days[M.val()-1], $(this).val()));
            })
            
            // 月份改变日期改变
            M.change(function(){
                isRun(Y.val()) ? days[1] = 29 : days[1] = 28;
                D.html(tcFn(1, days[M.val()-1], Y.val()));
            })
        })
        
        // 填充函数
        function tcFn(startTime, endTime, date) {
            var html = \'\';
            var a =\'\';
            for (var i = startTime; i <= endTime; i++) {
                if(i == date){
                    a = \'<option value="\' + i + \'" selected="selected">\' + i + \'</option>\';
                } else {
                    a = \'<option value="\' + i + \'">\' + i + \'</option>\';
                }
                html += a;
            }
            return html;
        }
        
        // 判断是否闰年
        function isRun(year){
            return(year%4 == 0 && (year%100 != 0 || year%400 == 0));
        }
    };
})(jQuery)


$(function () {
    $(\'.ymdCalendar1\').ymdCalendar({
        beforeTime: 2
    });// 实例组件
    $(\'.ymdCalendar2\').ymdCalendar({
        beforeTime: 10
    });// 实例组件
    $(\'.ymdCalendar3\').ymdCalendar({
        beforeTime: 65
    });// 实例组件
//    $(\'#ymdCalendar\').ymdCalendar({// 设置显示日期
//             Year: 2007,
//            Month: 8,
//              Day: 8
//        });
    
})
</script>
</body>
</html>
View Code

 

相关文章