JS日期和时间选择控件

现在的位置: 首页 > 综合 > 正文

JS日期和时间选择控件

2013年08月22日 ⁄ 综合 ⁄ 共 6906字 ⁄ 字号小中大 ⁄ 评论关闭

http://www.cnblogs.com/wf5360308/articles/362935.html

为什么javascript不能外部引用,<script src=*.js/>这样日历控件会显示不出来.??

鉴于网上找到的几个日期选择程序有些问题，遂着手重写一个程序，大部分还是借鉴前人的代码，添加了时间选择功能，隐藏会遮挡控件的标签select，object。
开始本想使用window.createPopup()来弹出日历的选择，这样就可以跨过任何标签。
不过做到中途发现用createPopup窗口实现理论上是行不通的：
一是因为不在窗体里单击任何地方都会关闭窗口，而当用下拉框选择年份时，很有可能会单击到窗体外的地方，当然这个可以自己写select来避免，但是比较麻烦；
二是窗体的宽度和高度只能在弹出时设置，而显然，在选择不同年月时，控件高度是要发生改变的。
鉴于上面的原因，还是决定采用普通的处理方法。

Calendar.js:

/**//**

*本日历选择控件由tiannet根据前人经验完善而得。大部分代码来自meizz的日历控件。

*tiannet添加了时间选择功能、select,object标签隐藏功能，还有其它小功能。

*使用方法：

* (1)只选择日期 <input type="text" name="date" readOnly onClick="setDay(this);">

* (2)选择日期和小时 <input type="text" name="dateh" readOnly onClick="setDayH(this);">

* (3)选择日期和小时及分钟 <input type="text" name="datehm" readOnly onClick="setDayHM(this);">

*设置参数的方法

* (1)设置日期分隔符 setDateSplit(strSplit);默认为"-"

* (2)设置日期与时间之间的分隔符 setDateTimeSplit(strSplit);默认为" "

* (3)设置时间分隔符 setTimeSplit(strSplit);默认为":"

* (4)设置(1),(2),(3)中的分隔符 setSplit(strDateSplit,strDateTimeSplit,strTimeSplit);

* (5)设置开始和结束年份 setYearPeriod(intDateBeg,intDateEnd)

*说明：

* 默认返回的日期时间格式如同：2005-02-02 08:08

//------------------ 样式定义 ---------------------------//

//功能按钮同样样式

var s_tiannet_turn_base = "height:16px;font-size:9pt;color:white;border:0 solid #CCCCCC;cursor:hand;background-color:#2650A6;";

//翻年、月等的按钮

var s_tiannet_turn = "width:28px;" + s_tiannet_turn_base;

//关闭、清空等按钮样式

var s_tiannet_turn2 = "width:22px;" + s_tiannet_turn_base;

//年选择下拉框

var s_tiannet_select = "width:64px;display:none;";

//月、时、分选择下拉框

var s_tiannet_select2 = "width:46px;display:none;";

//日期选择控件体的样式

var s_tiannet_body = "width:150;background-color:#2650A6;display:none;z-index:9998;position:absolute;" +

"border-left:1 solid #CCCCCC;border-top:1 solid #CCCCCC;border-right:1 solid #999999;border-bottom:1 solid #999999;";

//显示日的td的样式

var s_tiannet_day = "width:21px;height:20px;background-color:#D8F0FC;font-size:10pt;";

//字体样式

var s_tiannet_font = "color:#FFCC00;font-size:9pt;cursor:hand;";

//链接的样式

var s_tiannet_link = "text-decoration:none;font-size:9pt;color:#2650A6;";

//横线

var s_tiannet_line = "border-bottom:1 solid #6699CC";

//------------------ 变量定义 ---------------------------//

var tiannetYearSt = 1950;//可选择的开始年份

var tiannetYearEnd = 2010;//可选择的结束年份

var tiannetDateNow = new Date();

var tiannetYear = tiannetDateNow.getFullYear(); //定义年的变量的初始值

var tiannetMonth = tiannetDateNow.getMonth()+1; //定义月的变量的初始值

var tiannetDay = tiannetDateNow.getDate();

var tiannetHour = 8;//tiannetDateNow.getHours();

var tiannetMinute = 0;//tiannetDateNow.getMinutes();

var tiannetArrDay=new Array(42); //定义写日期的数组

var tiannetDateSplit = "-"; //日期的分隔符号

var tiannetDateTimeSplit = " "; //日期与时间之间的分隔符

var tiannetTimeSplit = ":"; //时间的分隔符号

var tiannetOutObject; //接收日期时间的对象

var arrTiannetHide = new Array();//被强制隐藏的标签

var m_bolShowHour = false;//是否显示小时

var m_bolShowMinute = false;//是否显示分钟

var m_aMonHead = new Array(12); //定义阳历中每个月的最大天数

m_aMonHead[0] = 31; m_aMonHead[1] = 28; m_aMonHead[2] = 31; m_aMonHead[3] = 30; m_aMonHead[4] = 31; m_aMonHead[5] = 30;

m_aMonHead[6] = 31; m_aMonHead[7] = 31; m_aMonHead[8] = 30; m_aMonHead[9] = 31; m_aMonHead[10] = 30; m_aMonHead[11] = 31;

// ---------------------- 用户可调用的函数 -----------------------------//

//用户主调函数－只选择日期

function setDay(obj)

{

tiannetOutObject = obj;

//如果标签中有值，则将日期初始化为当前值

var strValue = tiannetTrim(tiannetOutObject.value);

if( strValue != "" )

{

tiannetInitDate(strValue);

}

tiannetPopCalendar();

}

//用户主调函数－选择日期和小时

function setDayH(obj)

{

tiannetOutObject = obj;

m_bolShowHour = true;

//如果标签中有值，则将日期和小时初始化为当前值

var strValue = tiannetTrim(tiannetOutObject.value);

if( strValue != "" )

{

tiannetInitDate(strValue.substring(0,10));

var hour = strValue.substring(11,13);

if( hour < 10 ) tiannetHour = hour.substring(1,2);

}

tiannetPopCalendar();

}

//用户主调函数－选择日期和小时及分钟

function setDayHM(obj)

{

tiannetOutObject = obj;

m_bolShowHour = true;

m_bolShowMinute = true;

//如果标签中有值，则将日期和小时及分钟初始化为当前值

var strValue = tiannetTrim(tiannetOutObject.value);

if( strValue != "" )

{

tiannetInitDate(strValue.substring(0,10));

var time = strValue.substring(11,16);

var arr = time.split(tiannetTimeSplit);

tiannetHour = arr[0];

tiannetMinute = arr[1];

if( tiannetHour < 10 ) tiannetHour = tiannetHour.substring(1,2);

if( tiannetMinute < 10 ) tiannetMinute = tiannetMinute.substring(1,2);

}

tiannetPopCalendar();

}

//设置开始日期和结束日期

function setYearPeriod(intDateBeg,intDateEnd)

{

tiannetYearSt = intDateBeg;

tiannetYearEnd = intDateEnd;

}

//设置日期分隔符。默认为"-"

function setDateSplit(strDateSplit)

{

tiannetDateSplit = strDateSplit;

}

//设置日期与时间之间的分隔符。默认为" "

function setDateTimeSplit(strDateTimeSplit)

{

tiannetDateTimeSplit = strDateTimeSplit;

}

//设置时间分隔符。默认为":"

function setTimeSplit(strTimeSplit)

{

tiannetTimeSplit = strTimeSplit;

}

//设置分隔符

function setSplit(strDateSplit,strDateTimeSplit,strTimeSplit)

{

tiannetDateSplit(strDateSplit);

tiannetDateTimeSplit(strDateTimeSplit);

tiannetTimeSplit(strTimeSplit);

}

//设置默认的日期。格式为：YYYY-MM-DD

function setDefaultDate(strDate)

{

tiannetYear = strDate.substring(0,4);

tiannetMonth = strDate.substring(5,7);

tiannetDay = strDate.substring(8,10);

}

//设置默认的时间。格式为：HH24:MI

function setDefaultTime(strTime)

{

tiannetHour = strTime.substring(0,2);

tiannetMinute = strTime.substring(3,5);

}

// ---------------------- end 用户可调用的函数 -----------------------------//

//------------------ begin 页面显示部分 ---------------------------//

var weekName = new Array("日","一","二","三","四","五","六");

document.write('<div id="divTiannetDate" style="'+s_tiannet_body+'" style="本日历选择控件由tiannet根据前人经验完善而成！">');

document.write('<div align="center" id="divTiannetDateText" Author="tiannet" style="padding-top:2px;">');

document.write('<span id="tiannetYearHead" Author="tiannet" style="'+s_tiannet_font+'" '+

'onclick="spanYearCEvent();"> 年</span>');

document.write('<select id="selTianYear" style="'+s_tiannet_select+'" Author="tiannet" '+

' onChange="tiannetYear=this.value;tiannetSetDay(tiannetYear,tiannetMonth);document.all.tiannetYearHead.style.display=\'\';'+

'this.style.display=\'none\';">');

for(var i=tiannetYearSt;i <= tiannetYearEnd;i ++)

{

document.writeln('<option value="' + i + '">' + i + '年</option>');

}

document.write('</select>');

document.write('<span id="tiannetMonthHead" Author="tiannet" style="'+s_tiannet_font+'" '+

'onclick="spanMonthCEvent();">  月</span>');

document.write('<select id="selTianMonth" style="'+s_tiannet_select2+'" Author="tiannet" '+

'onChange="tiannetMonth=this.value;tiannetSetDay(tiannetYear,tiannetMonth);document.all.tiannetMonthHead.style.display=\'\';'+

'this.style.display=\'none\';">');

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

{

document.writeln('<option value="' + i + '">' + i + '月</option>');

}

document.write('</select>');

//document.write('</div>');

//document.write('<div align="center" id="divTiannetTimeText" Author="tiannet">');

document.write('<span id="tiannetHourHead" Author="tiannet" style="'+s_tiannet_font+'display:none;" '+

'onclick="spanHourCEvent();">&n

【上篇】研究并用JAVA操作DOMINO的mtcstore.nsf数据库
【下篇】Android学习笔记(4)————Android四大组件之四（Broadcast Receiver）（续）

作者: liberate

该日志由 liberate 于11年前发表在综合分类下，最后更新于 2013年08月22日.
转载请注明: JS日期和时间选择控件 | 学步园 +复制链接

抱歉!评论已关闭.

返回首页

（其他合作也可洽谈）

必威体育

必威电竞

学步园