自定义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>

Html时间自定义控件相关推荐

android 斜边_android自定义控件之中间是斜线的占比条
最近一直在看各路大神的自定义控件,自己受益非浅,可是一直也没有自己动手写一个,这几天有一个项目中要求有如下图这样一个功能: 两个动态值,根据其占比,在这个横柱上显示出来,中间的隔线要有一定的斜角. 在 ...
qml 时间控件_Qt编写自定义控件54-时钟仪表盘
一.前言这个控件没有太多的应用场景,主要就是练手,论美观的话比不上之前发过的一个图片时钟控件,所以此控件也是作为一个基础的绘制demo出现在Qt源码中,我们可以在Qt的安装目录下找到一个时钟控件的绘 ...
老猪带你玩转自定义控件三——sai大神带我实现ios 8 时间滚轮控件
ios 8 的时间滚轮控件实现了扁平化,带来很好用户体验,android没有现成控件,小弟不才,数学与算法知识不过关,顾十分苦恼,幸好在github上找到sai大神实现代码,甚为欣喜,顾把学习这个控件 ...
android 环形时间显示_Android自定义波浪加载圆形进度条——（自定义控件一）...
自定义控件-- 波浪形状圆形进度加载时间管理的基础是精力管理,精力的高低.正负分影响到我们的效率而时间是无法管理的,能够管理的只有自己,透过管理自己的习惯,管理自己的事件来达成对时间的管理. 而在 ...
Android自定义控件动态显示时间年月日时分秒
这个要求用的不多,但是也有写项目上面不想看手机时间,要求你直接把时间日期给动态显示在界面上这里就记录一个自定义控件吧 public class UpdateTimeTextView extends ...
QML 自定义控件时间滚筒控件
QML 仿手机时间滚筒控件效果:共3中模式 "Date" | "Time" | "DateTime" main.qml MouseAre ...
【iOS】自定义控件入门:可拖动的环形进度
有时候UIKit的标准控件并不能满足我们的需求,因此我们可以通过自定义控件得到满足我们需求的控件,例如这篇文章将教你如何自定义一个圆形的进度条,并且用户可以通过拖动进度条上的手柄来改变进度值.主要参考 ...
C#自定义控件四简易时钟
C#自定义控件四简易时钟效果图: 简易时钟,顾名思义,简单容易,简单到什么程度呢?界面只有数字和指针,甚至连与当前时间都不能匹配!呵呵!就这么简单,学习嘛,从简单开始. 毫无疑问,这里肯定要用到Ti ...
ASP.NET自定义控件组件开发第四章组合控件开发CompositeControl
第四章组合控件开发CompositeControl 大家好,今天我们来实现一个自定义的控件,之前我们已经知道了,要开发自定义的控件一般继承三个基类:Control,WebControl,还有一个就 ...
cocos creator 获取当前时间_前端开发者入门 Creator 必读吧
写在前面因为公司的业务需求,近期学习了Cocos Creator这款游戏引擎的开发,也基于此上线了一款游戏,因此写这系列文章记录一下我从入门到项目发布的学习过程. 相对于 web 开发,像Cocos ...

Html时间自定义控件

自定义HTML时间控件

控件中已实现的功能

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

效果截图：

调用代码

Html时间自定义控件相关推荐

最新文章

热门文章