js日期控件demo
最近在钻研前端，写了个日期控件，内涵代码注释，希望能帮助到大家~
1.html代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/dateJs.js"></script>
<!--<script src="js/rili.js"></script>-->
<style type="text/css">
* {
margin: ;
padding: ;
} body {
font-size: 13px;
} .calendar {
width: 330px;
} .calendar .title {
position: relative;
width: %;
height: 30px;
line-height: 30px;
background: #17a4eb;
} .title div {
position: absolute;
} .prev {
left: 10px;
} .now {
left: %;
} .next {
right: 10px;
} input {
height: 30px;
width: 326px;
} table {
width: %;
border-collapse: collapse;
} table th {
border: 1px solid #ccc;
} table td {
text-align: center;
border: 1px solid #ccc;
} .red {
background-color: #a1cbdb;
} .blue {
background-color: #e4e3e3;
}
</style>
</head>
<body>
<input type="text" id="Dateinput" />
<div class="calendar" id="calender" style="display: none;">
</div>
</body>
</html>
2.js代码
window.onload = function () {
//获取日期 输入框
var oInput = document.getElementById('Dateinput');
//获取日历
var oCalender = document.getElementById('calender');
//获取当前日期
var oDate = new Date();
//获取当年 年
var year = oDate.getFullYear();
//获取当前 月
var month = oDate.getMonth() + ;
//日历框不能重复创建
var flag = false;
//日期输入框 获取焦点时 加载日历
oInput.onfocus = function () {
showDate(year, month);
}
//显示日历
function showDate(year, month) {
if (false == flag) {
//1.日历标题
var oTitle = document.createElement('div');
oTitle.className = 'title';
//1.1日历标题文本
var prevM = ;
var nextM = ;
prevM = month - ;
nextM = month + ;
//当月份为1时 上一个月为12
if (month == ) {
prevM = ;
}//当月份为12时 下一个月为1
else if (month == ) {
nextM = ;
}
var titleHtml = "";
titleHtml += '<div class="prev" id="prev"><span>';
titleHtml += prevM + '</span>月</div>';
titleHtml += '<div class="now">';
titleHtml += '<span class="span">';
titleHtml += year;
titleHtml += '</span>年';
titleHtml += '<span class="span">' + month;
titleHtml += '</span>月</div>';
titleHtml += '<div class="next" id="next"><span>';
titleHtml += nextM + '</span>月</div>';
oTitle.innerHTML = titleHtml;
//将日历标题 拼接到日历
oCalender.appendChild(oTitle);
//1.2获取日历 表头元素（以便添加事件）
var oSpans = oCalender.getElementsByTagName('span');
var prevMonth = oSpans[];
var nextMonth = oSpans[];
var nowMonth = oSpans[];
var nowYear = oSpans[];
//2.创建星期 表头
var otable = document.createElement('table');
var othead = document.createElement('thead');
var otr = document.createElement('tr');
//2.1表头内容填充
var arr = ['日', '一', '二', '三', '四', '五', '六'];
for (var i = ; i < arr.length; i++) {
//创建th
var oth = document.createElement('th');
oth.innerHTML = arr[i];
otr.appendChild(oth);
}
//2.2将表头加入到日历
othead.appendChild(otr);
otable.appendChild(othead);
oCalender.appendChild(otable);
//3.添加 当前日历 全部日期
//3.1.先获得当期月 有多少天
var dayNum = ;
if (month == || month == || month == || month == || month == || month == || month == ) {
dayNum = ;
} else if (month == || month == || month == || month == ) {
dayNum = ;
} else if (month == && isLeapYear(year)) {
dayNum = ;
} else {
dayNum = ;
}
//3.2.创建 6行7列 日期容器
var otbody = document.createElement('tbody');
for (var i = ; i < ; i++) {
var otr = document.createElement('tr');
for (var j = ; j < ; j++) {
var otd = document.createElement('td');
otr.appendChild(otd);
}
otbody.appendChild(otr);
}
otable.appendChild(otbody);
//3.3获得 1号对应的是星期几
//3.3.1.将当月1号赋值给日期变量
oDate.setFullYear(year);
//注意 js日期的月份是从0 开始计算
oDate.setMonth(month - );
oDate.setDate();
//3.3.2.计算1号在第一行日期容器中的位置，依次给日期容器填充内容
//注意 js中 getDay方法是获取当前日期是星期几
var week = oDate.getDay();
var otds = oCalender.getElementsByTagName('td');
for (var i = ; i < dayNum; i++) {
otds[i + week].innerHTML = i + ;
}
//让当前日期显示红色、后面的显示蓝色
showColor(otds);
//给左右月份绑定点击事件
monthEvent();
//判断最后一行是否全为空
lastTr(otds);
flag = true;
document.getElementById('calender').style.display = "block";
}
}
//判断是否是闰年
function isLeapYear(year) {
if (year % == && year % == ) {
return true;
} else if (year % != && year % == ) {
return true;
} else {
return false;
}
}
//判断日期容器最后一行是否有值
function lastTr(otds) {
var flag = true;
for (var i = ; i < ; i++) {
if (otds[i].innerHTML != '') {
flag = false;
}
}
//全是空的
if (flag) {
for (var i = ; i < ; i++) {
otds[i].style.display = 'none';
}
}
}
//当前日期显示红色、前面的显示灰色
function showColor(otds) {
//当前日期
var nowday = new Date().getDate();
var nowyear = new Date().getFullYear();
var nowmonth = new Date().getMonth();
var oCalendar = document.getElementById("calender");
ospans = oCalendar.getElementsByTagName('span');
var contralYear = ospans[].innerHTML;
var contralMonth = ospans[].innerHTML;
var oindex = ;
for (var i = ; i < otds.length; i++) {
if (nowday == otds[i].innerHTML && nowyear == contralYear && nowmonth + == contralMonth) {
otds[i].className = 'red';
oindex = i;
}
}
}
//给左右月份绑定点击事件
function monthEvent() {
var oCalendar = document.getElementById("calender");
var prevDiv = document.getElementById("prev");
var nextDiv = document.getElementById("next");
var prevMonth = prevDiv.getElementsByTagName("span");
var nextMonth = nextDiv.getElementsByTagName("span");
prevDiv.onclick = function () {
flag = false;
oCalendar.innerHTML = '';
showDate(year, parseInt(prevMonth[].innerHTML));
}
nextDiv.onclick = function () {
flag = false;
oCalendar.innerHTML = '';
showDate(year, parseInt(nextMonth[].innerHTML));
}
}
}
js日期控件demo的更多相关文章
- 利用js日期控件重构WEB功能
开发需求:网页中的日期部门(注册页面和查询条件)都用js日期控件重写 页面一:更新员工页面 empUpdate.jsp 中增加 onfocus 事件 入职日期:<input id="h ...
- JSP JS 日期控件的下载、使用及注意事项
网上流行的时间日期控件比较多,个人觉得My97DatePicker的日期控件不错,值得推荐. 具体的使用过程如下: 1.下载My97DatePicker.rar或 My97DatePickerBeta ...
- js 日期控件 可以显示为和历
日期控件的js <!-- /** * Calendar * @param beginYear 1990 * @param endYear 2010 * @param language 0(zh_ ...
- js日期控件遇到的问题
一.问题: 在web项目里有很多时候需要使用日期控件来完成相关的功能,但是日期控件的日期格式又和我们的需求不符 那么,就需要我们来自定义日期的格式完成需求 二.解决: 1.取月末: (1)强制取值: ...
- js日期控件
My97日期控件 官方网站 My97 Datepicker Home http://www.my97.net/
- layDate1.0正式公布，您一直在寻找的的js日期控件
你是时候换一款日期控件了,而layDate很愿意和您成为工作伙伴.她正致力于成为全球最高大上的web日期支撑,为国内外全部从事web应用开发的同仁提供力所能及的动力.她基于原生JavaScript精心 ...
- 推荐几款开源的js日期控件
做为一个正规的网站,经常需要一些日期或时间的筛选,所以我们今天就推荐二十多款javascript的js日期/时间筛选插件.个个经典,绝对有你需要的. My97DatePicker ,国人开发的一款js ...
- js 日期控件laydate使用
官网 http://sentsin.com/layui/laydate/ 1. 下载官网上的压缩包,解压后只需要复制laydate 文件夹到你的项目中; 2. 在页面引入 <script t ...
- WebFrom 的js日期控件
1.WdatePicker.js /* * My97 DatePicker 4.7 Release * License: http://www.my97.net/dp/license.asp */ v ...
随机推荐
- Vijos P1521 跳舞 贪心
本来想找一道网络流的题来着,结果这道题越看越不对劲,总觉得这题存在不用网络流的解法 看了题解区以后坚定了自己的猜想 #include <cstdio> #include <cstri ...
- 你应该了解的5个JavaScript调试技巧
在某些情况下需要更好的工具,下面是其中的一些佼佼者,我敢肯定你会发现它们的有用之处: 1. debugger; 正如我之前提到的,你可以使用“debugger;”语句在代码中加入强制断点. 需要断点条 ...
- ThinkPHP接入支付宝支付功能
最近做系统,需要实现在线支付功能,毫不犹豫,选择的是支付宝的接口支付功能.这里我用的是即时到帐的接口,具体实现的步骤如下: 一.下载支付宝接口包 下载地址:https://b.alipay.com/o ...
- Form表单三种提交按钮的区别？
1.<input type='button' id='btn' onclick='check()' value="提交"> 说明:只是普通的按钮(不附带提交功能),不会 ...
- php函数——『解析 xml数据』
<?php //该文件是 //$raw_post_data = file_get_contents('php://input'); //file_put_contents('a.txt', $r ...
- Ubuntu使用Xming和Putty
运行个复杂的,比如 gnome-session,这个是 GNOME 的启动命令,如果想打开 KDE 就是 startkde root@carlo-cloud:~# xlogoThe program ' ...
- bzoj1038: [ZJOI2008]瞭望塔
Description 致力于建设全国示范和谐小村庄的H村村长dadzhi,决定在村中建立一个瞭望塔,以此加强村中的治安.我们将H村抽象为一维的轮廓.如下图所示 我们可以用一条山的上方轮廓折线(x1, ...
- iOS利用响应链机制点击tableview空白处关闭键盘-可以作为参考
http://www.jianshu.com/p/9717b792599c 是原文地址 处理关闭键盘的做法一般分为两种:1.放弃第一响应者身份:2.当前视图结束编辑.通常情况下只要我们在合适的时机 ...
- Unity3D Quaternion各属性和函数测试
Quaternion属性与方法 一,属性: x.y.z就不说了,只看一个eulerAngles,代码如下: public Quaternion rotation = Quaternion.identi ...
- 【技术贴】第二篇 ：解决使用maven jetty启动后无法加载修改过后的静态资源
之前写过第一篇:[技术贴]解决使用maven jetty启动后无法加载修改过后的静态资源 一直用着挺舒服的,直到今天,出现了又不能修改静态js,jsp等资源的现象.很是苦闷. 经过调错处理之后,发现是 ...