日期三联控件

运用Seajs模块写的一个三联日期选择控件，可以通过配置显示页面元素信息

 

define(function (require, exports, module) {
    'use strict';

    var $ = require('zepto');
    require('./dateSelect.css');

    var config = {
        "dateSelect":".dateSelect",
        "year_box": 'J_select_year',      // 年对象
        "month_box": 'J_select_month',     // 月对象
        "day_box": 'J_select_day',       // 日对象
        "hiddenName":"hiddenName",//隐藏的日期传值
        "birthday":0,            //日期默认值
        "year": 0,              // 年
        "month": 0,              // 月
        "day": 0,              // 日
        "min_year": 0,              // 最小年份
        "max_year": 0,              // 最大年份
        "onChange": null            // 日期改变时执行
    };
    
    var DateSelect = function () {
        var self = this;
        self.config = config;    
    }

    DateSelect.prototype.init = function (options) {
        var self = this;
        self.ops = $.extend({}, self.config, options);
        self.el = $(dateSelTemplate(self.ops));
        self.sel_year = $(self.el).find("."+self.ops.year_box); // 年选择对象
        self.sel_month = $(self.el).find("."+self.ops.month_box); // 年选择对象
        self.sel_day = $(self.el).find("."+self.ops.day_box); // 年选择对象
        self.dateSelectWrap=self.ops.dateSelect;
        self.birthday=self.ops.hiddenName;
        self.year_box="."+self.ops.year_box;
        self.month_box="."+self.ops.month_box;
        self.day_box="."+self.ops.day_box;
    };

    DateSelect.prototype.start = function () {
        this.DateSel();
    };

    DateSelect.prototype.DateSel = function () {
        initDate(this);
        $(this.dateSelectWrap).html(this.el);
    }

    function initDate(dateSelect){
        var date = new Date();                     // 当前日期
        var iMinYear = parseInt(dateSelect.ops.min_year); // 最小年
        var iMaxYear = parseInt(dateSelect.ops.max_year); // 最大年
        var iMonth = parseInt(dateSelect.ops.month);    // 设置月
        var iDay = parseInt(dateSelect.ops.day);      // 设置日

        dateSelect.Year = parseInt(dateSelect.ops.year) || date.getFullYear();   // 获取年
        dateSelect.Month = 1 <= iMonth && iMonth <= 12 ? iMonth : date.getMonth() + 1;
        dateSelect.Day = iDay > 0 ? iDay : date.getDate();
        dateSelect.MinYear = iMinYear && iMinYear < dateSelect.Year ? iMinYear : dateSelect.Year;
        dateSelect.MaxYear = iMaxYear && iMaxYear > dateSelect.Year ? iMaxYear : dateSelect.Year;

        // 设置年
        setSelect(dateSelect.el,dateSelect.year_box, dateSelect.MinYear, dateSelect.MaxYear - dateSelect.MinYear + 1, dateSelect.ops.year ? dateSelect.Year - dateSelect.MinYear : null);

        // 设置月
        setSelect(dateSelect.el,dateSelect.month_box, 1, 12, dateSelect.ops.month ? dateSelect.Month - 1 : null);

        // 设置日
        setDay(dateSelect.el,dateSelect.day_box,dateSelect.Year,dateSelect.Month,dateSelect.Day);

        
        if (dateSelect.ops.month) {
            dateSelect.sel_month.removeClass('disabled'); // 如果月有值后 移除 月 上的 disabled
        }

        if (dateSelect.ops.day) {
           dateSelect.sel_day.removeClass('disabled'); // 如果日有值后 移除 日 上的 disabled
        }

        //日期改变事件
        dateSelect.sel_year.on('change', function () {
            var $self = $(this);
            dateSelect.Year = $self.val();
            dateSelect.sel_month.removeClass('disabled'); // 如果年有值后 移除 月 上的 disabled
            setDay(dateSelect.el,dateSelect.ops.day_box,dateSelect.Year,dateSelect.Month,dateSelect.Day);

            // 是否有回调函数
            if (typeof dateSelect.ops.onChange === 'function') {
                dateSelect.ops.onChange.call(dateSelect);
            }

            $("#"+dateSelect.birthday).val(dateSelect.Year+"-"+dateSelect.Month+"-"+dateSelect.Day);
        });

        dateSelect.sel_month.on('change', function () {
            var $self = $(this);
            dateSelect.Month = $self.val();
            dateSelect.sel_day.removeClass('disabled'); // 如果月有值后 移除 日 上的 disabled
            setDay(dateSelect.el,dateSelect.ops.day_box,dateSelect.Year,dateSelect.Month,dateSelect.Day);

            // 是否有回调函数
            if (typeof dateSelect.ops.onChange === 'function') {
                dateSelect.ops.onChange.call(dateSelect);
            }

            $("#"+dateSelect.birthday).val(dateSelect.Year+"-"+dateSelect.Month+"-"+dateSelect.Day);
        });

        dateSelect.sel_day.on('change', function () {
            var $self = $(this);
            dateSelect.Day = $self.val();

            // 是否有回调函数
            if (typeof dateSelect.ops.onChange === 'function') {
                dateSelect.ops.onChange.call(dateSelect);
            }

            $("#"+dateSelect.birthday).val(dateSelect.Year+"-"+dateSelect.Month+"-"+dateSelect.Day);
        });
    }

    function setSelect(el,select_box, iStart, iLength, iIndex){
        var tpl = '';
        for (var i = 0; i < iLength; i++) {
            tpl += '<option value="' + (iStart + i) + '">' + (iStart + i) + '</option>';
        }

        el.find(select_box).html(tpl);

        if (iIndex != null) {
            el.find(select_box).find('option').eq(iIndex).attr("checked",true);
            el.find(select_box).val($(el).find(select_box).find('option').eq(iIndex).val());
        }
    }

    function setDay(el,select_box,year,month,day){
        //取得月份天数
        var daysInMonth = new Date(year, month, 0).getDate();
        if (day > daysInMonth) {
            day = daysInMonth;
        }

        setSelect(el,select_box, 1, daysInMonth, day ? day - 1 : null);
    }

    function dateSelTemplate(config){
        var temp = '<div data-toggle="dateSel" class="dateSel">' 
        + '<input type="hidden" id="'+config.hiddenName+'" value="'+config.birthday+'" name="'+config.hiddenName+'">'
        + '<select class="'+config.year_box+'" placeholder="请选择年份" data-msg="请选择年份" name="year">'
        + '</select>'
        + '<span class="span-inline">年</span>'
        + '<select class="'+config.month_box+'" placeholder="请选择月份" data-msg="请选择月份" name="month">'
        + '</select>'
        + '<span class="span-inline">月</span>'
        + '<select class="'+config.day_box+'" placeholder="请选择日期" data-msg="请选择日期" name="day">'
        + '</select>'
        + '<span class="span-inline">日</span>'
        + '</div>'
        return temp;
    }

    module.exports = DateSelect;

});

　　调用方法

define(function (require, exports, module) {
    'use strict';
    var $ = require('zepto');
    var DateSel=require('./DateSelectMobile');
    var dateSel=new DateSel();

    var birthday = "";
    var d = new Date(birthday);
    var year = d.getFullYear() || 0;
    var month = d.getMonth() + 1 || 1;
    var day = d.getDate() || 1;

    if(birthday=="")
    {
        birthday=year+"-"+month+"-"+day;
        $("#birthday").val(year+"-"+month+"-"+day);
    }

    dateSel.init({
        "dateSelect":".dateSelect1",
        "year_box": 'J_year',      // 年对象
        "month_box": 'J_month',     // 月对象
        "day_box": 'J_day',       // 日对象
        "hiddenName":"birthday",
        "birthday": birthday,
        "year": year,           // 年
        "month": month,          // 月
        "day": day,            // 日
        "min_year": 1970,           // 最小年份
        "max_year": new Date().getFullYear()// 最大年份
    });

    dateSel.start();
});

　　页面测试

 

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="51offer">
    <title>日期三联控件</title>
    <link rel="stylesheet" href="">
    <!-- 脚本内部测试环境与生产环境区分变量 -->
    <script>
        var root_domain = '51offer.com';
    </script>

    <!-- 全局通用样式脚本 -->
    <link rel="stylesheet" href="http://static.51offer.com/mod/public/h5/global/1.0.1/css/global.css">
    <script src="http://static.51offer.com/mod/??seajs/seajs/3.0.0/sea.js,seajs/plugin/perload/1.0.0/preload.js,seajs/plugin/style/1.0.2/style.js,seajs/plugin/css/1.0.4/css.js,seajs/config/1.0.2/mobile.js,zepto/1.1.4/zepto.js,gallery/cookie/1.0.2/cookie.js"></script>
    <script src="http://static.51offer.com/mod/public/h5/global/1.0.1/global.js"></script>
    <!-- 全局通用样式脚本 end -->
</head>
<body>

<div class="dateSelect1"></div>

<script>
    seajs.use('../src/main');
</script>
</body>
</html>

　　

 

测试结果