日期选择组件
在开发过程中，偶尔会碰到相同内容多处使用的情况。同一种处理办法，却要相互间互不影响。
以下是个人在项目开发中碰到的一个日期选择组件。HTML5提供了input type = "date",但是由于其兼容性，连IE10都无法启用。所以必须考虑使用其它办法。在此之前考虑了JQ UI的日期时间选择。但介于文件超过400KB，这对于一般小型网站，流量资源十分珍贵的情况下还是自己开发一个直接、简单、轻巧。
JS代码如下：
使用方式，十分简单，
var b = new A($('#two')); // 使用A构造函数创建一个对象，传入一个JQ元素对象。如想修改也可在头部修改部分代码。
b.init(); // 初始化各种方法，即可。
var A = function(one){
var createfn = function(){
$('<button></button><div class="select-date"><select name="year">1111</select><select name="month"></select><select name="date"></select></div>').appendTo(one);
/*button点击，显示日期选择*/
one.find('button').on('click',function(){
var disp = one.find('.select-date').css('display');
disp = disp == 'block' ? 'none':'block';
one.find('.select-date').css('display',disp);
});
};
/*获取今天的日期*/
var getTodayDatefn = function(){
var todayDate = new Date();
var string = todayDate.getFullYear()+'-'+(todayDate.getMonth()+1)+'-'+todayDate.getDate();
one.find('button').html(string);
};
/*加载日期选择*/
var loadDateSelectfn = function(){
/*加载年选择*/
var yearSelect = one.find('select[name="year"]');
var monthSelect = one.find('select[name="month"]');
var date = new Date();
var nowYear = date.getFullYear();
for(var i=nowYear;i>2004;i--){
$('<option value="'+i+'">'+i+'</option>').appendTo(yearSelect);
};
/*加载固定的12个月*/
for(var m=1;m<13;m++){
$('<option value="'+m+'">'+m+'</option>').appendTo(monthSelect);
};
};
/*根据不同的月和年，加载不同的天数*/
function loadDaysfn(){
var yearSelect = one.find('select[name="year"]');
var monthSelect = one.find('select[name="month"]');
var daySelect = one.find('select[name=date]');
var getYear = yearSelect.val();
var getMonth = parseInt(monthSelect.val());
var run,bigMonth,runMonth;
var bigMonthArray = [1,3,5,7,8,10,12];
/*判断是否为闰年*/
if(getYear%4 == 0){
run = true;
}else{
run = false;
}
/*判断是否为闰月*/
runMonth = getMonth !=2 ? false:true;
/*判断是大月还是小月*/
var bigOrlitter = $.inArray(getMonth,bigMonthArray);
bigMonth = bigOrlitter>=0 ? true:false;
//记录天数,判断退出条件
var days;
/*依据之前的判断条件加载天数*/
if(bigMonth){
//大月
days = 32;
}else{
//小月
if(!runMonth){
//不是二月
days = 31;
}else{
//是二月
if(run){
//并且是闰月
days = 30;
}else{
//不是闰月
days = 29;
}
}
}
daySelect.html('');
for(var i=1;i<days;i++){
$('<option value="'+i+'">'+i+'</option>').appendTo(daySelect);
};
};
/*修改日期选择，相应的修改button中的显示*/
var changeBtnfn = function(){
one.delegate('select','change',function(){
var yearSelect = one.find('select[name="year"]');
var monthSelect = one.find('select[name="month"]');
var daySelect = one.find('select[name=date]');
var year1 = yearSelect.val();
var month = monthSelect.val();
var theDate = daySelect.val();
var but = year1+'-'+month+'-'+theDate;
one.find('button').html(but);
});
}
/*year,month的改变,改变daySelect的天数*/
var changeDaysfn = function(){
one.delegate('select[name="year"],select[name="month"]','change',function(){
//change days select's day number.
loadDaysfn();
});
};
/*init初始化*/
var init = function(){
createfn();
getTodayDatefn();
loadDateSelectfn();
loadDaysfn();
changeBtnfn();
changeDaysfn();
};
return {
init:init
};
};
/*--------使用部分------------------*/
var b = new A($('#two'));
b.init();
css代码根据具体情况而定，为方便浏览用户直接使用，可将以下代码拷入style标签中：
/*
author@hexisen
date @2014.10.17
content@choice the date.
*/
.dateDiv{
width:160px;
height: 30px;
position: relative;
}
.dateDiv button{
width:160px;
height: 30px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
.select-date{
position: absolute;
width:150px;
top:35px;
left:0;
border:1px solid black;
padding:5px;
margin-right: -3px;
display: none;
}
.select-date select{
float: left;
margin-right: 3px;
cursor: pointer;
}
这一组使用十分方便，当然功能也十分单一，只有一个选择日期的作用。在组件写法上目前处于探路阶段，往诸位高手指点新人。
