在线例子:http://lgy.1zwq.com/dateSwitch/

月份的判定,由于涉及到过多了判定条件,如果用if else会大大降低性能,建议用switch 语法

 getDays:function(year,month){
// var aDay = [31,28|29,31,30,31,30,31,31,30,31,30,31];
// 二月份的天数数据处理
var FedDays = year%4==0?29:28,
returnDays = '';
var month = month<10?month = '0'+month:month.toString();
switch(month){
case '01':
case '03':
case '05':
case '07':
case '08':
case '10':
case '12': returnDays = 31;break;
case '04':
case '06':
case '09':
case '11': returnDays = 30;break;
case '02': returnDays = FedDays;break;
}
return returnDays;
}

完整的源代码:

/*  author:laoguoyong
------------------------------
日期三级联动,范围选择
------------------------------
参数
* [String] targets:'#year,#month,#day' ;年,月,日的id
* [String] range:'2013-02-03,2019-09-21';范围,正确格式为xxxx-xx-xx
----为了节省代码,请传入正确的日期范围参数
----错误示范:
(1)range:'2013-02-03,2019-9-21' 是不对的,注意日期格式
(2)range:'2013-02-03' 是不对的,请输入完整的范围之值
(3)range:'2013-02-03,2016-02-30' 是不对的,2月没有30天
(3)range:'2013-02-03,2011-02-30' 是不对的,范围错误了
*
*/
function GySetDate(opt){
//elem
var targets = opt.targets.split(',');
this.eYear = this.getId(targets[0].slice(1));
this.eMonth = this.getId(targets[1].slice(1));
this.eDay = this.getId(targets[2].slice(1));
if(!this.eYear||!this.eMonth||!this.eDay) return;
//范围值
var r = opt.range.indexOf(','),
aStarts = opt.range.slice(0,r).split('-'), // 转为:['2013','05','20']
aEnds = opt.range.slice(r+1,opt.range.length).split('-'); // 转为:['2018','08','20']
//Number类型
this.startYear = parseInt(aStarts[0],10);
this.startMonth = parseInt(aStarts[1],10);
this.startDay = parseInt(aStarts[2],10);
this.endYear = parseInt(aEnds[0],10);
this.endMonth = parseInt(aEnds[1],10);
this.endDay = parseInt(aEnds[2],10); this.init();
}
GySetDate.prototype = {
init:function(){
var _that = this;
// 初始化日期
this.setYears({'start':this.startYear,'end':this.endYear});
this.setMonths({'start':this.startMonth});
this.setDays({'year':this.startYear,'month':this.startMonth,'start':this.startDay});
// 年选择
this.eYear.onchange = function(){
var year = parseInt(this.value);
switch(true){
case (year == _that.startYear):{
_that.setMonths({'start':_that.startMonth});
_that.setDays({'year':_that.startYear,'month':_that.startMonth,'start':_that.startDay});
};break;
case (year == _that.endYear):{
_that.setMonths({'start':1,'end':_that.endMonth});
if(_that.endMonth>1){
_that.setDays({'year':_that.endYear,'month':1,'start':1});
}else{
_that.setDays({'year':_that.endYear,'month':1,'start':1,'end':_that.endDay});
}
};break;
default:{
_that.setMonths({'start':1});
_that.setDays({'start':1,'year':year,'month':1});
}
} }
// 月选择
this.eMonth.onchange = function(){
var year = parseInt(_that.eYear.options[_that.eYear.selectedIndex].value),
month = parseInt(this.value);
switch(true){
case (year==_that.endYear&&month==_that.endMonth):{
_that.setDays({'start':1,'year':year,'month':month,'end':_that.endDay});
};break;
case (year==_that.startYear&&month==_that.startMonth):{
_that.setDays({'year':_that.startYear,'month':_that.startMonth,'start':_that.startDay});
};break;
default:{
_that.setDays({'start':1,'year':year,'month':month});
}
} }
},
/*设置年,月,日
----------------------------------
参数值都为Number类型
*/
// 参数 {'start':xx,'end':xxx}
setYears:function(opt){
this.eYear.innerHTML = '';
for(var n=opt.start;n<=opt.end;n++){
this.eYear.add(new Option(n,n));
}
},
// 参数 {'start':xx,'end':xxx}
// 参数 'end' 为可选,忽略,则开始到12月
setMonths:function(opt){
this.eMonth.innerHTML = '';
var months = opt.end || 12;
for(var n=opt.start;n<=months;n++){
if(n<10) n = '0'+n;
this.eMonth.add(new Option(n,n));
}
},
// 参数 {'start':xx,'year':xxx,'month':xx,'star':xx,'end':xxx}
// 参数 'end' 为可选,忽略,则开始到本月底(根据月份判断的)
setDays:function(opt){
this.eDay.innerHTML = '';
var days = opt.end || this.getDays(opt.year,opt.month);
for(var n=opt.start;n<=days;n++){
if(n<10) n = '0'+n;
this.eDay.add(new Option(n,n));
}
},
/* 根据 年,月,返回正确的天数,如 2016-2,返回是29天(润年)
--------------------------------------------------------------
参数值都为Number类型
*/
getDays:function(year,month){
// var aDay = [31,28|29,31,30,31,30,31,31,30,31,30,31];
// 二月份的天数数据处理
var FedDays = year%4==0?29:28,
returnDays = '';
var month = month<10?month = '0'+month:month.toString();
switch(month){
case '01':
case '03':
case '05':
case '07':
case '08':
case '10':
case '12': returnDays = 31;break;
case '04':
case '06':
case '09':
case '11': returnDays = 30;break;
case '02': returnDays = FedDays;break;
}
return returnDays;
},
/*工具辅助函数
----------------------------------
*/
getId:function(id){
return document.getElementById(id);
}
}

原生javascript-日期年,月,日联动选择的更多相关文章

  1. 原生JavaScript的省市县三级联动

    三级联动是我们写表单时必不可少的,比如在写收货地址时,就用到他了,最近在看原生JavaScript,从基础写起,待完善,以后再写个jquery版的. <!DOCTYPE html> < ...

  2. oracle 日期取 月 日

    今天碰到只要取月份和天数,如果月份前面有0要去掉0.比如说2010-01-08 ,需要的结果是1-8. 引出了一系列的sql语句 第一: 利用to_number的函数转换自动截0 select to_ ...

  3. javascript 以“年-月-日 时:分:秒”格式显示当前时间

    运行代码 /** * Created by shgbit on 2015/1/9. *js代码 */ function showNow(){ var t=new Date();    var mont ...

  4. javascript 日期月份加减

    项目中需要用到,自己写了一个.javascript日期按月加减 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...

  5. [js开源组件开发]js手机联动选择日期 开源git

    js手机联动选择日期 这里在前面的<js手机联动选择地区>的基础上,改造数据源之后形成的一个日期的选择器,当然你可以使用之前的PC上模式的<日期控件>,它同时也支持手机端,ht ...

  6. 【原创】Js:日期处理(日期格式必须【yyyy-mm-dd】才能转成long的毫秒!其他的不是【年-月-日】的格式,结果会是【NaN】)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. C语言根据日期(年,月,日)判断星期几(使用基姆拉尔森计算公式)

    C语言根据日期判断星期几(使用基姆拉尔森计算公式) 算法如下: 基姆拉尔森计算公式W= (d+2*m+3*(m+1)/5+y+y/4-y/100+y/400) mod 7 在公式中d表示日期中的日数, ...

  8. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  9. php计算两个日期相差 年 月 日

    在PHP程序中,很多时候都会遇到处理时间的问题,比如:判断用户在线了多长时间,共登录了多少天,两个帖子发布的时间差或者是不同操作之间的日志记录等等.在文章中,简单地举例介绍了PHP中如何计算两个日期相 ...

随机推荐

  1. 随机深林和GBDT

    随机森林(Random Forest): 随机森林是一个最近比较火的算法,它有很多的优点: 在数据集上表现良好 在当前的很多数据集上,相对其他算法有着很大的优势 它能够处理很高维度(feature很多 ...

  2. (转 )C++ static、const和static const 以及它们的初始化

    const定义的常量在函数执行之后其空间会被释放,而static定义的静态常量在函数执行后不会被释放其空间.但不论是Const还是static  他们定义的内容都会随着程序的结束而被系统清楚. sta ...

  3. Charles 抓包工具的使用

    抓包工具有很多,目前用过的有Charles, Fiddler, burpsuite.下面主要是Charles 的应用实例. 一. 用Charles抓包 1. PC 抓包 打开Charles, 确保“录 ...

  4. TOSCA自动化测试工具--Log defect

    1.执行完用例后,对于失败的用例进行分析,如果有缺陷,可以提对应的缺陷 2.在issues模块, 右键创建自己需要的文件夹,然后在文件夹上右键找到虫子图形点下,就可以创建缺陷了,填上对应的内容 3.如 ...

  5. oracle 将当前系统时间戳插入timestamp字段

    oracle 将当前系统时间戳插入timestamp字段 --insert records 精确到秒:insert into userlogin_his(usrname,logintime) valu ...

  6. eclipse 创建jsp报错

  7. 【python】win10中python3.5.2输入pip出现Fatal error in launcher: Unable to create process using '"'

    系统:windows 10 python版本:3.5.2 出现的错误如下: C:\Users\zhuxy>pip list Fatal error in launcher: Unable to ...

  8. 关于MVC 中EF调用存储过程

    Entity Framework 4.3 中使用存储过程 分类:ASP.NET MVC 3, ASP.NET                  0                   尽管 Entit ...

  9. 20145103 《Java程序设计》第7周学习总结

    20145103<Java程序设计>第7周学习总结 教材学习内容总结 第十三章 时间与日期 13.1 认识时间与日期 就目前来说,即使标注为GMT(无论是文件说明,或者是API的日期时间字 ...

  10. 20145324 《Java程序设计》第5周学习总结

    20145324 <Java程序设计>第5周学习总结 教材学习内容总结 第八章 1.java中所有错误都会被包装成为对象 2.可以使用尝试(try)执行程序并捕捉代表错误的对象后做一些处理 ...