在线例子: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. Selenium Page Object(PO)设计模式

    Webdriver UI自动化测试火了好几年了,具体怎么设计自动化测试测试工程,组织测试用例完全凭借着自己的经验和习惯. 最近忽然听说了Page Object(简称PO)火了起来,也有面试的时候被问到 ...

  2. 如何检测浏览器是否安装了Adblock,uBlock Origin,Adguard,uBlock等广告屏蔽插件

    由于我们网站上的广告经常被一些广告插件给屏蔽掉,上级给我下达了一个检测浏览器是否安装了屏蔽广告的插件的任务. 经过研究,借鉴,参考,整合了如下三种解决方案.   方案一: 利用广告插件通过对含有goo ...

  3. HTTPS原理解析-转

    这篇文章关于Https的讲解真的是太透彻了,转过来备忘. 来源:腾讯bugly 另附两个SSL/TLS的交互详解:一.二 基于此文章的学习总结:下一篇文章 1.HTTPS 基础 HTTPS(Secur ...

  4. Java设计原则—开闭原则(转)

    原文出自:http://www.cnblogs.com/muzongyan/archive/2010/08/05/1793454.html 开闭原则(Open Closed Principle)是Ja ...

  5. Optimal Marks SPOJ - OPTM (按位枚举-最小割)

    题意:给一张无向图,每个点有其点权,边(i,j)的cost是\(val_i\ XOR \ val_j\).现在只给出K个点的权值,求如何安排其余的点,使总花费最小. 分析:题目保证权值不超过32位整型 ...

  6. iOS 关于BTC 一些知识点

    1.BTC 用这个网 可以校验 自己的库生成的助记词 地址 是否是合法正常的 https://iancoleman.io/bip39/ 2.知晓 BTC 钱包是否有钱 和交易记录 https://te ...

  7. struct2的xml文件中result的配置(转)

    一个result代表了一个可能的输出.当Action类的方法执行完成时,它返回一个字符串类型的结果码,框架根据这个结果码选择对应的result,向用户输出.在com.opensymphony.xwor ...

  8. Salesforce中Html的转义,InputField和RemoteAction

    在Salesforce的开发中,有时候需要在对象中插入记录,其中有的字段需要插入Html,但是对于输入Html的域,大多数框架和网站都需要做Html的转义处理,防止XSS或者SQL注入攻击.有时候我们 ...

  9. CCProgressTimer Loading条

    CCProgressTimer *p_SpTime = CCProgressTimer::create(CCSprite::createWithSpriteFrameName("IM_Pro ...

  10. cocos2d-x项目中如何避免增加一个cpp就必须在工程android.mk文件去添加引用

    LOCAL_SRC_FILES := hellocpp/main.cpp \       ../../Classes/AppDelegate.cpp \ ../../Classes/HelloWorl ...