带时间的日期选择web控件.docx
- 文档编号:24334131
- 上传时间:2023-05-26
- 格式:DOCX
- 页数:21
- 大小:36.28KB
带时间的日期选择web控件.docx
《带时间的日期选择web控件.docx》由会员分享,可在线阅读,更多相关《带时间的日期选择web控件.docx(21页珍藏版)》请在冰豆网上搜索。
带时间的日期选择web控件
1,web控件的样子
2,日期时间选择的使用
1.
2.
34:
23" style="padding-left:
5px;" id="txtDate" onclick="SetDate(this,'yyyy-MM-dd hh:
mm:
ss')" readonly="readonly" />
3.
5px;" id="txtDate" onclick="SetDate(this,'yyyy-MM-dd hh:
mm')" readonly="readonly" />
4.
5px;" id="txtDate" onclick="SetDate(this)" readonly="readonly" />
5.
5px;" id="txtDate" onclick="SetDate(document.all.txtDate2,'yyyy-MM-dd')" readonly="readonly" />
3,calendar.js的文件
--
var cal;
var isFocus=false; //是否为焦点
function SetDate(obj,strFormat)
{
var date = new Date();
var by = date.getFullYear()-10; //最小值 → 10 年前
var ey = date.getFullYear()+10; //最大值 → 10 年后
//初始化为中文版,1为英文版
cal = (cal==null) ?
new Calendar(by, ey, 0,strFormat) :
(cal.dateFormatStyle == strFormat ?
cal :
new Calendar(by, ey, 0,strFormat));
cal.show(obj);
}
/**//* 返回日期 */
String.prototype.toDate = function(style){
var y = this.substring(style.indexOf('y'),style.lastIndexOf('y')+1);//年
var m = this.substring(style.indexOf('M'),style.lastIndexOf('M')+1);//月
var d = this.substring(style.indexOf('d'),style.lastIndexOf('d')+1);//日
var h = this.substring(style.indexOf('h'),style.lastIndexOf('h')+1);//时
var i = this.substring(style.indexOf('m'),style.lastIndexOf('m')+1);//分
var s = this.substring(style.indexOf('s'),style.lastIndexOf('s')+1);//秒
if(isNaN(y)) y = new Date().getFullYear();
if(isNaN(m)) m = new Date().getMonth();
if(isNaN(d)) d = new Date().getDate();
if(isNaN(h)) h = new Date().getHours();
if(isNaN(i)) i = new Date().getMinutes();
if(isNaN(s)) s = new Date().getSeconds();
var dt ;
eval ("dt = new Date('"+ y+"', '"+(m-1)+"','"+ d +"','"+ h +"','"+ i+"','"+ s +"')");
return dt;
}
/**//* 格式化日期 */
Date.prototype.format = function(style){
var o = {
"M+" :
this.getMonth() + 1, //month
"d+" :
this.getDate(), //day
"h+" :
this.getHours(), //hour
"m+" :
this.getMinutes(), //minute
"s+" :
this.getSeconds(), //second
"w+" :
"天一二三四五六".charAt(this.getDay()), //week
"q+" :
Math.floor((this.getMonth() + 3) / 3), //quarter
"S" :
this.getMilliseconds() //millisecond
}
if(/(y+)/.test(style)){
style = style.replace(RegExp.$1,
(this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for(var k in o){
if(new RegExp("("+ k +")").test(style)){
style = style.replace(RegExp.$1,
RegExp.$1.length == 1 ?
o[k] :
("00" + o[k]).substr(("" + o[k]).length));
}
}
return style;
};
/**//*
* 日历类
* @param beginYear 1990
* @param endYear 2010
* @param lang 0(中文)|1(英语) 可自由扩充
* @param dateFormatStyle "yyyy-MM-dd";
*/
function Calendar(beginYear, endYear, lang, dateFormatStyle){
this.beginYear = 1990;
this.endYear = 2010;
this.lang = 0; //0(中文) | 1(英文)
this.dateFormatStyle = "yyyy-MM-dd";
if (beginYear !
= null && endYear !
= null){
this.beginYear = beginYear;
this.endYear = endYear;
}
if (lang !
= null){
this.lang = lang
}
if (dateFormatStyle !
= null){
this.dateFormatStyle = dateFormatStyle
}
this.dateControl = null;
this.panel = this.getElementById("calendarPanel");
this.container = this.getElementById("ContainerPanel");
this.form = null;
this.date = new Date();
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
this.colors = {
"cur_word" :
"#FFFFFF", //当日日期文字颜色
"cur_bg" :
"#83A6F4", //当日日期单元格背影色
"sel_bg" :
"#FFCCCC", //已被选择的日期单元格背影色
"sun_word" :
"#FF0000", //星期天文字颜色
"sat_word" :
"#0000FF", //星期六文字颜色
"td_word_light" :
"#333333", //单元格文字颜色
"td_word_dark" :
"#CCCCCC", //单元格文字暗色
"td_bg_out" :
"#EFEFEF", //单元格背影色
"td_bg_over" :
"#FFCC00", //单元格背影色
"tr_word" :
"#FFFFFF", //日历头文字颜色
"tr_bg" :
"#666666", //日历头背影色
"input_border" :
"#CCCCCC", //input控件的边框颜色
"input_bg" :
"#EFEFEF" //input控件的背影色
}
this.draw();
this.bindYear();
this.bindMonth();
this.changeSelect();
this.bindData();
}
/**//*
* 日历类属性(语言包,可自由扩展)
*/
Calendar.language ={
"year" :
[[""], [""]],
"months" :
[["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"]
],
"weeks" :
[["日","一","二","三","四","五","六"],
["SUN","MON","TUR","WED","THU","FRI","SAT"]
],
"abort" :
[["时间"], ["TIME"]],
"clear" :
[["清空"], ["CLS"]],
"today" :
[["今天"], ["TODAY"]],
"close" :
[["关闭"], ["CLOSE"]]
}
Calendar.prototype.draw = function(){
calendar = this;
var mvAry = [];
mvAry[mvAry.length] = '
0px;">';
mvAry[mvAry.length] = '
1px solid ' + calendar.colors["input_border"] + ';background-color: ' + calendar.colors["input_bg"] + ';width: 16px;height: 20px;" name="prevMonth" type="button" id="prevMonth" value="<" /> | ';'; | 1px solid ' + calendar.colors["input_border"] + ';background-color: ' + calendar.colors["input_bg"] + ';width: 16px;height: 20px;" name="nextMonth" type="button" id="nextMonth" value=">" /> | ';
---|
mvAry[mvAry.length] = '
normal;background-color: ' + calendar.colors["tr_bg"] + ';color: ' + calendar.colors["tr_word"] + ';">' + Calendar.language["weeks"][this.lang][i] + ' | ';||
---|---|---|
default;color: ' + calendar.colors["sun_word"] + ';"> | ';default;color: ' + calendar.colors["sat_word"] + ';"> | ';default;"> | ';
default;">' + Calendar.language["abort"][this.lang] + ' | ';'; mvAry[mvAry.length] = ': '; mvAry[mvAry.length] = ': '; mvAry[mvAry.length] = ' | |
1px solid ' + calendar.colors["input_border"] + ';background-color: ' + calendar.colors["input_bg"] + ';width: 100%;height: 20px;font-size: 12px;"/> | ';1px solid ' + calendar.colors["input_border"] + ';background-color: ' + calendar.colors["input_bg"] + ';width: 100%;height: 20px;font-size: 12px;"/> | ';1px solid ' + calendar.colors["input_border"] + ';background-color: ' + calendar.colors["input_bg"] + ';width: 100%;height: 20px;font-size: 12px;"/> | ';
mvAry[mvAry.length] = '
this.panel.innerHTML = mvAry.join("");
var obj = this.getElementById("prevMonth");
obj.onclick = function (){calendar.goPrevMonth(calendar);}
obj.onblur = function (){calendar.onblur();}
this.prevMonth= obj;
obj = this.getElementById("nextMonth");
obj.onclick = function (){calendar.goNextMonth(calendar);}
obj.onblur = function (){calendar.onblur();}
this.nextMonth= obj;
obj = this.getElementById("calendarClear");
obj.onclick = function (){calendar.dateControl.value = "";calendar.hide();}
this.calendarClear = obj;
obj = this.getElementById("calendarClose");
obj.onclick = function (){calendar.hide();}
this.calendarClose = obj;
obj = this.getElementById("calendarYear");
obj.onchange = function (){calendar.update(calendar);}
obj.onblur = function (){calendar.onblur();}
this.calendarYear = obj;
obj = this.getElementById("calendarMonth");
with(obj)
{
onchange = function (){calendar.update(calendar);}
onblur = function (){calendar.onblur();}
}this.calendarMonth = obj;
obj = this.getElementById("calendarHour");
with(obj)
{
length = 0;
for (var i = 0; i < 24; i++
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 时间 日期 选择 web 控件