JavaScript日期选择功能示例
本文实例讲述了JavaScript日期选择功能。分享给大家供大家参考，具体如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>javascript日期选择</title>
<style type="text/css">
option{
width:150px;
}
</style>
</head>
<body>
<!--<input type="hidden" value="window.location.href" />-->
<br />
<div id="dateOp">
<select id="selectYear" onchange="getDay()"></select>年
<select id="selectMonth" onchange="getDay()"></select>月
<select id="selectDay"></select>日
<input type="button" value="getdate" />
</div>
<script type="text/javascript">
//或得当前年月日
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var startYear = 2000;
var endYear = 2050;
var button = document.getElementsByTagName("input")[0];
//得到三个select项
var selectYearElement = document.getElementById("selectYear");
var selectMonthElement = document.getElementById("selectMonth");
var selectDayElement = document.getElementById("selectDay");
//selectYearElement.onchange = getDay();
//selectMonthElement.onchange = getDay();
//selectYearElement.addEventListener
getYear();
getMonth();
getDay();
//年份函数
function getYear() {
for (var i = startYear; i <= endYear; i++) {
var opYearElement = document.createElement("option");
var textElement = document.createTextNode(i);
opYearElement.appendChild(textElement);
opYearElement.value = i;
selectYearElement.appendChild(opYearElement);
}
//设置默认年份的值
selectYearElement.selectedIndex = year - startYear;
}
//月份函数
function getMonth() {
for (var i = 1; i <= 12; i++) {
var opMonthElement = document.createElement("option");
textMonth = document.createTextNode(i);
opMonthElement.appendChild(textMonth);
opMonthElement.value = i;
selectMonthElement.appendChild(opMonthElement);
}
//设置默认年份的值
selectMonthElement.selectedIndex = month - 1;
}
//日期函数
function getDay() {
var getSelectedYear = selectYearElement.selectedIndex + startYear;
var getSelectedMonth = selectMonthElement.selectedIndex + 1;
var flag = 0;
var selectDayElement = document.getElementById("selectDay");
if (selectDayElement.hasChildNodes()) {
var optionElements = selectDayElement.getElementsByTagName("option");
for (var i = 0; i < optionElements.length; i++) {
selectDayElement.removeChild(optionElements[0]);
//不知道为什么必须得自减一
i--;
}
}
else {
}
//得到闰年
if ((getSelectedYear % 4 == 0 && getSelectedYear % 100 != 0) || getSelectedYear % 400 == 0) {//得到闰年的年号
//alert("闰年");
//得到闰年大月份除二月以外
if ((getSelectedMonth <= 7 && getSelectedMonth % 2 == 1 && getSelectedMonth != 2) || (getSelectedMonth >= 8 && getSelectedMonth % 2 == 0)) {//得到大月
setDay(flag = 31);
}
else if (getSelectedMonth <= 7 && getSelectedMonth == 2) {
setDay(flag = 29);
}
else if ((getSelectedMonth <= 7 && getSelectedMonth % 2 == 0 && getSelectedMonth != 2) || (getSelectedMonth >= 8 && getSelectedMonth % 2 == 1)) {//得到小月份除二月以外
setDay(flag = 30);
}
}
//非闰年
else {
//alert("平年");
//得到平年大月份除二月以外
if ((getSelectedMonth <= 7 && getSelectedMonth % 2 == 1 && getSelectedMonth != 2) || (getSelectedMonth >= 8 && getSelectedMonth % 2 == 0)) {//得到大月
setDay(flag = 31);
}
else if (getSelectedMonth <= 7 && getSelectedMonth == 2) {
setDay(flag = 28);
}
else if ((getSelectedMonth <= 7 && getSelectedMonth % 2 == 0 && getSelectedMonth != 2) || (getSelectedMonth >= 8 && getSelectedMonth % 2 == 1)) {//得到小月份除二月以外
setDay(flag = 30);
}
}
}
//设置默认年份的值
selectDayElement.selectedIndex = day - 1;
function setDay(dayLength) {
for (var i = 1; i <= dayLength; i++) {
var opDayElement = document.createElement("option");
textMonth = document.createTextNode(i);
opDayElement.appendChild(textMonth);
opDayElement.value = i;
//alert(i);
selectDayElement.appendChild(opDayElement);
}
}
button.onclick = function () {
var getSelectedYear = selectYearElement.selectedIndex + startYear;
var getSelectedMonth = selectMonthElement.selectedIndex + 1;
var getSelectedDay = selectDayElement.selectedIndex + 1;
alert("当前选中的日期是：" + getSelectedYear + "年" + getSelectedMonth + "月" + getSelectedDay + "日")
}
//getDay
</script>
</body>
</html>
运行效果图如下：
PS：这里再为大家提供几款日期与日历相关在线工具供大家参考使用：
在线万年历日历：
http://tools.jb51.net/bianmin/wannianli
网页万年历日历：
http://tools.jb51.net/bianmin/webwannianli
在线阴历/阳历转换工具：
http://tools.jb51.net/bianmin/yinli2yangli
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript时间与日期操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
js 格式化时间日期函数小结
复制代码 代码如下: Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(), //minute "s+" : this.g
-
日期 时间js控件
复制代码 代码如下: <script language="JavaScript"> /**//** *本日历选择控件由tiannet根据前人经验完善而得.大部分代码来自meizz的日历控件. *tiannet添加了时间选择功能.select,object标签隐藏功能,还有其它小功能. *使用方法: * (1)只选择日期 <input type="text" name="date" readOnly onClick="s
-
js data日期初始化的5种方法
创建一个日期对象: 复制代码 代码如下: var objDate=new Date([arguments list]); 参数形式有以下5种: 1)new Date("month dd,yyyy hh:mm:ss"); 2)new Date("month dd,yyyy"); 3)new Date(yyyy,mth,dd,hh,mm,ss); 在程序中我使用的第三种初始化方法,总是显示格式化的参数不正确,仔细看了一下一定要是整型的才可以,我传递的是字符串 4)new
-
JS 日期比较大小的简单实例
1,比较日期大小的js代码 复制代码 代码如下: <script>var beginDate=$("#beginDate").val(); var endDate=$("#endDate").val(); var d1 = new Date(beginDate.replace(/\-/g, "\/")); var d2 = new Date(endDate.replace(/\-/g, "\/"));
-
js中的时间转换—毫秒转换成日期时间的示例代码
js毫秒时间转换成日期时间 复制代码 代码如下: var oldTime = (new Date("2011/11/11 20:10:10")).getTime(); //得到毫秒数 大多数是用毫秒数除以365*24*60*60&1000,这么转回去,这种方法转换太过复杂,年月日,时分秒都要不同的方法获取,而且有的年份有366天,有的365天,这么算起来就太过复杂了. 后面自己试了一个方法,居然成功了 复制代码 代码如下: var oldTime = (new Date(&qu
-
JS 日期操作代码，获取当前日期，加一天，减一天
title $ = function(o) { return typeof o === 'string' ? document.getElementById(o) : o }; //设置当前日期 var ma = [['1','3','5','7','8','10'],['4','6','9','11']]; var dd = new Date(); var x = dd.toLocaleString(); var o = pasDate(x); $('date').value = o.join
-
js时间戳转为日期格式的方法
什么是Unix时间戳(Unix timestamp): Unix时间戳(Unix timestamp),或称Unix时间(Unix time).POSIX时间(POSIX time),是一种时间表示方式,定义为从格林威治时间1970年01月01日00时00分00秒起至现在的总秒数.Unix时间戳不仅被使用在Unix系统.类Unix系统中,也在许多其他操作系统中被广泛采用. 目前相当一部分操作系统使用32位二进制数字表示时间.此类系统的Unix时间戳最多可以使用到格林威治时间2038年01月19日
-
JS 显示当前日期与时间的代码
JS 显示当前日期 复制代码 代码如下: <script language="Javascript"> var datelocalweek=new Array("星期日", "星期一", "星期二","星期三","星期四", "星期五","星期六"); var datelocalnow=new Date(); var datelocal
-
js获取日期：昨天今天和明天、后天
复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="textml; charset=utf-8"> <title>js获取日期:前天.昨天.今天.明天.后天 - Liehuo.Net</title> </head> <body> <script language="JavaScript&q
-
js:日期正则表达式及检测
这是yyyy-mm-dd hh:mm:ss 的 /^(\d{4})\-(\d{2})\-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/ ; 这是 yyyy-mm-ddde 的 /^(\d{4})\-(\d{2})\-(\d{2})$/ function validateCNDate( strValue ) { var objRegExp = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/ if(!objRegExp.test(strValue))
-
js时间戳格式化成日期格式的多种方法
js需要把时间戳转为为普通格式,一般的情况下可能用不到的, 下面先来看第一种吧 复制代码 代码如下: function getLocalTime(nS) { return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' '); } alert(getLocalTime(1293072805)); 结果是 2010年12月23日 10:53 第二种 复制代码 代码如下: function getLocalTi
-
js用Date对象的setDate()函数对日期进行加减操作
想自己写一个日期的加减方法,但是涉及到每个月天数的判断,如果是2月份的话,还要涉及到闰年的判断,有些复杂,应用过程中总是出现问题,于是查了下资料,以在某个日期上加减天数来说,其实只要调用Date对象的setDate()函数就可以了,具体方法如下: function addDate(date,days){ var d=new Date(date); d.setDate(d.getDate()+days); var month=d.getMonth()+1; var day = d.getDate(