JavaScript用select实现日期控件
代码很简单，这里就不多废话了，直接给大家源码吧
<!doctype html>
<html>
<head>
<title>年月日</title>
</head>
<body onLoad="init()">
<select id="year" onChange="swap_day()"></select>年
<select id="month" onChange="swap_day()"></select>月
<select id="day"></select>日
</body>
<script>
var month_big = new Array("1","3","5","7","8","10","12"); //包含所有大月的数组
var month_small = new Array("4","6","9","11"); //包含所有小月的数组
//页面加载时调用的初始化select控件的option的函数
function init()
{
var select_year = document.getElementById("year"); //获取id为"year"的下拉列表框
var select_month = document.getElementById("month"); //获取id为"month"的下拉列表框
var select_day = document.getElementById("day"); //获取id为"day"的下拉列表框
//将年份选项初始化，从1980到2000
for(var i = 1980; i <= 2000; i++)
{
select_year_option = new Option(i, i);
select_year.options.add(select_year_option);
}
//将月份选项初始化，从1到12
for(var i = 1; i <= 12; i++)
{
select_month_option = new Option(i, i);
select_month.options.add(select_month_option);
}
//调用swap_day函数初始化日期
swap_day();
}
//判断数组array中是否包含元素obj的函数，包含则返回true，不包含则返回false
function array_contain(array, obj)
{
for (var i = 0; i < array.length; i++)
{
if (array[i] === obj)
{
return true;
}
}
return false;
}
//根据年份和月份调整日期的函数
function swap_day()
{
var select_year = document.getElementById("year"); //获取id为"year"的下拉列表框
var select_month = document.getElementById("month"); //获取id为"month"的下拉列表框
var select_day = document.getElementById("day"); //获取id为"day"的下拉列表框
select_day.options.length = 0; //在调整前先清空日期选项里面的原有选项
var month = select_month.options[select_month.selectedIndex].value; //获取被选中的月份month
//如果month被包含在month_big数组中，即被选中月份是大月，则将日期选项初始化为31天
if(array_contain(month_big, month))
{
for(var i = 1; i <= 31; i++)
{
select_day_option = new Option(i, i);
select_day.options.add(select_day_option);
}
}
//如果month被包含在month_small数组中，即被选中月份是小月，则将日期选项初始化为30天
else if(array_contain(month_small, month))
{
for(var i = 1; i <= 30; i++)
{
select_day_option = new Option(i, i);
select_day.options.add(select_day_option);
}
}
//如果month为2，即被选中的月份是2月，则调用initFeb()函数来初始化日期选项
else
{
initFeb();
}
}
//判断年份year是否为闰年，是闰年则返回true，否则返回false
function isLeapYear(year)
{
var a = year % 4;
var b = year % 100;
var c = year % 400;
if( ( (a == 0) && (b != 0) ) || (c == 0) )
{
return true;
}
return false;
}
//根据年份是否闰年来初始化二月的日期选项
function initFeb()
{
var select_year = document.getElementById("year"); //获取id为"year"的下拉列表框
var select_day = document.getElementById("day"); //获取id为"day"的下拉列表框
var year = parseInt(select_year.options[select_year.selectedIndex].value); //获取被选中的年份并转换成Int
//如果是闰年，则将日期选项初始化为29天
if(isLeapYear(year))
{
for(var i = 1; i <= 29; i++)
{
select_day_option = new Option(i, i);
select_day.options.add(select_day_option);
}
}
//如果不是闰年，则将日期选项初始化为28天
else
{
for(var i = 1; i <= 28; i++)
{
select_day_option = new Option(i, i);
select_day.options.add(select_day_option);
}
}
}
</script>
</html>
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关推荐
-
javascript计算当月剩余天数(天数计算器)示例代码
代码如下: 复制代码 代码如下: <script language="JavaScript"> <!-- Beginvar today = new Date();var now = today.getDate();var year = today.getYear();if (year < 2000) year += 1900; // Y2K fixvar month = today.getMonth(); var monarr = new Array(31, 2
-
javascript比较两个日期相差天数的方法
本文实例讲述了javascript比较两个日期相差天数的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content
-
javascript显示中文日期的方法
本文实例讲述了javascript显示中文日期的方法.分享给大家供大家参考.具体实现方法如下: 将以下代码加入HEML的<body></body>之间 <script LANGUAGE="JavaScript"> function number(index1){ var numberstring="一二三四五六七八九十"; if(index1 ==0) {document.write("十")} if(inde
-
javaScript 计算两个日期的天数相差(示例代码)
一:计算两个日期相差的天数 比如: str1 = "2002-01-20" str2 = "2002-10-11" 怎样用javaScript计算出str1与str2之间相差的天数? 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"&
-
javascript日期计算实例分析
本文实例讲述了javascript日期计算.分享给大家供大家参考.具体如下: function setLeaveDate(){ var inDay=$("#date_6").val(); // 获取的日期格式为2014-07-03 var date=inDay.split('-'); // 将日期分隔成数字 var num=$(".time_lk").val()*1; // 需增加的天数 var year=date[0]*1; var month=date[1]*1
-
javascript格式化日期时间方法汇总
示例一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>TT</title> <script src="jquery.js"></script> </head> <body> <p style="line-height: 50%;"><s
-
用javascript实现计算两个日期的间隔天数
ASP 里面计算两个时间的差距可以 DateDiff,但 javascript 里面没有,需要手写函数. js 里面居然可以直接 Date1-Date2,而且还是转换为毫秒计算时间差的. 复制代码 代码如下: // 计算两个日期的间隔天数 function DateDiff(sDate1, sDate2){ //sDate1和sDate2是2002-12-18格式 var aDate, oDate1, oDate2, iDays aDate = sDate1.split("-"
-
JavaScript用select实现日期控件
代码很简单,这里就不多废话了,直接给大家源码吧 <!doctype html> <html> <head> <title>年月日</title> </head> <body onLoad="init()"> <select id="year" onChange="swap_day()"></select>年 <select id=&q
-
一个简单横向javascript日期控件
具体要求就是: 1.日期表格横向占满页面. 2.每个月的日期列表横向显示在一排,而不是像网上的很多日期控件显示一个方块. 3.要求只有年月日可选,选择年或月后自动更新对应日期(这个每个日期控件都有的). 4.默认显示当前年月,高亮当前日期,并显示当前的周次(本年第几周)和星期几. 5.选择某个日期后高亮显示当前日期,并自动更新周次和星期显示. 6.提供接口,可以设定特定日期的显示样式. 6.其他就是一些界面展示的问题了. 想着就是一个日期控件,做着也比较简单,不过比较特别是横向的,第一次听说这种
-
ASP.NET My97DatePicker日期控件实现OA日期记事功能
My97DatePicker日期控件是一个非常好用的日期控件,功能非常优秀的日期控件. 对实现页面刷新完善的很好,用日期控件时可以有比较好的享受,这次的OA日期记事功能也得益于此控件,具体效果图如下: 部分代码: Default页布局一个Calendar日期控件 <div> <asp:Calendar ID="Calendar1" runat="server" Width="100%" ShowGridLines="T
-
ASP.NET Calendar日历(日期)控件使用方法
Calendar 控件显示一个日历,用户可通过该日历导航到任意一年的任意一天.当 ASP.NET 网页运行时,Calendar 控件以 HTML 表格的形式呈现.因此,该控件的许多属性与多种不同的表格格式相符.在这些属性中,有几个在一些低版本的浏览器中不能得到完全支持,因此在这些浏览器中并不能使用所有的格式功能. 使用 Calendar 控件在网页上显示日历的单个月.该控件使您可以选择日期并移到下个月或上个月.Calendar 控件支持 System.Globalization 命名空间中的所有
-
ASP.NET使用My97DatePicker日期控件实例
.Net中默认提供了Calendar日期控件,但是它有一个缺陷,就是每次日历的显示,隐藏和用户的的选择日期都会造成回传. 在网上找到My97DatePicker这个js日期控件,不错,和大家分享一下. My97DatePicker日期控件在网上很多都可以免费下载,也有该控件的网站 把下载好的My97DatePicker.jar解压,黏贴到项目根目录下,当然这个位置大家可以自己设置 我在根目录下新建了一个test.aspx页面 源代码: <%@ Page Language="C#&qu
-
jQuery带时间的日期控件代码分享
本文实例讲述了JS+CSS3实现的类似于苹果iwatch计时器特效.分享给大家供大家参考.具体如下: 带时间的jQuery日期控件代码是一款基于jQueryUI实现的,可自定义日期插件语言,这个日期控件的亮点就在于选择的时间可精确到分钟. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery带时间的日期控件代码如下 <h
-
jQuery EasyUI中的日期控件DateBox修改方法
jQuery EasyUI中的日期控件DateBox很好用的,首先需要引入jquery文件,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic DateBox - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/cs
-
ASP.NET项目开发中日期控件DatePicker如何使用
前几天做项目的时候要用到日期控件,但是在ASP.NET中,没有封装日期控件,第一想法就是百度一下喽~,下面给大家分享如何使用这个控件,扩充一下自己的代码库. 首先需要大家下载一个DatePicker的JavaScript的文件,解压文件包,放于所需的项目文件夹下,直接放到JS的文件夹下(没有的话直接粘贴进来就可以),然后在要用的界面里面引用这个DatePicker的WdatePicker.JS文件. 图一 界面展示 前台代码: <%@ Page Language="C#" Aut
-
bootstrap日期控件问题（双日期、清空等问题解决）
bootstrap以它优美的外观和丰富的组件,使它成为目前最流行的前端框架.在项目开发中,我们使用它的日期控件确实遇到了一些问题: 1.日期控件后面两个图标点击触发失效 2.双日期关联问题 3.双日期清空时,之前输入日期关联仍然有效 4.输入年月 5.图标不显示(这个直接在引入图标的文件里搜url地址,修改地址就可以解决) 下面的代码都会一一解决. <!doctype html> <html> <head> <meta charset="utf-8&qu
-
layui table 表格上添加日期控件的两种方法
方法一: var tableInit = table.render({ elem: '#tbtxrz' , method: 'post' , data: jsonData , height: "auto" , id: "tbtxrz" , text: {none: '暂无相关数据'} , toolbar: toolbartxrz , cols: [[ { //设置表格中部分字体的颜色 field: "number", title: "序