原生javascript-日期年,月,日联动选择
在线例子: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-日期年,月,日联动选择的更多相关文章
- 原生JavaScript的省市县三级联动
三级联动是我们写表单时必不可少的,比如在写收货地址时,就用到他了,最近在看原生JavaScript,从基础写起,待完善,以后再写个jquery版的. <!DOCTYPE html> < ...
- oracle 日期取 月 日
今天碰到只要取月份和天数,如果月份前面有0要去掉0.比如说2010-01-08 ,需要的结果是1-8. 引出了一系列的sql语句 第一: 利用to_number的函数转换自动截0 select to_ ...
- javascript 以“年-月-日 时:分:秒”格式显示当前时间
运行代码 /** * Created by shgbit on 2015/1/9. *js代码 */ function showNow(){ var t=new Date(); var mont ...
- javascript 日期月份加减
项目中需要用到,自己写了一个.javascript日期按月加减 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...
- [js开源组件开发]js手机联动选择日期 开源git
js手机联动选择日期 这里在前面的<js手机联动选择地区>的基础上,改造数据源之后形成的一个日期的选择器,当然你可以使用之前的PC上模式的<日期控件>,它同时也支持手机端,ht ...
- 【原创】Js:日期处理(日期格式必须【yyyy-mm-dd】才能转成long的毫秒!其他的不是【年-月-日】的格式,结果会是【NaN】)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- C语言根据日期(年,月,日)判断星期几(使用基姆拉尔森计算公式)
C语言根据日期判断星期几(使用基姆拉尔森计算公式) 算法如下: 基姆拉尔森计算公式W= (d+2*m+3*(m+1)/5+y+y/4-y/100+y/400) mod 7 在公式中d表示日期中的日数, ...
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- php计算两个日期相差 年 月 日
在PHP程序中,很多时候都会遇到处理时间的问题,比如:判断用户在线了多长时间,共登录了多少天,两个帖子发布的时间差或者是不同操作之间的日志记录等等.在文章中,简单地举例介绍了PHP中如何计算两个日期相 ...
随机推荐
- XDU 1098 (欧拉函数模板题)
原题链接,点击此处 欧拉函数:φ(N)表示对一个正整数N,欧拉函数是小于N且与N互质的数的个数 通式:φ(x) = x(1-1/p1)(1-1/p2)(1-1/p3)(1-1/p4)…..(1-1/p ...
- JVM调优之Java进程消耗CPU过高
JVM调优之Java进程消耗CPU过高 查找问题思路 1.查看cpu使用率,发现有线程cpu占用率很高 tops 咱们拿18092线程举例示范 2.查询pid对应的进程 ps -ef|grep 18 ...
- 受限的用户shell环境
有些特殊情况下需要实现将系统内普通用户限定在指定目录下,并且只能使用系统管理员设定的命令.lshell就是实现这样功能的一个神器. lshell提供了一个针对每个用户可配置的限制性shell,lshe ...
- ISAP模板
#include<bits/stdc++.h> using namespace std; using namespace std; typedef long long ll; const ...
- 有关RDD的基础学习1
1.spark rdd为什么不能嵌套? 譬如 val rdd1=sc.parallel(range(1,100)) val rdd2=sc.parallel(range(1,100)) ...
- OpenVPN GUI出现CreateProcess错误的解决方法
问题描述 启动 OpenVPN GUI 时失败,提示“CreateProcess Failed, exe=’X:\XXXXX\OpenVPN\bin\openvpn.exe’ cmdline= ...
- 判断变量是否为 NaN
首先要明确 NaN 的一个特性, NaN不能用相等操作符(== 和 ===) 来判断, NaN === NaN 会返回 false: 下面是测试代码: console.log(isNaN('1')) ...
- [Android] 录音与播放录音实现
http://blog.csdn.net/cxf7394373/article/details/8313980 android开发文档中有一个关于录音的类MediaRecord,一张图介绍了基本的流程 ...
- NRF24L01——工作原理解读
源: NRF24L01——工作原理解读
- 20145322《Java程序设计》第3次实验报告
实验内容,, 组队使用 git 上传代码并且互相下载对方代码修改之后再上传. 实现代码的重载 一. 使用git 上传代码 过程如图: 仨人成功上传后的代码图如下: 使用git 相互更改代码 执行git ...