你的位置:首页 > Java教程

[Java教程]日期三联控件

运用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" >'     + '<input type="hidden" id="'+config.hiddenName+'" value="'+config.birthday+'" name="'+config.hiddenName+'">'    + '<select placeholder="请选择年份" data-msg="请选择年份" name="year">'    + '</select>'    + '<span >年</span>'    + '<select placeholder="请选择月份" data-msg="请选择月份" name="month">'    + '</select>'    + '<span >月</span>'    + '<select placeholder="请选择日期" data-msg="请选择日期" name="day">'    + '</select>'    + '<span >日</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 ></div><script>  seajs.use('../src/main');</script></body></html>

  

 

测试结果