首页 > 代码库 > 日期组件--仿

日期组件--仿

参考自:https://github.com/ALiuNa/YTD

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src=‘../node_modules/jquery/dist/jquery.min.js‘></script>
</head>
<body>
    <div class="from-group ">
        <select class=‘public_year‘   data-date=‘{year:1920,month:5,date:1,maxAfter:2020,minBefore:1900,year_text:"年",month_text:"月",date_text:"日"}‘    name="" id=""></select>
        <select class=‘public_month‘  name="" id=""></select>
        <select class=‘public_date‘   name="" id=""></select>
    </div>
    <div class="from-group ">
        <select class=‘public_year‘  data-date=‘{year:1932,month:5,date:1,maxAfter:2080,minBefore:1930,year_text:"xxx年",month_text:"xxx月",date_text:"xxx日"}‘  name="" id=""></select>
        <select class=‘public_month‘  name="" id=""></select>
        <select class=‘public_date‘   name="" id=""></select>
    </div>
    <div class="from-group ">
        <select class=‘public_year‘ data-date=‘{year:1901,month:5,date:1,maxAfter:2080,minBefore:1900,year_text:"xxx年",month_text:"xxx月",date_text:"xxx日"}‘   name="" id=""></select>
        <select class=‘public_month‘  name="" id=""></select>
        <select class=‘public_date‘   name="" id=""></select>
    </div>

    <button id=‘aaa‘>11111</button>
</body>
<script src=‘index.js‘></script>

<script>
       $(#aaa).on(click,function(){
           var html=<div class="from-group ">        <select class="public_year"    name="" id=""></select>        <select class="public_month"  name="" id=""></select>        <select class="public_date"   name="" id=""></select>    </div>;
    $(body).append(html);
           $.selectDate_zd_ready();
       })
</script>
</html>
(function($) {
    $.fn.selectDate_zd = function(call) {
            // $.fn.selectDate_zd
            /*参数规则说明
          $domYear为默认的年组件select
          $domMonth为默认的月组件select
          $domDate 为默认的日组件select
          year 设置默认年,可为空
          month 设置默认月,可为空
          date 设置默认日,可为空
          maxAfter 最多到今年后的哪一年+
          minBefore 最多到哪一年-
          nowYear,nowMonth,nowDate分别代表当前年月日
          year_text,month_text,date_text代表默認的年月日第一天默認值
          例子:
          <select class=‘public_year‘   data-date=‘{year:1920,month:5,date:1,maxAfter:2020,minBefore:1900,year_text:"年",month_text:"月",date_text:"日"}‘    name="" id=""></select>
          <select class=‘public_month‘  name="" id=""></select>
          <select class=‘public_date‘   name="" id=""></select>
          插件信息:
          author:jl,
          參考自:https://github.com/ALiuNa/YTD
           /---------注意--------------/
           在外围后生成的元素需要更启用下
           代码为:
           $.selectDate_zd_ready();
           例:
           $(‘#aaa‘).on(‘click‘,function(){
               var html=‘<div><select class=‘public_year‘></select></div>‘;
               $(body).append(html);
               //启用
               $.selectDate_zd_ready();
           })

        */
            //默认参数  

            var $domYear = $(‘.‘ + call).find(‘.public_year‘),
                $domMonth = $(‘.‘ + call).find(‘.public_month‘),
                $domDate = $(‘.‘ + call).find(‘.public_date‘);
            if (!$domYear.length) return false;
            var defaults = {
                year: 0,
                month: 0,
                date: 0,
                maxAfter: new Date().getFullYear(),
                minBefore: 1948,
                year_text: "-请选择年份-",
                month_text: "-请选择月份-",
                date_text: "-请选择日期-"
            }

            $domYear.each(function(index, el) {
                opts = toObject($(this).data(‘date‘));
            });
            //如果有设置值则引用设置值否则默认 
            // var self={};

            this.options = $.extend({}, defaults, opts);
            //声明公用变量名
            var year = this.options.year,
                month = this.options.month,
                date = this.options.date,
                maxAfter = this.options.maxAfter,
                minBefore = this.options.minBefore,
                year_text = this.options.year_text,
                month_text = this.options.month_text,
                date_text = this.options.date_text,
                nowYear = new Date().getFullYear(),
                nowMonth = new Date().getMonth() + 1,
                nowDate = new Date().getDate();
            $domYear.on(‘change‘, set_month);
            $domMonth.on(‘change‘, set_date);
            // 设置年
            function set_year() {
                $domYear.empty();
                $domYear.append("<option value=http://www.mamicode.com/‘0‘>" + year_text + "</option>");
                for (var i = maxAfter; i > minBefore; i--) {
                    $domYear.append("<option value=http://www.mamicode.com/‘" + i + "‘>" + i + "年</option>");
                    if (year === i) {
                        $domYear.val(i);
                    }
                }
                if ($domMonth.length) set_month($domYear.val());
            }
            //設置月 
            function set_month() {
                $domMonth.empty();
                if ($domYear.val() === 0) { $domMonth.val(0) }
                $domMonth.append("<option value=http://www.mamicode.com/‘0‘>" + month_text + "</option>");
                if ($domYear.val() > 0) {
                    for (var i = 1; i < 13; i++) {
                        $domMonth.append("<option value=http://www.mamicode.com/‘" + i + "‘>" + i + "月</option>");
                        if (month === i) {
                            $domMonth.val(i);
                        }
                    }
                }
                if ($domDate.length) set_date($domMonth.val());

            }

            //設置日期 
            function set_date() {
                $domDate.empty();
                if ($domMonth.val() === 0) { $domDate.val(0) }
                $domDate.append("<option value=http://www.mamicode.com/‘0‘>" + date_text + "</option>");
                if ($domYear.val() > 0 && $domMonth.val() > 0) {
                    //獲取設置年月的時間,月份比當前月份少一,1代表月第一天,0就可以獲取上個月的最後一天
                    var settingData = http://www.mamicode.com/new Date($domYear.val(), $domMonth.val(), 0),
                        settingDate = settingData.getDate();
                    for (var i = 1; i <= parseInt(settingDate); i++) {
                        $domDate.append("<option value=http://www.mamicode.com/‘" + i + "‘>" + i + "日</option>");
                        if (date === i) {
                            $domDate.val(i);
                        }
                    }
                }

            }
            //公用方法:将字符串转化为object对象
            function toObject(a) {
                return (new Function(‘return ‘ + a))();
            };
            set_year();
        }
        //作用域问题,生成父级class用来区分,所以一组select必须用一个父级包起来
    jQuery.selectDate_zd_ready = function() {
        $(‘.public_year‘).each(function(i, e) {
            $(this).parent().addClass(‘selectRandom_‘ + i);
            $(document).selectDate_zd(‘selectRandom_‘ + i)
        })
    }
    $.selectDate_zd_ready();
}(jQuery));

 

日期组件--仿