源代码：

<!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. XmlBeanDefinitionReader

  2. JAVA面试题0 JAVA语言的基本知识

    JAVA语言的特点是什么? >面向对象:两个基本概念:类和对象:三大基本特性:封装.继承.多态: >健壮性:java吸收了C/C++的优点,但是去掉了它们影响健壮性的部分,例如指针和内存申 ...

  3. Problem B: Bulbs

    Problem B: Bulbs Greg has an m×n grid of Sweet Lightbulbs of Pure Coolness he would like to turn on. ...

  4. mybatis-plus 乐观锁

    参见:https://mp.baomidou.com/guide/optimistic-locker-plugin.html#%E4%B8%BB%E8%A6%81%E9%80%82%E7%94%A8% ...

  5. ArcoLinux美化教程

    ArcoLinux美化教程 1. 前言 ArcoLinux已经足够美观,这里主要是讲解如何配置桌面特效 2. 安装compiz $ yay -S compiz 3. 用compiz替换xfwm4 编辑 ...

  6. SQL注入汇总（手注，盲注，报错注入，宽字节，二次编码，http头部）{10.22、23 第二十四 二十五天}

    首先什么是SQL注入: 所谓SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令. SQL注入有什么危害? 危害:数据泄露.脱库 ...

  7. 史无前例！一季度Facebook移除22亿假账号

    导读 北京时间5月26日上午消息,Facebook表示平台在第一季度移除了22亿虚假账号.这一创纪录的数据显示了这家公司正在与大量试图破坏全球最大社交网络真实性的负面因素进行斗争. 北京时间5月26日 ...

  8. hdu1222Wolf and Rabbit （公约数的巧题）

    一个很坑的问题,想到点子上很好解决,想不到的话头破也不一定能做出来. There is a hill with n holes around. The holes are signed from 0 ...

  9. Java中的super关键字和this关键字作用介绍

    一.super关键字的作用 1.子类在构造方法中显示调用父类构造方法 super可以在子类的构造方法中显示调用父类的构造方法:并且这行代码必须出现在子类构造方法的第一行.原因:因为父类构造方法没有执行 ...

  10. 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容

    一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...