源代码：

<!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. 【pwnable.tw】 alive_note

    突然发现已经两个月没写过WP了,愧疚- -... 此题也算一道分数很高的题目,主要考察Shellcode的编写. 又是一道题目逻辑很简单的题. 首先提供了三个函数 查看,删除,添加 查看函数: 此函数 ...

  2. CRC校验算法详解

    CRC(Cyclic Redundancy Check)循环冗余校验是常用的数据校验方法,讲CRC算法的文章很多,之所以还要写这篇,是想换一个方法介绍CRC算法,希望能让大家更容易理解CRC算法. 先 ...

  3. java虚拟机05(Java虚拟机的参数)

    原文在此 (1)-Xms20M 表示设置堆容量的最小值为20M,必须以M为单位 (2)-Xmx20M 表示设置堆容量的最大值为20M,必须以M为单位.将-Xmx和-Xms设置为一样可以避免堆自动扩展. ...

  4. 怎样设置使IntelliJ IDEA智能提示忽略大小写?

    打开设置(CTRL+ALT+S)打开editor,找到“Code Completion”->点击Match case前面的框不勾选即可.如下图:

  5. Day7 - D - The Euler function HDU - 2824

    The Euler function phi is an important kind of function in number theory, (n) represents the amount ...

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

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

  7. 006.Oracle数据库 , DISTINCT去掉重复项重复内容

    /*Oracle数据库查询日期在两者之间*/ SELECT DISTINCT OCCUR_DATE FROM LM_FAULT WHERE ( ( OCCUR_DATE >= to_date( ...

  8. mysql 视图入门

  9. 响应式布局rem的使用

    在如今移动端,响应式布局的时代,用rem作为单位已经是非常普及的一门小技巧了..rem的单位根据html的font-size来进行换算! 1.rem的兼容性: 如下图所示IE9以上就支持了rem这个属 ...

  10. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：响应式实用工具

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...