带时间的日期选择web控件

1,web控件的样子

2,日期时间选择的使用

1.

2.

="readonly" />

3.

="SetDate(this,'yyyy-MM-dd hh:mm')" readonly="readonly" />

4.

="SetDate(this)" readonly="readonly" />

5.

ick="SetDate(document.all.txtDate2,'yyyy-MM-dd')" readonly="readonly" /> 3,calendar.js的文件

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 == str Format ? cal : new Calendar(by, ey, 0,strFormat));

cal.show(obj);

}

/**//* 返回日期 */

String.prototype.toDate = function(style){

var y = this.substring(style.indexOf('y'),https://www.wendangku.net/doc/f513905508.html,stIndexOf('y')+1);//年

var m = this.substring(style.indexOf('M'),https://www.wendangku.net/doc/f513905508.html,stIndexOf('M')+1);//月

var d = this.substring(style.indexOf('d'),https://www.wendangku.net/doc/f513905508.html,stIndexOf('d')+1);//日

var h = this.substring(style.indexOf('h'),https://www.wendangku.net/doc/f513905508.html,stIndexOf('h')+1);//时

var i = this.substring(style.indexOf('m'),https://www.wendangku.net/doc/f513905508.html,stIndexOf('m')+1);//分

var s = this.substring(style.indexOf('s'),https://www.wendangku.net/doc/f513905508.html,stIndexOf('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;

https://www.wendangku.net/doc/f513905508.html,ng = 0; //0(中文) | 1(英文)

this.dateFormatStyle = "yyyy-MM-dd";

if (beginYear != null && endYear != null){

this.beginYear = beginYear;

this.endYear = endYear;

}

if (lang != null){

https://www.wendangku.net/doc/f513905508.html,ng = 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();

}

/**//*

* 日历类属性（语言包，可自由扩展）

*/

https://www.wendangku.net/doc/f513905508.html,nguage ={

"year" : [[""], [""]],

"months" : [["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],

["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DE C"]

],

"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] = '

';

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++){

if(i<10){options[length] = new Option("0"+i,"0"+i);} else{options[length] = new Option(i,i);}

}

}this.calendarHour = obj;

obj = this.getElementById("calendarMinute");

with(obj)

{

length = 0;

for (var i = 0; i < 60; i++){

if(i<10){options[length] = new Option("0"+i,"0"+i);} else{options[length] = new Option(i,i);}

}

}this.calendarMinute = obj;

obj = this.getElementById("calendarSecond");

with(obj)

{

length = 0;

for (var i = 0; i < 60; i++){

if(i<10){options[length] = new Option("0"+i,"0"+i);}

else{options[length] = new Option(i,i);}

}

}this.calendarSecond = obj;

obj = this.getElementById("calendarToday");

obj.onclick = function (){

var today = new Date();

calendar.date = today;

calendar.year = today.getFullYear();

calendar.month = today.getMonth();

calendar.changeSelect();

calendar.bindData();

calendar.dateControl.value = today.format(calendar.dateFormatStyle); calendar.hide();

}

this.calendarToday = obj;

}

//年份下拉框绑定数据

Calendar.prototype.bindYear = function(){

var cy = this.calendarYear;

cy.length = 0;

for (var i = this.beginYear; i <= this.endYear; i++){

cy.options[cy.length] = new Option(i + https://www.wendangku.net/doc/f513905508.html,nguage["year"][https://www.wendangku.net/doc/f513905508.html,ng], i);

}

}

//月份下拉框绑定数据

Calendar.prototype.bindMonth = function(){

var cm = this.calendarMonth;

cm.length = 0;

for (var i = 0; i < 12; i++){

cm.options[cm.length] = new Option(https://www.wendangku.net/doc/f513905508.html,nguage["months"][https://www.wendangku.net/doc/f513905508.html,ng][i], i) ;

}

}

//获取小时的数据

Calendar.prototype.getHour = function(){

return this.calendarHour.options[this.calendarHour.selectedIndex].value;

}

//获取分钟的数据

Calendar.prototype.getMinute = function(){

return this.calendarMinute.options[this.calendarMinute.selectedIndex].value;

}

//获取秒的数据

Calendar.prototype.getSecond = function(){

return this.calendarSecond.options[this.calendarSecond.selectedIndex].value;

}

//向前一月

Calendar.prototype.goPrevMonth = function(e){

if (this.year == this.beginYear && this.month == 0){return;}

this.month--;

if (this.month == -1){

this.year--;

this.month = 11;

}

this.date = new Date(this.year, this.month, 1,this.getHour(),this.getMinute(),this.get Second());

this.changeSelect();

this.bindData();

}

//向后一月

Calendar.prototype.goNextMonth = function(e){

if (this.year == this.endYear && this.month == 11){return;}

this.month++;

if (this.month == 12){

this.year++;

this.month = 0;

}

this.date = new Date(this.year, this.month, 1,this.getHour(),this.getMinute(),this.get Second());

this.changeSelect();

this.bindData();

}

//改变SELECT选中状态

Calendar.prototype.changeSelect = function(){

var cy = this.calendarYear;

var cm = this.calendarMonth;

var ch = this.calendarHour;

var ci = this.calendarMinute;

var cs = this.calendarSecond;

for (var i= 0; i < cy.length; i++){

if (cy.options[i].value == this.date.getFullYear()){ cy[i].selected = true;

break;

}

}

for (var i= 0; i < cm.length; i++){

if (cm.options[i].value == this.date.getMonth()){ cm[i].selected = true;

break;

}

}

for (var i= 0; i < ch.length; i++){

if (ch.options[i].value == this.date.getHours()){ ch[i].selected = true;

break;

}

}

for (var i= 0; i < ci.length; i++){

if (ci.options[i].value == this.date.getMinutes()){

ci[i].selected = true;

break;

}

}

for (var i= 0; i < cs.length; i++){

if (cs.options[i].value == this.date.getSeconds()){

cs[i].selected = true;

break;

}

}

}

//更新年、月

Calendar.prototype.update = function (e){

this.year = e.calendarYear.options[e.calendarYear.selectedIndex].value;

this.month = e.calendarMonth.options[e.calendarMonth.selectedIndex].value;

this.date = new Date(this.year, this.month, 1,this.getHour(),this.getMinute(),this.get Second());

this.changeSelect();

this.bindData();

}

//绑定数据到月视图

Calendar.prototype.bindData = function (){

var calendar = this;

var dateArray = this.getMonthViewArray(this.date.getFullYear(), this.date.getMonth ());

var tds = this.getElementById("calendarTable").getElementsByTagName("td");

for(var i = 0; i < tds.length; i++){

tds[i].style.backgroundColor = calendar.colors["td_bg_out"];

tds[i].onclick = function () {return;}

tds[i].onmouseover = function () {return;}

tds[i].onmouseout = function () {return;}

if (i > dateArray.length - 1) break;

tds[i].innerHTML = dateArray[i];

if (dateArray[i] != " "){

tds[i].onclick = function () {

if (calendar.dateControl != null){

calendar.dateControl.value = new Date(calendar.date.getFullYear(),

calendar.date.getMonth(),

WEB设计 日期时间选择器

//%%%%%%%%%%%%%%%時間選擇器%%%%%%%%%%%%% var str=""; document.writeln("

"; document.writeln(str); var_fieldname; function_SetTime(tt){ _fieldname=tt; var ttop=tt.offsetTop;//TT控件的定位点高 var thei=tt.clientHeight;//TT控件本身的高 var tleft=tt.offsetLeft;//TT控件的定位 while(tt=tt.offsetParent){ ttop+=tt.offsetTop;

JS日期控件

JS日期控件 转发评论 2008-06-11 14:19 超级简单好用的JS日期控件 效果如图所示： 用的时候先在插入 然后输入框 当鼠标放在输入框的时候，出现时间控件，选取时间后，JS自动的将时间控件的值赋给starttime2。由于给starttime2加了 runat="server"属性，所以在后台可以取starttime2的Value值。 setday.js下载 提供的setday.js默认是UTF-8编码，也就是VS的默认编码，如果你的页面声明是GB等其他编码，请用一下高级保存，转换一下编码。 setday.js代码: