源代码：

<!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. 微信小程序循环中点击一个元素，其他的元素不发生变化，类似点击一个循环中的语音，其他的不发生点击事件

    类似语音,因为都在一个数据内,所以点击第一个,所有的语音都变化,解决方法就是 把整个数据都获取下来,然后更改其中一个需要更改的值,然后再把整个数据都setdata回去,如果需要动画的话,wxml里面放 ...

  2. tools.windows.bat#批处理

    关于%~ %~I - 删除任何引号("),扩展 %I %~fI - 将 %I 扩展到一个完全合格的路径名 %~dI - 仅将 %I 扩展到一个驱动器号 %~pI - 仅将 %I 扩展到一个路 ...

  3. SpringBoot---条件（th:if）

    Thymeleaf 的条件判断是 通过 th:if 来做的,只有为真的时候,才会显示当前元素 <p th:if="${testBoolean}" >如果testBool ...

  4. 模拟一次sql注入攻击

    在你的web服务目录下 创建一个php文件如下 <?php $conn = db_connect(); $sql = sprintf('update users set password = & ...

  5. 区块链技术核心概念与原理讲解-Tiny熊

    转载自简书ceido:https://www.jianshu.com/u/fcdf49ef65bb (1)区块链前世今生 密码朋克(Cypherpunk):是一个邮件组,里面有许多大牛. 区块链不是单 ...

  6. GAN网络进行图片增强

    GAN网络进行图片增强 基于Tensorflow框架 调用ModifyPictureSize.py文件 代码如下: from skimage import io,transform,color imp ...

  7. IDEA maven 项目报警告解决（自己的maven配置记录）

    IDEA maven 项目报警告解决 应该是JDK版本太低 虽然你装的高但是默认使用maven 默认的 这里要配一下JDK版本 理解不深入只为 自己记录使用 1 配置 仓库为阿里云   配置本地储存j ...

  8. 小程序填坑：2018最新getPhoneNumber功能详解

    本篇博客主要详解getPhoneNumber组件的功能,填补网上那些到处是漏洞的博客.加上小程序官方本身也是满满的漏洞. 惯例先上总纲: ##主要内容 1.前端页面组件书写 2.JS内组件用法 3.接 ...

  9. Oracle-SQL 建表

    建立员工分类表: 员工分类表结构.内容分别如下图:   一.使用PL/SQL Dev 这类可视化工具直接创建表 1.建立表结构 新建-table-名称(egrade)    然后 列:创建表结构 2. ...

  10. CNN经典模型VGG

    VGG是一个很经典的CNN模型,接触深度学习的人大概都有所耳闻.VGG在2014年被提出并拿来参加ImageNet挑战赛,最终实现了92.3%的正确率,得到了当年的亚军.虽然多年过去,又有很多新模型被 ...