非常实用的js日期输入特效 兼容firefox ie6

最新推荐文章于 2017-12-23 17:39:00 发布
最新推荐文章于 2017-12-23 17:39:00 发布
阅读量769 收藏
点赞数
分类专栏： javascript 文章标签： firefox ie date javascript function class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengtao1633/article/details/6218132
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title> JS 日历knowsky.com </title>

  <meta name="author" content="网页教学网">

  <meta name="keywords" content="js日历,calender">

  <meta name="description" content="js日历">

  <script type="text/javascript">

function HS_DateAdd(interval,number,date){

number = parseInt(number);

if (typeof(date)=="string"){var date = new Date(date.split("-")[0],date.split("-")[1],date.split("-")[2])}

if (typeof(date)=="object"){var date = date}

switch(interval){

case "y":return new Date(date.getFullYear()+number,date.getMonth(),date.getDate()); break;

case "m":return new Date(date.getFullYear(),date.getMonth()+number,checkDate(date.getFullYear(),date.getMonth()+number,date.getDate())); break;

case "d":return new Date(date.getFullYear(),date.getMonth(),date.getDate()+number); break;

case "w":return new Date(date.getFullYear(),date.getMonth(),7*number+date.getDate()); break;

}

}

function checkDate(year,month,date){

var enddate = ["31","28","31","30","31","30","31","31","30","31","30","31"];

var returnDate = "";

if (year%4==0){enddate[1]="29"}

if (date>enddate[month]){returnDate = enddate[month]}else{returnDate = date}

return returnDate;

}

 

function WeekDay(date){

var theDate;

if (typeof(date)=="string"){theDate = new Date(date.split("-")[0],date.split("-")[1],date.split("-")[2]);}

if (typeof(date)=="object"){theDate = date}

return theDate.getDay();

}

function HS_calender(){

var lis = "";

var style = "";

/*可以把下面的css剪切出去独立一个css文件knowsky.com*/

style +="<style type='text/css'>";

style +=".calender { width:170px; height:auto; font-size:12px; margin-right:14px; background:url(calenderbg.gif) no-repeat right center #fff; border:1px solid #397EAE; padding:1px}";

style +=".calender ul {list-style-type:none; margin:0; padding:0;}";

style +=".calender .day { background-color:#EDF5FF; height:20px;}";

style +=".calender .day li,.calender .date li{ float:left; width:14%; height:20px; line-height:20px; text-align:center}";

style +=".calender li a { text-decoration:none; font-family:Tahoma; font-size:11px; color:#333}";

style +=".calender li a:hover { color:#f30; text-decoration:underline}";

style +=".calender li a.hasArticle {font-weight:bold; color:#f60 !important}";

style +=".lastMonthDate, .nextMonthDate {color:#bbb;font-size:11px}";

style +=".selectThisYear a, .selectThisMonth a{text-decoration:none; margin:0 2px; color:#000; font-weight:bold}";

style +=".calender .LastMonth, .calender .NextMonth{ text-decoration:none; color:#000; font-size:18px; font-weight:bold; line-height:16px;}";

style +=".calender .LastMonth { float:left;}";

style +=".calender .NextMonth { float:right;}";

style +=".calenderBody {clear:both}";

style +=".calenderTitle {text-align:center;height:20px; line-height:20px; clear:both}";

style +=".today { background-color:#ffffaa;border:1px solid #f60; padding:2px}";

style +=".today a { color:#f30; }";

style +=".calenderBottom {clear:both; border-top:1px solid #ddd; padding: 3px 0; text-align:left}";

style +=".calenderBottom a {text-decoration:none; margin:2px !important; font-weight:bold; color:#000}";

style +=".calenderBottom a.closeCalender{float:right}";

style +=".closeCalenderBox {float:right; border:1px solid #000; background:#fff; font-size:9px; width:11px; height:11px; line-height:11px; text-align:center;overflow:hidden; font-weight:normal !important}";

style +="</style>";

 

var now;

if (typeof(arguments[0])=="string"){

selectDate = arguments[0].split("-");

var year = selectDate[0];

var month = parseInt(selectDate[1])-1+"";

var date = selectDate[2];

now = new Date(year,month,date);

}else if (typeof(arguments[0])=="object"){

now = arguments[0];

}

var lastMonthEndDate = HS_DateAdd("d","-1",now.getFullYear()+"-"+now.getMonth()+"-01").getDate();

var lastMonthDate = WeekDay(now.getFullYear()+"-"+now.getMonth()+"-01");

var thisMonthLastDate = HS_DateAdd("d","-1",now.getFullYear()+"-"+(parseInt(now.getMonth())+1).toString()+"-01");

var thisMonthEndDate = thisMonthLastDate.getDate();

var thisMonthEndDay = thisMonthLastDate.getDay();

var todayObj = new Date();

today = todayObj.getFullYear()+"-"+todayObj.getMonth()+"-"+todayObj.getDate();

for (i=0; i<lastMonthDate; i++){  // Last Month's Date

lis = "<li class='lastMonthDate'>"+lastMonthEndDate+"</li>" + lis;

lastMonthEndDate--;

}

for (i=1; i<=thisMonthEndDate; i++){ // Current Month's Date

 

if(today == now.getFullYear()+"-"+now.getMonth()+"-"+i){

var todayString = now.getFullYear()+"-"+(parseInt(now.getMonth())+1).toString()+"-"+i;

lis += "<li><a href=javascript:void(0) class='today' οnclick='_selectThisDay(this)' title='"+now.getFullYear()+"-"+(parseInt(now.getMonth())+1)+"-"+i+"'>"+i+"</a></li>";

}else{

lis += "<li><a href=javascript:void(0) οnclick='_selectThisDay(this)' title='"+now.getFullYear()+"-"+(parseInt(now.getMonth())+1)+"-"+i+"'>"+i+"</a></li>";

}

}

var j=1;

for (i=thisMonthEndDay; i<6; i++){  // Next Month's Date

lis += "<li class='nextMonthDate'>"+j+"</li>";

j++;

}

lis += style;

 

var CalenderTitle = "<a href='javascript:void(0)' class='NextMonth' οnclick=HS_calender(HS_DateAdd('m',1,'"+now.getFullYear()+"-"+now.getMonth()+"-"+now.getDate()+"'),this) title='Next Month'>&raquo;</a>";

CalenderTitle += "<a href='javascript:void(0)' class='LastMonth' οnclick=HS_calender(HS_DateAdd('m',-1,'"+now.getFullYear()+"-"+now.getMonth()+"-"+now.getDate()+"'),this) title='Previous Month'>&laquo;</a>";

CalenderTitle += "<span class='selectThisYear'><a href='javascript:void(0)' οnclick='CalenderselectYear(this)' title='Click here to select other year' >"+now.getFullYear()+"</a></span>年<span class='selectThisMonth'><a href='javascript:void(0)' οnclick='CalenderselectMonth(this)' title='Click here to select other month'>"+(parseInt(now.getMonth())+1).toString()+"</a></span>月"; 

 

if (arguments.length>1){

arguments[1].parentNode.parentNode.getElementsByTagName("ul")[1].innerHTML = lis;

arguments[1].parentNode.innerHTML = CalenderTitle;

 

}else{

var CalenderBox = style+"<div class='calender'><div class='calenderTitle'>"+CalenderTitle+"</div><div class='calenderBody'><ul class='day'><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul><ul class='date' id='thisMonthDate'>"+lis+"</ul></div><div class='calenderBottom'><a href='javascript:void(0)' class='closeCalender' οnclick='closeCalender(this)'>&times;</a><span><span><a href=javascript:void(0) οnclick='_selectThisDay(this)' title='"+todayString+"'>Today</a></span></span></div></div>";

return CalenderBox;

}

}

function _selectThisDay(d){

var boxObj = d.parentNode.parentNode.parentNode.parentNode.parentNode;

boxObj.targetObj.value = d.title;

boxObj.parentNode.removeChild(boxObj);

}

function closeCalender(d){

var boxObj = d.parentNode.parentNode.parentNode;

boxObj.parentNode.removeChild(boxObj);

}

 

function CalenderselectYear(obj){

var opt = "";

var thisYear = obj.innerHTML;

for (i=1970; i<=2020; i++){

if (i==thisYear){

opt += "<option value="+i+" selected>"+i+"</option>";

}else{

opt += "<option value="+i+">"+i+"</option>";

}

}

opt = "<select οnblur='selectThisYear(this)' οnchange='selectThisYear(this)' style='font-size:11px'>"+opt+"</select>";

obj.parentNode.innerHTML = opt;

}

 

function selectThisYear(obj){

HS_calender(obj.value+"-"+obj.parentNode.parentNode.getElementsByTagName("span")[1].getElementsByTagName("a")[0].innerHTML+"-1",obj.parentNode);

}

 

function CalenderselectMonth(obj){

var opt = "";

var thisMonth = obj.innerHTML;

for (i=1; i<=12; i++){

if (i==thisMonth){

opt += "<option value="+i+" selected>"+i+"</option>";

}else{

opt += "<option value="+i+">"+i+"</option>";

}

}

opt = "<select οnblur='selectThisMonth(this)' οnchange='selectThisMonth(this)' style='font-size:11px'>"+opt+"</select>";

obj.parentNode.innerHTML = opt;

}

function selectThisMonth(obj){

HS_calender(obj.parentNode.parentNode.getElementsByTagName("span")[0].getElementsByTagName("a")[0].innerHTML+"-"+obj.value+"-1",obj.parentNode);

}

function HS_setDate(inputObj){

var calenderObj = document.createElement("span");

calenderObj.innerHTML = HS_calender(new Date());

calenderObj.style.position = "absolute";

calenderObj.targetObj = inputObj;

inputObj.parentNode.insertBefore(calenderObj,inputObj.nextSibling);

}

  </script>

 

  <style>

  body {font-size:12px}

  td {text-align:center}

  h1 {font-size:26px;}

  h4 {font-size:16px;}

  em {color:#999; margin:0 10px; font-size:11px; display:block}

  </style>

 </head>

 

 <body>

<h1>Date Picker</h1>

<h4 style="border-bottom:1px solid #ccc">ver:1.0</h4>

<table border=1 width=400 height=150>

<tr>

<td>文本文本文本</td>

<td>点击输入框</td>

<td>文本文本文本</td>

</tr>

<tr>

<td>点击输入框</td>

<td><input type="text" style="width:70px" οnfοcus="HS_setDate(this)">文本</td>

<td>文本文本文本</td>

</tr>

<tr>

<td>文本文本文本</td>

<td>点击输入框</td>

<td>文本<input type="text" style="width:70px" οnfοcus="HS_setDate(this)">文本</td>

</tr>

</table>

 

<ul>

<li>不需要其他框架类库</li>

<li>支持ie6、firefox、opera</li>

<li>点击年份与月份可以下拉选择</li>

</ul>

 </body>

</html>

冰封的心
关注
专栏目录
一个很酷的拖动层的js类，兼容IE及Firefox
12-08
在给定的标题和描述中提到的"一个很酷的拖动层的js类，兼容IE及Firefox"，指的是一个经过优化的JavaScript拖动功能实现，该实现具有兼容性，不仅能在现代浏览器如Firefox上运行，还支持老旧的Internet Explorer（IE...
（兼容ff/ie）td点击背景变色特效
10-30
本文将详细介绍一个兼容Firefox（FF）和Internet Explorer（IE）浏览器的HTML表格单元格（`<td>`）点击背景变色特效的实现方法。该特效允许用户通过点击表格中的单元格来改变其背景颜色，并且具有良好的跨浏览器兼容...
caladar日期输入
yizhenfengdx的专栏
10-30 792
 JS日期选择器function HS_DateAdd(interval,number,date){ number = parseInt(number); if (typeof(date)=="string"){var date = new Date(date.split("-")[0],date.split("-")[1],date.split("-")[2])} if (typeof(date
兼容IE和firefox的日期控件
wanghuailong的专栏
06-23 3085
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">日历控件/**********************************************************    使用方法*        控件调用onclick="fPopCalendar(event,this,this)"*    如下，给控件设置为readon
js日期选择
danson_yang的专栏
05-29 765
Js日期选择器并自动加入到输入框中 var gMonths=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"); var WeekDay=new Array("日","一","二","三","四","五","六"); var strToday="今天"; var strYear="年";
js日期选择控件
weixin_30393907的博客
09-16 90
<script type="text/javascript" src="../js/datepicker.js"></script> 开始 <input runat="server" type="text" id="txtStartDate" size="14" /> <img alt="" onclick="return ...
js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器 原创
11-29
很多网站实现了利用JS保存页面中文本框内容到本地，并另存为指定文件扩展名与编码类型的功能，特别是一些代码教程，JS特效站上更是长见。如何利用JS实现这种功能的呢，下面给出了具体的实现代码 首先建立HTML文件，...
兼容IE与火狐的js图片无缝滚动代码.zip
最新发布
09-26
标题中的“兼容IE与火狐的js图片无缝滚动代码”是指一种JavaScript编程技术，用于创建在不同浏览器（尤其是Internet Explorer和Firefox）上都能正常工作的图片滚动效果。这种效果通常是通过让图片在用户看不到的地方...
jQuery焦点图效果，兼容火狐、IE6及以上
09-15
在本教程中，我们将深入探讨如何使用jQuery实现兼容火狐、IE6及以上浏览器的焦点图效果。 首先，我们需要引入jQuery库。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。你...
Js日期时间选择器
08-06
一个js日期和时间选择器，支持精确到毫秒的时间选择 http://blog.csdn.net/yanwushu/article/details/38401749 效果预览 http://www.helloweba.com/demo/timepicker/
javascript实现的日期选择器
04-04
javascript实现的日期选择器，开发者必备!
js 日期选择器
03-28
NULL 博文链接：https://913.iteye.com/blog/1260595
JS日期选择器（适用于文本框输入日期）
03-04
一个适用的JS（javascript）实现的文本框日期选择器。
[导入]JS代码--选择日期
07-03 181
<scriptlanguage=javascript>varDS_x,DS_y;functiondateSelector()//构造dateSelector对象，用来实现一个日历形式的日期输入框。{varmyDate=newDate();this.year=myDate.getFullYear();//定义year属性，年份，默认值为当前系统年份...
JS日期选择器
weixin_30325971的博客
12-23 542
浏览器自带 浏览器自带日期控件,使用<input type="date">时,点击后会弹出. 1:EDGE 2:火狐 3:谷歌 三种都不一样.略胜于无 练习 模仿火狐日期控件的外观实现一个日期插件.效果 PC 手机 使用控件 // 日期 <input onclick="MyDatePick()" /> // 日期加时间 <i...
JavaScript 日期选择器
SharkMarine的专栏
10-31 701
效果图如下：
js 日期选择
weixin_34306593的博客
04-04 150
这个也是自己搜集的东西，也给大家分享了。 代码有点多，我只把js粘出来，其他的在附件中下载后打开selecttime.html就可以看到效果了 js代码如下： varfixedX = -1 // x position (-1 if to appear below control)varfixedY = -1 // y position (...
js选择日期
西米的BLOG
01-24 771
#calendar {...}{ width:140px; border:solid 1px #b8f0e7; height:100px; position:absolute; display:none;} #calendar table {...}{ margin:0px; background-color: #b8f0e7; font-size:12px;} #calendar input
Firefox与IE滤镜对比：揭示新版特性与差异
在本文中，我们将深入探讨"滤镜问题-Firefox火狐浏览器与IE的对比分析"这一主题，主要关注Firefox（火狐）浏览器与IE（Internet Explorer）在处理CSS滤镜（filter）方面的差异。滤镜是网页设计中的一个重要特性，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值