• 年月日日历选择组件


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

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

    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
  • 相关阅读:
    LINQ 详解
    oracle下查询的sql已经超出IIS响应时间
    IOC应用之 Ninject
    JSONP ---------跨域
    国内各大互联网公司相关技术站点2.0版 (集合腾讯、阿里、百度、搜狐、新浪、360等共49个)
    IO多路复用,以socket为例
    socket机制下实现的多用户与服务器交互
    在一个进程中定义多个线程
    基于tcp的socketserver,即tcp的多线程
    基于upd的socketserver,即udp的多线程
  • 原文地址:https://www.cnblogs.com/cainiaoz/p/6018618.html
Copyright © 2020-2023  润新知