一个不错的日历选择框(有两个，一个只有日期，另外一个日期时间都有)

最新推荐文章于 2022-10-10 17:21:31 发布

阅读量3.1k

点赞数

分类专栏： javascript 文章标签：日历 output date function javascript table

本文链接：https://blog.csdn.net/ma/article/details/663060

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一个：

us.js

//
// UncCalendar 1.0          //
// Author: Zhong@UNC        //
// E-mail: zhong@uncnet.com //
// 06/01/2004               //
//

function UncCalendar (sName, sDate)
{
/
//定义UncCalendar对象的属性并赋默认值。
//inputValue属性的值为"today"时表示（客户机）当前日期。
//直接在这里把默认值修改成你想要的，使用时你就什么也不用设置了。
this.inputName = sName || "uncDate";
this.inputValue = sDate || "";
this.inputSize = 10;
this.inputClass = "";
this.color = "#333333";
this.bgColor = "#EEEEEE";
this.buttonWidth = 60;
this.buttonWords = "选择日期";
this.canEdits = true;
this.hidesSelects = true;
/

/
//定义display方法。
this.display = function ()
{
    var reDate = /^(19[7-9]/d|20[0-5]/d)/-(0?/d|1[0-2])/-([0-2]?/d|3[01])$/;
    if (reDate.test(this.inputValue))
    {
      var dates = this.inputValue.split("-");
      var year = parseInt(dates[0], 10);
      var month = parseInt(dates[1], 10);
      var mday = parseInt(dates[2], 10);
    }
    else
    {
      var today = new Date();
      var year = today.getFullYear();
      var month = today.getMonth()+1;
      var mday = today.getDate();
    }
    if (this.inputValue == "today")
      inputValue = year + "-" + month + "-" + mday;
    else
      inputValue = this.inputValue;
    var lastDay = new Date(year, month, 0);
    lastDay = lastDay.getDate();
    var firstDay = new Date(year, month-1, 1);
    firstDay = firstDay.getDay();

    var btnBorder =
      "border-left:1px solid " + this.color + ";" +
      "border-right:1px solid " + this.color + ";" +
      "border-top:1px solid " + this.color + ";" +
      "border-bottom:1px solid " + this.color + ";";
    var btnStyle =
      "padding-top:3px;cursor:default;width:" + this.buttonWidth + "px;text-align:center;height:18px;top:-9px;" +
      "font:normal 12px 宋体;position:absolute;z-index:99;background-color:" + this.bgColor + ";" +
      "line-height:12px;" + btnBorder + "color:" + this.color + ";";
    var boardStyle =
      "position:absolute;width:1px;height:1px;background:" + this.bgColor + ";top:8px;border:1px solid "+
      this.color + ";display:none;padding:3px;";
    var buttonEvent =
      " οnmοuseοver=/"this.childNodes[0].style.borderBottom='0px';" +
          "this.childNodes[1].style.display='';this.style.zIndex=100;" +
          (this.hidesSelects ?
          "var slts=document.getElementsByTagName('SELECT');" +
          "for(var i=0;i<slts.length;i++)slts[i].style.visibility='hidden';"
          : "") + "/"" +
      " οnmοuseοut=/"this.childNodes[0].style.borderBottom='1px solid " + this.color + "';" +
          "this.childNodes[1].style.display='none';this.style.zIndex=99;" +
          (this.hidesSelects ?
          "var slts=document.getElementsByTagName('SELECT');" +
          "for(var i=0;i<slts.length;i++)slts[i].style.visibility='';"
          : "") + "/"" +
      " onselectstart=/"return false;/"";
    var mdayStyle = "font:normal 9px Verdana,Arial,宋体;line-height:12px;cursor:default;color:" + this.color;
    var weekStyle = "font:normal 12px 宋体;line-height:15px;cursor:default;color:" + this.color;
    var arrowStyle = "font:bold 7px Verdana,宋体;cursor:hand;line-height:16px;color:" + this.color;
    var ymStyle = "font:bold 12px 宋体;line-height:16px;cursor:default;color:" + this.color;
    var changeMdays =
      "var year=parseInt(this.parentNode.cells[2].childNodes[0].innerText);" +
      "var month=parseInt(this.parentNode.cells[2].childNodes[2].innerText);" +
      "var firstDay=new Date(year,month-1,1);firstDay=firstDay.getDay();" +
      "var lastDay=new Date(year,month,0);lastDay=lastDay.getDate();" +
      "var tab=this.parentNode.parentNode, day=1;" +
      "for(var row=2;row<8;row++)" +
      " for(var col=0;col<7;col++){" +
      "    if(row==2&&col<firstDay){" +
      "      tab.rows[row].cells[col].innerHTML=' ';" +
      "      tab.rows[row].cells[col].isDay=0;}" +
      "    else if(day<=lastDay){" +
      "      tab.rows[row].cells[col].innerHTML=day;" +
      "      tab.rows[row].cells[col].isDay=1;day++;}" +
      "    else{" +
      "      tab.rows[row].cells[col].innerHTML='';" +
      "      tab.rows[row].cells[col].isDay=0;}" +
      " }";
    var pyEvent =
      " οnclick=/"var y=this.parentNode.cells[2].childNodes[0];y.innerText=parseInt(y.innerText)-1;" +
                  changeMdays + "/"";
    var pmEvent =
      " οnclick=/"var y=this.parentNode.cells[2].childNodes[0];m=this.parentNode.cells[2].childNodes[2];" +
                 "m.innerText=parseInt(m.innerText)-1;if(m.innerText=='0'){m.innerText=12;y.innerText=" +
                 "parseInt(y.innerText)-1;}" + changeMdays + "/"";
    var nmEvent =
      " οnclick=/"var y=this.parentNode.cells[2].childNodes[0];m=this.parentNode.cells[2].childNodes[2];" +
                 "m.innerText=parseInt(m.innerText)+1;if(m.innerText=='13'){m.innerText=1;y.innerText=" +
                 "parseInt(y.innerText)+1;}" + changeMdays + "/"";
    var nyEvent =
      " οnclick=/"var y=this.parentNode.cells[2].childNodes[0];y.innerText=parseInt(y.innerText)+1;" +
                  changeMdays + "/"";
    var mdayEvent =
      " οnmοuseοver=/"if(event.srcElement.tagName=='TD'&&event.srcElement.isDay){" +
          "event.srcElement.style.backgroundColor='" + this.color + "';" +
          "event.srcElement.style.color='" + this.bgColor + "';" +
          "event.srcElement.style.cursor='hand';" +
          "var ym=event.srcElement.parentNode.parentNode.rows[0].cells[2].childNodes;" +
          "event.srcElement.title=ym[0].innerText+'-'+ym[2].innerText+'-'+event.srcElement.innerText;}/"" +
      " οnmοuseοut=/"if(event.srcElement.tagName=='TD'&&event.srcElement.isDay){" +
          "event.srcElement.style.backgroundColor='" + this.bgColor + "';" +
          "event.srcElement.style.color='" + this.color + "';" +
          "event.srcElement.style.cursor='default';" +
          "var ym=event.srcElement.parentNode.parentNode.rows[0].cells[2].childNodes;" +
          "event.srcElement.title=ym[0].innerText+'-'+ym[2].innerText+'-'+event.srcElement.innerText;}/"" +
      " οnclick=/"if(event.srcElement.tagName=='TD'&&event.srcElement.isDay){" +
          "var inp=this.parentNode.parentNode.parentNode.previousSibling.childNodes[0];" +
          "inp.value=this.rows[0].cells[2].childNodes[0].innerText+'-'+this.rows[0].cells[2].childNodes[2]." +
          "innerText+'-'+event.srcElement.innerText;" +
          "this.parentNode.style.display='none';this.parentNode.parentNode.style.zIndex=99;" +
          "this.parentNode.previousSibling.style.borderBottom='1px solid " + this.color + "';" +
          (this.hidesSelects ?
          "var slts=document.getElementsByTagName('SELECT');" +
          "for(var i=0;i<slts.length;i++)slts[i].style.visibility='';"
          : "") + "}/"";

test.html

script src=uc.js></script>
<script language=javascript>
//拿过来就可以用，很简单。
//实例化时第一个参数是input的name；第二个参数是value，设为"today"就是当天。
var date1 = new UncCalendar ("date", "2008-08-08");
date1.display();
</script>
<br><br>
<script language=javascript>
//有一些属性，可以灵活的定制。
//事实上直接到uc.js中修改默认属性值使用起来会更方便一些，里面有注释。
var date2 = new UncCalendar ();
date2.inputName = "date"; //input的name。
date2.inputValue = "today"; //你会看到，input中将显示客户机系统当前时间。
date2.inputSize = 10; //input的size
date2.inputClass = ""; //input的class，这样你就能自己控制input的样式。
date2.color = "#000080"; //选择按钮、面板的边框以及日历中字的颜色。
date2.bgColor = "#EEEEFF"; //选择按钮、面板的背景色。
date2.buttonWidth = 60; //按钮宽度
date2.buttonWords = "选择日期"; //按钮显示的文字。
date2.canEdits = false; //input是否可以输入
date2.hidesSelects = true; //显增日期选择面板时是否隐藏页面中的select控件。
date2.display();
</script>

第二个：

test.html

<html>
<head>
<title>新增任务工单</title>
<script language="javascript" src="table_calendar.js"></script>/head>

</html>

下面是 table_calendar.js

function writeCalender(){
document.writeln('<div id=bltDateLayer style="position: absolute; width: 142; height: 166; z-index: 9998; display: none">');
document.writeln('<iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:142px; height:255px; z-index:-1;filter=/'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)/';"></iframe>');
document.writeln('<span id=tmpSelectYearLayer style="z-index: 9999;position: absolute;top: 2; left: 18;display: none"></span>');
document.writeln('<span id=tmpSelectMonthLayer style="z-index: 9999;position: absolute;top: 2; left: 75;display: none"></span>');
document.writeln('<table border=0 cellspacing=1 cellpadding=0 width=142 height=160 bgcolor=#808080 onselectstart="return false">');
document.writeln(' <tr><td width=142 height=23 bgcolor=#FFFFFF><table border=0 cellspacing=1 cellpadding=0 width=140 height=23>');
document.writeln('      <tr align=center><td width=20 align=center bgcolor=#808080 style="font-size:12px;cursor: hand;color: #FFD700" ');
document.writeln('        οnclick="bltPrevM()" title="向前翻一月" Author=blt><b Author=blt><<</b>');
document.writeln('        </td><td width=100 align=center style="font-size:12px;cursor:default" Author=blt>');
document.writeln('        <span Author=blt id=bltYearHead οnclick="tmpSelectYearInnerHTML(this.innerText)"></span> 年 <span');
document.writeln('         id=bltMonthHead Author=blt οnclick="tmpSelectMonthInnerHTML(this.innerText)"></span> 月</td>');
document.writeln('        <td width=20 bgcolor=#808080 align=center style="font-size:12px;cursor: hand;color: #FFD700" ');
document.writeln('         οnclick="bltNextM()" title="往后翻一月" Author=blt><b Author=blt>>></b></td></tr>');
document.writeln('    </table></td></tr>');
document.writeln(' <tr><td width=142 height=18 bgcolor=#808080>');
document.writeln('<table border=0 cellspacing=0 cellpadding=0 width=140 height=1 style="cursor:default">');
document.writeln('<tr align=center><td style="font-size:12px;color:#FFFFFF" Author=blt>日</td>');
document.writeln('<td style="font-size:12px;color:#FFFFFF" Author=blt>一</td><td style="font-size:12px;color:#FFFFFF" Author=blt>二</td>');
document.writeln('<td style="font-size:12px;color:#FFFFFF" Author=blt>三</td><td style="font-size:12px;color:#FFFFFF" Author=blt>四</td>');
document.writeln('<td style="font-size:12px;color:#FFFFFF" Author=blt>五</td><td style="font-size:12px;color:#FFFFFF" Author=blt>六</td></tr>');
document.writeln('</table></td></tr>');
document.writeln(' <tr><td width=142 height=120>');
document.writeln('    <table border=0 cellspacing=1 cellpadding=0 width=140 height=120 bgcolor=#FFFFFF Author=blt> ');
var n=0; for (j=0;j<6;j++){ document.writeln (' <tr align=center>'); for (i=0;i<7;i++){
document.writeln('<td width=20 height=20 id=bltDay'+n+' style="font-size:12px" Author=blt οnclick=bltDayClick(this.innerText,this)></td>');n++;}
document.writeln('</tr>');}
document.writeln('      <tr align=center>');
document.writeln('        <td align=center colspan=4 Author=blt >');
document.writeln('         <select name="m_hour" Author=blt>');
for( j = 0; j < 24; j++ )
{
if( j < 10 )
  document.writeln('         <option value="0' + j + '">' + j + '</option>');
else
  document.writeln('         <option value="' + j + '">' + j + '</option>');
}
document.writeln('         </select>时</td>');
document.writeln('        <td align=center colspan=4 Author=blt>');
document.writeln('         <select name="m_min" Author=blt>');
for( j = 0; j < 60; j++ )
{
  if( j < 10 )
   document.writeln('         <option value="0' + j + '">' + j + '</option>');
  else
   document.writeln('         <option value="' + j + '">' + j + '</option>');
}
document.writeln('         </select>分');
document.writeln('         </td></tr>');
document.writeln('         <tr>');
document.writeln('        <td colspan=4 align=center Author=blt>');
document.writeln('         <Label οnclick=setDayTime()>确定</Label>');
document.writeln('        </td>');

document.writeln('        <td colspan=4 align=center Author=blt>');
document.writeln('         <Label οnclick=closeLayer()>取消</Label>');
document.writeln('          </td></tr>');
document.writeln('    </table></td></tr><tr><td>');
document.writeln('        <table border=0 cellspacing=1 cellpadding=0 width=100% bgcolor=#FFFFFF>');
document.writeln('          <tr><td Author=blt align=left><Label Author=blt title="向前翻一年" οnclick="bltPrevY()" ');
document.writeln('             οnfοcus="this.blur()">< </Label> <Label Author=blt title="向前翻一月" ');
document.writeln('             οnclick="bltPrevM()" οnfοcus="this.blur()"><<</Label></td><td ');
document.writeln('             Author=blt align=center><Label Author=blt οnclick="bltToday()" ');
document.writeln('             οnfοcus="this.blur()" title="现在的年月">今天</Label></td><td ');
document.writeln('             Author=blt align=right><Label Author=blt οnclick="bltNextM()" ');
document.writeln('             οnfοcus="this.blur()" title="往后翻一月">>></Label> <Label ');
document.writeln('             Author=blt title="往后翻一年" οnclick="bltNextY()"');
document.writeln('             οnfοcus="this.blur()"> ></Label></td>');
document.writeln('</tr></table></td></tr></table></div>');
}

var bltTheYear=new Date().getFullYear(); //定义年的变量的初始值
var bltTheMonth=new Date().getMonth()+1; //定义月的变量的初始值
var bltTheHour=new Date().getHours();    //定义时的变量的初始值 added by tianzhiquan
var bltTheMinute=new Date().getMinutes();//定义分的变量的初始值 added by tianzhiquan
var bltTheDay =new Date().getDate();     //定义日的变量的初始值 added by tianzhiquan
var bltWDay=new Array(37);               //定义写日期的数组
var m_yy, m_mm, m_dd;
function document.onclick() //任意点击时关闭该控件
{
return;
with(window.event.srcElement)
{ if (tagName != "INPUT" && getAttribute("Author")==null)
    document.all.bltDateLayer.style.display="none";
}
}

function closeLayer() //这个层的关闭
{
document.all.bltDateLayer.style.display="none";
}

function document.onkeydown()
{
if (window.event.keyCode==27)document.all.bltDateLayer.style.display="none";
}

function IsPinYear(year) //判断是否闰平年
{
if (0==year%4&&((year%100!=0)||(year%400==0))) return true;else return false;
}

function GetMonthCount(year,month) //闰年二月为29天
{
var c=MonHead[month-1];if((month==2)&&IsPinYear(year)) c++;return c;
}

function GetDOW(day,month,year) //求某天的星期几
{
var dt=new Date(year,month-1,day).getDay()/7; return dt;
}

function setDayTime()
{
var f = window.document.forms[ 0 ];
//注：在这里你可以输出改成你想要的格式
// alert(m_yy+"-"+m_mm+"-"+m_dd);
if( m_yy != null && m_mm != null && m_dd != null )
{

  if( f.m_hour.value == '-' || f.m_min.value == '-' ) //如果没选时间
   outObject.value= m_yy + "-" + m_mm + "-" + m_dd;
  else
  outObject.value= m_yy + "-" + m_mm + "-" + m_dd + " " + f.m_hour.value + ":" + f.m_min.value + ":00";
}
closeLayer();
}
function bltDayClick( n, obj ) //点击显示框选取日期，主输入函数*************
{
var yy = bltTheYear;
var mm = bltTheMonth;
m_yy = yy;
if (mm < 10)
{
    m_mm = "0" + mm;
}
else
{
    m_mm = "" + mm;
}
if (outObject)
{
    if (!n)
    {
    outObject.value="";
    return;
    }
    if ( n < 10 )
  {
   m_dd = "0" + n;
  }
  else
  {
   m_dd = "" + n;
  }
  if( old_dd != null )
   old_dd.style.backgroundColor = "#ADD8E6";
  old_dd = obj;
  obj.style.backgroundColor = "#FFD700";
}
else
{
closeLayer();
alert("输出有误！");
}
}

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一个不错的日历选择框(有两个，一个只有日期，另外一个日期时间都有)

第一个：us.js//////////////////////////////// UncCalendar 1.0 //// Author: Zhong@UNC //// E-mail: zhong@uncnet.com //// 06/01/2004 //////////////////////////////// fu
复制链接

扫一扫