源代码：

<!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. JS动态判断设备类型为PC或者移动端，然后根据设备加载相应的代码

    这里是通过JS判断设备之后加载相应的网站,如果是移动端加载m开头的网站域名,如果是PC端就加载 www.开头的正式域名 <script> (function () { var url = ...

  2. maven杂碎汇总

        本来是想写一篇关于maven知识点的详细总结的,但需要看一本书或教材,然后再汇总一下,这样做自然是好的,这个在年前争取做完.本文是主要记录在工作和学习遇到关于maven的一些困惑.很乐意看到它 ...

  3. 020、MySQL创建一个存储过程，显示存储过程，调用存储过程，删除存储过程

    一.我们创建一个MySQL储存过程,在SQL代码区写入以下内容,并执行就可以了 #编写一个存储过程 CREATE PROCEDURE ShowDate ( ) BEGIN #输出当前时间 SELECT ...

  4. 1 初识JVM

  5. mysql concat与concat_ws区别

    select concat('大','小') as size from 表 查询出结果为:大小 select concat('大',NULL) as size from 表 查询出结果为:null c ...

  6. leeetcode1171 Remove Zero Sum Consecutive Nodes from Linked List

    """ Given the head of a linked list, we repeatedly delete consecutive sequences of no ...

  7. jquery实现常用UI布局

    tab html <div class="tab"> <ul class="tab-title"> <li class=" ...

  8. Java基础（接口，list和ArrayLIst）

    1,使用接口的目的:不是10类都有getName()方法,则10个类都继承一个接口来实现.接口本身是一种规范,在具体业务有需求的时候才用接口. 具体例子: I充电设备 x = new 手机(" ...

  9. ES6 之 Proxy

    概述 Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改. Proxy 可以理解在目标对象架设一个“拦截”层外界对该对象的访问都必须先通过这层拦截,因此提供了一种机制可以对外界的访问进行 ...

  10. mysql 带换行符的字符串数据插入数据库异常

    带换行符的字符串数据插入数据库异常现象 某个字符串类型的字段中部分记录中带换行符,数据同步插入异常,提示如下类似警告信息: Incorrect string value:'<aherf=&quo ...