js日期控件

最新推荐文章于 2017-10-15 17:10:13 发布
最新推荐文章于 2017-10-15 17:10:13 发布
阅读量1.1k 收藏
点赞数
分类专栏： 技术文章 文章标签： date function object table javascript border
本文介绍了一个使用JavaScript实现的日历插件代码细节，该插件可以方便地选择日期范围，适用于网页应用中需要用户输入日期场景。文章深入剖析了其核心函数与页面交互逻辑，并提供了完整的代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

js代码

 

<SCRIPT LANGUAGE="JavaScript">
<!--
//有效的时间范围 
var date_start,date_end,g_object
var today = new Date();
var separator="-";
var inover=false;
//mode :时间变换的类型0-年 1-月 2-直接选择月
function change_date(temp,mode)
{
 var t_month,t_year
    if (mode){
        if(mode==1)
        t_month=parseInt(cele_date_month.value,10)+parseInt(temp,10);
        else
        t_month=parseInt(temp)
        if (t_month<cele_date_month.options(0).text) {
            cele_date_month.value=cele_date_month.options(cele_date_month.length-1).text;
            change_date(parseInt(cele_date_year.value,10)-1,0);
            }
        else{
            if (t_month>cele_date_month.options(cele_date_month.length-1).text){
                cele_date_month.value=cele_date_month.options(0).text;
                change_date(parseInt(cele_date_year.value,10)+1,0);
                }            
            else
                {cele_date_month.value=t_month;
                 set_cele_date(cele_date_year.value,cele_date_month.value);                
                }
        }
    }  
    else{
        t_year=parseInt(temp,10);
        
        if (t_year<cele_date_year.options(0).text) {
            cele_date_year.value=cele_date_year.options(0).text;
            set_cele_date(cele_date_year.value,1);                
            }
        else{
            if (parseInt(t_year,10)>parseInt(cele_date_year.options(cele_date_year.length-1).text,10)){
                cele_date_year.value=cele_date_year.options(cele_date_year.length-1).text;
                set_cele_date(cele_date_year.value,12);                
                }            
            else
                {cele_date_year.value=t_year;
                 set_cele_date(cele_date_year.value,cele_date_month.value);                
                }
        }
    }
    /*2002-02-01 MODIFY BY John */
    window.cele_date.focus();
    /*MODIFY END*/
}

 

//初始化日历
function init(d_start,d_end)
{
     var temp_str;
     var i=0
     var j=0
     date_start=new Date(2000,7,1)
     date_end=new Date(2004,8,1)
     
     //必须要有内容（奇怪）
     /*2002-02-01 MODIFY BY John */
     document.writeln("<div name="cele_date" id="cele_date"  style="display:none"    style="LEFT: 69px; POSITION: absolute; TOP: 159px;Z-INDEX:99" onClick="event.cancelBubble=true;" onBlur="hilayer()" onMouseout="lostlayerfocus()">? </div>");
     /*MODIFY END*/
     window.cele_date.innerHTML="";
     temp_str="<table border="2" bgcolor="#D66939" bordercolor="#000000"><tr align="center"><td colspan=7 bordercolor="#D66939" onmouseover="overcolor(this)">";
     temp_str+="<input type="Button" value="<<" onclick="change_date(-1,1)" onmouseover="getlayerfocus()" style="color: #FFFFFF; background-color: #A52810; font-family:宋体;font-size:10px;text-align:center;border:2 solid #A52810; cursor: hand">";//左面的箭头，#ffffff是<<显示的颜色，#A52810是背景按钮的颜色

 

     /*2002-02-01 MODIFY BY John */
     /*temp_str+="<input type="Button" value="<<" onclick="change_date(-1,1)" >?";//左面的箭头                                */
     /**/
     
     temp_str+=""//年 
     temp_str+="<select name="cele_date_year" id="cele_date_year" language="javascript" onchange="change_date(this.value,0)" onmouseover="getlayerfocus()" onblur="getlayerfocus()" style="font-size: 9pt; border: 0px #ffffff outset; background-color: #F4F8FB">"//#F4F8FB设置年下拉选择框的颜色为白色

 

     /*2002-02-01 MODIFY BY John */
     /*temp_str+="<select name="cele_date_year" id="cele_date_year" language="javascript" onchange="change_date(this.value,0)">" */
     /**/

 

     for (i=2001;i<=2009;i++)
     {
     temp_str+="<OPTION value=""+i.toString()+"">"+i.toString()+"</OPTION>";
     }
     temp_str+="</select>";
     temp_str+=""//月
     temp_str+="<select name="cele_date_month" id="cele_date_month" language="javascript" onchange="change_date(this.value,2)" onmouseover="getlayerfocus()" onblur="getlayerfocus()" style="font-size: 9pt; border: 0px #666666 outset; background-color: #F4F8FB">"//#F4F8FB设置月下拉选择框的颜色为白色

 

     /*2002-02-01 MODIFY BY WING **/
     /*temp_str+="<select name="cele_date_month" id="cele_date_month" language="javascript" onchange="change_date(this.value,2)">" */
     /**/

 

     for (i=1;i<=12;i++)
     {
     temp_str+="<OPTION value=""+i.toString()+"">"+i.toString()+"</OPTION>";
     }
     temp_str+="</select>";
     temp_str+=""//右箭头
     temp_str+="<input type="Button" value=">>" onclick="change_date(1,1)" onmouseover="getlayerfocus()"  style="color: #FFFFFF; background-color: #A52810; font-family:宋体;font-size:10px;text-align:center;border:2 solid #A52810; cursor: hand">";//#FFFFFF设置月右移双箭头的颜色为白色，#A52810设置月右移双箭头的背景色

 

     /*2002-02-01 MODIFY BY WING ***/
     /*temp_str+="<input type="Button" value=">>" onclick="change_date(1,1)">";                                                    */
     /**/


     //151行 #000000设置最初显示的日期数字的颜色
     temp_str+="</td></tr><tr bordercolor="#D66939"><td onmouseover="overcolor(this)">"
     temp_str+="<font color=white>Su</font></td><td>";
  temp_str+="<font color=white>Mo</td><td>"; temp_str+="<font color=white>Tu</td><td>"; temp_str+="<font color=white>We</td><td>"
     temp_str+="<font color=white>Th</td><td>";temp_str+="<font color=white>Fr</td><td>"; temp_str+="<font color=white>Sa</td></tr>";
     for (i=1 ;i<=6 ;i++)
     {
     temp_str+="<tr bordercolor="#A52810">";
        for(j=1;j<=7;j++){
            temp_str+="<td name="c"+i+"_"+j+""id="c"+i+"_"+j+"" style="CURSOR: hand" style="COLOR:#ffffff" language="javascript" onmouseover="overcolor(this)" onmouseout="outcolor(this)" onclick="td_click(this)">?</td>"
            }
     temp_str+="</tr>"        
     }
     temp_str+="</td></tr></table>";
     window.cele_date.innerHTML=temp_str;
}
function set_cele_date(year,month)
{
   var i,j,p,k
   var nd=new Date(year,month-1,1);
   event.cancelBubble=true;
   cele_date_year.value=year;
   cele_date_month.value=month;   
   k=nd.getDay()-1
   var temp;
   for (i=1;i<=6;i++)
      for(j=1;j<=7;j++)
      {
      eval("c"+i+"_"+j+".innerHTML=""");
      eval("c"+i+"_"+j+".bgColor="#9C2810"");//#9C2810设置数字的背景色
      eval("c"+i+"_"+j+".style.cursor="hand"");
      }
   while(month-1==nd.getMonth())
    { j=(nd.getDay() +1);
      p=parseInt((nd.getDate()+k) / 7)+1;
      eval("c"+p+"_"+j+".innerHTML="+"""+nd.getDate()+""");
      if ((nd.getDate()==today.getDate())&&(cele_date_month.value==today.getMonth()+1)&&(cele_date_year.value==today.getYear())){
        eval("c"+p+"_"+j+".bgColor="#6B0000"");//#6B0000设置当前日期的颜色
      }
      if (nd>date_end || nd<date_start)
      {
      eval("c"+p+"_"+j+".bgColor="#FF9999"");
      eval("c"+p+"_"+j+".style.cursor="text"");
      }
      nd=new Date(nd.valueOf() + 86400000)
    }
}

 

//s_object：点击的对象；d_start-d_end有效的时间区段；需要存放值的控件；
function show_cele_date(eP,d_start,d_end,t_object)
{
window.cele_date.style.display="";
window.cele_date.style.zIndex=99
var s,cur_d
var eT = eP.offsetTop;  
var eH = eP.offsetHeight+eT;  
var dH = window.cele_date.style.pixelHeight;  
var sT = document.body.scrollTop; 
var sL = document.body.scrollLeft; 
event.cancelBubble=true;
window.cele_date.style.posLeft = event.clientX-event.offsetX+sL-5;  
window.cele_date.style.posTop = event.clientY-event.offsetY+eH+sT-5;
if (window.cele_date.style.posLeft+window.cele_date.clientWidth>document.body.clientWidth) window.cele_date.style.posLeft+=eP.offsetWidth-window.cele_date.clientWidth;
//if (window.cele_date.style.posTop+window.cele_date.clientHeight>document.body.clientHeight) window.cele_date.style.posTop-=(eP.offsetHeight+window.cele_date.clientHeight+5);
if (d_start!=""){
    if (d_start=="today"){
        date_start=new Date(today.getYear(),today.getMonth(),today.getDate());
    }else{
        s=d_start.split(separator);
        date_start=new Date(s[0],s[1]-1,s[2]);
    }
}else{
    date_start=new Date(1900,1,1);
}

 

if (d_end!=""){
    s=d_end.split(separator);
    date_end=new Date(s[0],s[1]-1,s[2]);
}else{
    date_end=new Date(3000,1,1);
}

 

g_object=t_object

 

cur_d=new Date()
set_cele_date(cur_d.getYear(),cur_d.getMonth()+1);
window.cele_date.style.display="block";
/***************2002-02-01 MODIFY BY WING ***********/
window.cele_date.focus();
/*MODIFY END*/
}
function td_click(t_object)
{
var t_d
if (parseInt(t_object.innerHTML,10)>=1 && parseInt(t_object.innerHTML,10)<=31 ) 
{ t_d=new Date(cele_date_year.value,cele_date_month.value-1,t_object.innerHTML)
if (t_d<=date_end && t_d>=date_start)
{
var year = cele_date_year.value;
var month = cele_date_month.value;
var day = t_object.innerHTML;
if (parseInt(month)<10) month = "0" + month;
if (parseInt(day)<10) day = "0" + day;

 

g_object.value=year+separator+month+separator+day;
window.cele_date.style.display="none";};
}

 

}
function h_cele_date()
{
window.cele_date.style.display="none";
}

 

function overcolor(obj)
{
  if (obj.style.cursor=="hand") obj.style.color = "#FFFFFF";//#FFFFFF设置鼠标经过日期数字时的颜色
  /*********** 2002-02-01 MODIFY BY WING *****/
  inover=true;
  window.cele_date.focus();
  /* MODIFY END */
}

 

function outcolor(obj)
{
  obj.style.color = "#dddddd";//000000设置鼠标离开日期数字后的颜色
  /*********** 2002-02-01 MODIFY BY WING *****/
  inover=false;
  /*MODIFY END */
}

function getNow(o){
    var Stamp=new Date();
    var year = Stamp.getYear();
    var month = Stamp.getMonth()+1;
    var day = Stamp.getDate();
    if(month<10){
 month="0"+month;
    }
    if(day<10){
 day="0"+day;
    }
    o.value=year+separator+month+separator+day;
}
/*********** 2002-02-01 MODIFY BY WING **ADD THREE FUNCTION TO CONTROL THE DIV FOCUS***/
function hilayer()
{
 if (inover==false)
 {
  var lay=document.all.cele_date;
  lay.style.display="none";
 }
}
function getlayerfocus()
{
 inover=true;
}
function lostlayerfocus()
{
 inover=false;
}
/****MODIFY END**/
//-->
</SCRIPT><script language="javascript">
         init();
</script>

 页面代码：

 

<table cellspacing="3" cellpadding="5" align="center" bgcolor="#ff731f" border="0">
    <tbody>
        <tr>
            <td bgcolor="#eeeeee" colspan="6">
            <table cellspacing="3" cellpadding="5" width="100%" align="center" bgcolor="#ff731f" border="0">
                <tbody>
                    <tr>
                        <td height="10">&nbsp;</td>
                    </tr>
                    <tr>
                        <td align="center">
                        <h2><font color="#ffffff">Welcome to AdTracking Report Application Management!</font></h2>
                        </td>
                    </tr>
                </tbody>
            </table>
            <table cellspacing="0" cellpadding="0" width="100%" align="center" bgcolor="#ffffff" border="0">
                <form id="inputdate" action="AdReport" method="post" name="inputdate">
                    <tbody>
                        <tr bgcolor="#ffffff">
                            <td class="clearance" align="center" width="6%">From: </td>
                            <td width="27%"><input readonly="readonly" maxlength="11" size="15" name="statr_Update_Date" /> <input onclick="show_cele_date(change2,'','',statr_Update_Date)" type="button" name="change22" value="select date" /></td>
                            <td class="clearance" align="center" width="4%">To: </td>
                            <td width="25%"><input readonly="readonly" maxlength="11" size="15" name="Last_Update_Date" /> <input onclick="show_cele_date(change2,'','',Last_Update_Date)" type="button" name="change2" value="select date" /></td>
                        </tr>
                    </tbody>
                </form>
            </table>
            </td>
        </tr>
    </tbody>
</table>

 

样式表：

 

<style type="text/css">


<!--
body,td,th {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #666666;
}
body {
 background-color: #333333;
 margin-left: 0px;
 margin-top: 20px;
 margin-right: 0px;
 margin-bottom: 0px;
}
--></style>
JS 日期控件
04-12
轻量级 简单的 日期插件 轻量级 简单的 日期插件 轻量级 简单的 日期插件
超好用的JS日期控件 有示例链接
04-29
"超好用的JS日期控件"是专为前端开发者设计的一个高效且兼容性良好的工具，允许用户在网页上方便地选择日期。这款控件支持多种主流浏览器，包括Internet Explorer 6.0及更高版本、Firefox 2.0及更高版本、Chrome、...
JS日期控件
superstar162的专栏
11-24 1413
找了好久就发现这个还可以，忘了在哪找的了，我先把js源码放这了。------------------------------------------------------------------------------------------------------------------------------------// JScript 文件//  主调用函数是 setday(t
时间控件的JS代码和调用
never_A_VIP的专栏
01-10 320
这是一个关于时间空间的JS代码，分享出来供大家参考： &lt;script type="text/javascript"&gt; document.write("&lt;div align='center' id=meizzCalendarLayer style='BORDER-RIGHT: #000000 1px solid; PADDING-RIGHT: 5px; BORDER-TOP:...
超级简单好用的JS日期控件
XIZI1312的博客
08-07 302
在做订单查询的时候，用到了时间条件，看看.net自带的时间控件，感觉很麻烦，不小心看到了帝国的这个JS时间控件，感觉很方便，当鼠标放在输入框内的时候，触发JS，在当前位置新建一个层。 效果如图所示： 用的时候先在<head></head>插入 <SCRIPTsrc="Images/setday.js"></SCRIPT> ...
js实现日期控件
热门推荐
玉案轩窗的博客
10-15 1万+
前言最近花了点时间写了个日期控件，首先说说写日期控件的初衷，有两点： 第一点是没有写过对于日期的生成不甚了解 工作中使用框架的日期控件，但是想要自己实现下该日期控件主要是学习使用，功能不多，支持输出天以及日期范围的选择。 实现思路日期控件实现了单日期以及日期范围的功能，单日期实现效果如下图： 日期范围实现效果图如下： 下面主要说说主要的实现思路，首先说说面板日期的生成，日期面板如下图： 日期面
js.rar_javascript_js_js 日期控件_日期控件
09-24
JavaScript日期控件是用于处理和展示日期选择的一种功能，常见于表单输入或者日历插件中，极大地提高了用户的使用体验。 在JavaScript中，内置的Date对象是处理日期和时间的基础。通过创建Date对象，我们可以获取...
一个简单横向javascript日期控件
10-30
### 一个简单横向JavaScript日期控件的关键知识点 #### 1. 横向布局与页面适应性 在传统的日期选择器设计中，日期通常被排列成一个正方形网格，每个月的日期分布在4到5行之间。然而，在这个案例中，日期被设计成...
js日期控件 2
翔的窝窝
11-22 628
function set_cele_date(year,month)...{   var i,j,p,k   var nd=new Date(year,month-1,1);   event.cancelBubble=true;   cele_date_year.value=year;   cele_date_month.value=month;      k=nd.getDay()-1   va
js date日期控件
08-20
js日期控件，可使用在jsp，html等页面
js（javascript） 日期控件
10-30
js脚本写的日期控件，js脚本写的日期控件，js脚本写的日期控件
js日期控件js日期控件js日期控件
07-15
js日期控件js日期控件js日期控件js日期控件
js实现的日期控件
07-10
用javaScript实现的一个日历，在一个文本框中你点击后会弹出一个日历给你选择日期，选择后日期显示在文本框中
js 日期控件
yantingrao的专栏
05-02 294
DatePicker .date-picker-wp { display: none; position: absolute; background: #f1f1f1; left: 40px; top: 40px; border-top: 4px solid #3879d9; } .date-picker-wp table { border: 1px solid #dd
JS日期控件使用体验分享
根据给定文件信息，本篇内容将深入解析“JS日期控件”的相关知识点，以及如何在项目中高效使用该控件。 ### JS日期控件 #### 什么是JS日期控件 JS日期控件是一种在Web页面中用于日期选择的交互式控件。它允许用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值