运用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>
测试结果