Html时间自定义控件

最新推荐文章于 2024-07-24 14:22:29 发布

GB9125

最新推荐文章于 2024-07-24 14:22:29 发布

阅读量1.9k

点赞数 1

分类专栏： Web前端开发文章标签：日期插件时间 Jquery插件 html

本文链接：https://blog.csdn.net/u012317523/article/details/79868211

版权

Web前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

自定义HTML时间控件

控件中已实现的功能

1、根据给定的年和月布局时间控件

2、往时间控件中添加小圆点标识(单个添加和批量添加--单个传当月日期，多个传日期数组)

3、对控件中前、后月份日期的点击事件（灰色日期），当前月份日期点击事件

4、日期控件css样式部分自由修改

源代码下载链接：下载时间控件源码文件

效果截图：

调用代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
	/**=====时间控件默认样式===start===*/
    .datePicker caption{text-align:center;background:#CCC;}
	.datePicker caption label{display:inline-block;width:60%;line-height:2.2;}
	.datePicker caption .left,.datePicker caption .right{display:inline-block;width:12px;height:14px;background:#FF0000;background:url("images/layout_arrows.png");}
	.datePicker caption .left{background-position:0 0;}
	.datePicker caption .right{background-position:0px 16px;}
	.datePicker tr:first-child{line-height:40px;}
	.datePicker tr td{width:2.0em;height:2.0em;text-align:center;}
	.datePicker tr td label{width:30px;line-height:30px;font-size:14px;}
	.datePicker tr td .today{border-radius:50%;background:#5452CF;}
	.datePicker tr td.beforeMonth,	.datePicker tr td.afterMonth{color:#CCC;}
	.group{text-align:center;}
	.group label{display:block;}
	.group i{display:inline-block;}
	.group i{width:8px;height:8px;border-radius:50%;}
	.dot{background:#FF0000;}
	/**=====时间控件默认样式===end===*/


	button{margin-top:15px;}
  </style>
  <script src="js/jquery.min.js"></script>
  <script src="js/dotDatePicker.js"></script>
  <script>
	$(function(){
		//初始化时间控件当前月份2018-4
		 $(".date").datePicker(2018,4,{
			currentMonthClick:function(e){
				//当前月日期点击事件
				alert($(this).data("year")+"-"+$(this).data("month")+"-"+$(this).data("day"));
			}/**,
			beforeMonthClick:function(e){
				//前一个月日期点击事件,不传此参数点击时默认将日历调整到前一个月
			},
			afterMonthClick:function(e){
				//后一个月日期点击事件,不传此参数点击时默认将日历调整到后一个月
			}**/
		 });
	});
	//添加一个标识日期
	function change(){
		$(".date").dotCurrentDay($("#selectday").val());
	}
	//添加多个标识日期
	function addDots(){
		var days = [1,5,18,27];
		$(".date").dotCurrentDays(days);
	}
	//获取当前时间控件得年月
	function getMonth(){
		var currentDate = $(".date").getCurrentDate();
		alert(currentDate.year+"年"+currentDate.month+"月");
	}
  </script>
 </head>
 <body>
 标识日：<input type="text" id="selectday"><button οnclick="change()">添加一个标识</button><br/>
 <button οnclick="addDots()">添加多个标识</button><br/>
 <button οnclick="getMonth()">获取当前年月</button><br/>
  <div class="date"></div>
 </body>
</html>

GB9125

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Html时间自定义控件

自定义HTML时间控件控件中已实现的功能 1、根据给定的年和月布局时间控件 2、往时间控件中添加小圆点标识(单个添加和批量添加--单个传当月日期，多个传日期数组) 3、对控件中前、后月份日期的点击事件（灰色日期），当前月份日期点击事件 4、日期控件css样式部分自由修改源代码下载链接：下载时间控件源码文件效果截图：调用代码&lt;!doctype html&gt;&lt;...
复制链接

扫一扫

专栏目录