源代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

		</style>

	</head>

	<body>

		<div id="xsj">

			<select id="year" onclick="Reset()"></select>年

			<select id="month" onclick="Reset()"></select>月

			<select id="date"></select>日

		</div>

	</body>

	<script type="text/javascript">

		 //创建时间对象

		 var d = new Date();

		 //获取当前年份

		 var year = parseInt(d.getFullYear());

		 //获取当前月份

		 var month = parseInt(d.getMonth() + 1);

		 //获取当前日期

		 var date = parseInt(d.getDate());

		 //调用添加年份的函数

		 fillYear();

		 //调用添加月份的函数

		 fillMonth();

		 //调用添加天数的函数

		 fillDate();

		 //添加年份的函数

		 function fillYear () {

		 	//定义一个空变量来接收下拉列表中该填入的值

		 	var str = "";

		 	//遍历当前年份的前后五年

		 	for (var i=year-5; i<year+6; i++) {

		 		//设置当前年份为默认选中

		 		if (i == year) {

		 			str = str + "<option selected = 'selected'>"+i+"</option>"

		 		} else{

		 			str = str + "<option>"+i+"</option>"

		 		}

		 	}

		 	//将年份添加至下拉列表

		 	document.getElementById("year").innerHTML = str;

		 }

		 //添加月份的函数

		 function fillMonth () {

		 	var str = "";

		 	//遍历月份

		 	for (var m = 1; m < 13; m++) {

		 		//设置当前月份为默认选中

		 		if (m == month) {

		 			//下拉列表的默认选项

		 			str = str + "<option selected = 'selected'>"+m+"</option>"

		 		} else{

		 			//下拉列表的非默认选项

		 			str = str + "<option>"+m+"</option>"

		 		}

		 	}

		 	//将月份填充至下拉列表

		 	document.getElementById("month").innerHTML = str;

		 }

		 //添加天数的函数

		 function fillDate () {

		 	//定义初始天数为31天

		 	var days = 31;

		 	//获取选中的年份

		 	var syear = document.getElementById("year").value;

		 	//获取选中的月份

		 	var smonth = document.getElementById("month").value;

		 	//判断每个月份的天数

		 	if (smonth==4 || smonth==6 || smonth==9 || smonth==11) {

		 		days = 30;

		 	//

		 	} else if (smonth == 2){

		 		if (syear%4==0 && syear%100!=0 || syear%400 ==0) {

		 			days=29;

		 		} else{

		 			days = 28;

		 		}

		 	}else{

		 		days = 31;

		 	}

		 	//

		 	var str = "";

		 	//用循环向下拉列表添加天数

		 	for (var r = 1; r<days+1; r++) {

		 		//设置当前日期为默认选中

		 		if (r == date) {

		 			str = str + "<option selected = 'selected'>"+r+"</option>"

		 		} else{

		 			str = str + "<option>"+r+"</option>"

		 		}

		 	}

		 	//添加天数

		 	document.getElementById("date").innerHTML = str;

		 }

		 //为年份及月份添加点击事件  用以重置每月天数

		 function Reset () {

		 	fillDate();

		 }

	</script>

</html>

　　效果如下：

JS实现时间选择器的更多相关文章

  1. 移动端lCalendar纯原生js日期时间选择器

    网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...

  2. JS日期时间选择器

    本文介绍一种日期和时间选择器的使用方法.此选择器由jqueryUI实现,支持精确到毫秒的时间选择. 此选择器项目地址为http://trentrichardson.com/examples/timep ...

  3. 微信小程序中利用时间选择器和js无计算实现定时器（将字符串或秒数转换成倒计时）

    转载注明出处 改成了一个单独的js文件,并修改代码增加了通用性,点击这里查看 今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时. 因为小程序的限制,所以直接选用时间选择器作为选择定时 ...

  4. 移动端material风格日期时间选择器

    原文 好多时候在移动端需要一个的日期选择器,由于在应用上有可能应用各种框架库(Vue.js, React.js, zepto.js等):所以说一个无依赖的,这样易于上层进行封装.直接开门见山,先来张动 ...

  5. php时间选择器亲测可以自己修改

    由于前端的离职  造成我需要自己去做后台页面   所以有一个要填写生日的我就用了这个时间选择器 <?php /** * Created by PhpStorm. * User: Administ ...

  6. 一个模拟时钟的时间选择器 ClockPicker

    最近开发的一个模拟时钟的时间选择器 ClockPicker,用于 Bootstrap,或者单独作为一个 jQuery 插件. 源代码托管在 GitHub 上: ClockPicker 最近项目中需要用 ...

  7. 【bootstrap】时间选择器datetimepicker和daterangepicker

    在bootstrap中的时间选择器有两种:dateTimePicker和dateRangePicker 1.dateTimePicker好像是官方嫡插件:   需要的文件: <link rel= ...

  8. iView -- TimePicker 自定义修改时间选择器选择时间面板样式

    iView官方组件展示效果: 期望的最终效果: 为什么要修改期望效果? 项目需要只选择小时,分钟跟秒的不需要,而官方并没有直接相关的小时组件或者是设置显示成小时或分钟或秒的时间选择器,因为自己直接修改 ...

  9. 时间选择器(timepicker)

    可以使用Slider拖动选择,也可以使用timespinner改变时间,或者手工填写. 自动判断位置 效果: 源码: <!DOCTYPE html> <html xmlns=&quo ...

随机推荐

  1. Spring Boot -- 认识Spring Boot

    在前面我们已经学习过Srping MVC框架,我们需要配置web.xml.spring mvc配置文件,tomcat,是不是感觉配置较为繁琐.那我们今天不妨来试试使用Spring Boot,Sprin ...

  2. 013.Oracle数据库，SUBSTR取子字符串

    /*Oracle数据库查询日期在两者之间*/ SELECT EXPIRE_DATE , SUBSTR(EXPIRE_DATE , , ) FROM ME_EO WHERE ( ISSUE_DATE B ...

  3. DFS技巧 折半搜索

    #include<iostream> #include<string> #include<cmath> #include<cstring> #inclu ...

  4. DataFoundation比赛总结

    2018.3.20号左右,因为研究生的数据挖掘课程的老师要求我们集体参加一个比赛 ,所以在比赛参与时间.比赛难度和比赛类型的几种条件下,我们选择了2018平安产险数据建模大赛-驾驶行为预测驾驶风险比赛 ...

  5. 索尼研发的新主机竟兼容现款PSVR！

    索尼PlayStation研发负责人Dominic Mallinson在接受媒体记者采访时表示,现款PSVR头戴式虚拟现实装置可用于下一代PS主机. 新主机兼容现款PSVR 而且,即便新主机上市也不要 ...

  6. 获取指定进程号，并kill掉

    直接上案例: 例子:获取nginx进程 方法:$ps -aux |grep nginx |grep -v grep |awk '{print $2}'  或者 $ps -ef |grep nginx ...

  7. 将visual sdudio+Qt5.12 制作的程序打包成单个exe

    在GitHub上下载了个qt程序,由于C++不太会,经过安装qt.修改编码等一系列操作终于可以运行了. 生成的exe在运行时依赖很多dll或者图片文件,直接拷贝到其他电脑上无法运行,可以将依赖的dll ...

  8. Python函数(三)

    递归函数 在函数内部,可以调用其他函数,如果一个函数的内部调用了自己本身,那么这个函数就是递归函数. 什么?函数还可以自己调用自己?那不是一个死循环吗?请看下例: # 求1-100的和 def sum ...

  9. 一百零四、SAP中ALV事件之十六，让ALV表格能点击修改

    一.上一篇我们写到生产的ALV表格,但是表格内容不支持修改,如果我们需要修改下图的数量,需要怎么操作呢 二.代码如下,设置 ls_fieldcat-edit = 'X'.   "允许编辑. ...

  10. 162-PHP 文本替换函数str_replace（三）

    <?php $str='Hello world!'; //定义源字符串 $search=array('o','l','w'); //定义将被替换的字符数组 $replace='O'; //定义替 ...