在线例子: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. python select poll

    http://www.cnblogs.com/coser/archive/2012/01/06/2315216.html

  2. php 通过http user-agent判断是否为手机浏览器

    <?php/*** 判断是否是通过手机访问* @return bool 是否是移动设备    */public function isMobile() {  //判断手机发送的客户端标志  if ...

  3. 怎么将linux下的项目转换成windows的VS2010下的项目?

    怎么将linux下的项目转换成windows的VS2010下的项目?             不显示删除回复             显示所有回复             显示星级回复        ...

  4. PKU 2506 Tiling(递推+高精度||string应用)

    题目大意:原题链接有2×1和2×2两种规格的地板,现要拼2×n的形状,共有多少种情况,首先要做这道题目要先对递推有一定的了解.解题思路:1.假设我们已经铺好了2×(n-1)的情形,则要铺到2×n则只能 ...

  5. vue生命周期探究(二)

    vue生命周期探究(二) 转载自:https://segmentfault.com/a/1190000008923105 上一章我们介绍了vue的组件生命周期和路由勾子,这一章,让我们来看看在vue- ...

  6. log4j相关配置

    1.概述         log4j是Apache提供的一个日志实现,可以用于我们项目中的日志记录,有log4j1和log4j2两个版本,本文使用log4j2这个版本.SLF4J(Simple log ...

  7. 48. Rotate Image(旋转矩阵)

      You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise) ...

  8. APP图标设计小技巧:在iOS上快速获得APP图标的真实预览图

    严格来说,这并不是一篇关于前端开发的文章,因为涉及到的知识非常浅.这只是一个向设计狮们分享的小经验,只是其中用到了一些前端内容. 最近接了个私活,了解到一个初创公司正在高价悬赏Logo(主要用于APP ...

  9. cx_Oracle连接数据库总结

    python中连接oracle数据库使用第三方库文件cx_Oracle时遇到了各种问题,网上查找资料调试了几天才弄好,下面是不断调试后总结的一些经验.1.oracle客户端(Oracle Instan ...

  10. ImportError: No module named argparse

    如果有root权限,可以运行: easy_install argparse 如果没有root权限,As a simple solution copy argparse.py from https:// ...