有没有简单点的日期选择控件啊?
时间:2009-11-18
来源:互联网
置顶的那个太复杂了.引用一堆文件,是IE还得再引用一个,太复杂了
有没有简单点的啊? 引用一个js就搞定的?
有没有简单点的啊? 引用一个js就搞定的?
作者: mike8625 发布时间: 2009-11-18
<public:attach event=ondocumentready onevent=initPanel()>
<script>
//日期面板容器's id datePanel
var date;
var type;//1 dateTime,0 date
var showTimer;
var showing;
function initPanel(){
var format=element.forHtml.format;
var timeValue=element.forHtml.value;
type="Date"==format?0:1;
if(element.document.getElementById("datePanel")==null){
createDatePanelDiv();
}
datePanel.inputs=datePanel.getElementsByTagName("input");
if(timeValue){
timeValue=parseTimeValue(timeValue);
}
date=new Date(parseInt(Date.parse(timeValue)));
if(isNaN(date)){
date=new Date();
if(type==0){
date.setMinutes(0);
date.setHours(0);
}
date.setSeconds(0);
element.innerText="-选择日期-";
}
else{
element.innerText=getDateString();
}
//set actions and init common elements
element.attachEvent("onclick",showPanel);
if(datePanel.tempDate==null){
datePanel.tempDate=new Date();
datePanel.cells=datePanel.getElementsByTagName("table")[1].getElementsByTagName("td");
datePanel.monthField=datePanel.getElementsByTagName("select")[0];
datePanel.curTimeField=datePanel.inputs[4];
datePanel.dayCountArray = new Array(31,-1,31,30,31,30,31,31,30,31,30,31);
datePanel.showDays=showDays;//setTimeout不能直接访问
datePanel.addValue=addValue;
datePanel.monthField.onchange=function(){
datePanel.tempDate.setMonth(this.selectedIndex);
showDays();
};
datePanel.inputs[0].onmouseout=datePanel.inputs[0].onmouseup=datePanel.inputs[2].onmouseout=datePanel.inputs[2].onmouseup=function(){
clearTimeout(datePanel.timer);clearInterval(datePanel.timer);
};
datePanel.inputs[1].maxValue=parseInt(datePanel.inputs[1].maxValue);
datePanel.inputs[1].onkeypress=function(){if(event.keyCode>57||event.keyCode<48||event.shiftKey) event.keyCode=0;};//非数字
datePanel.inputs[1].onkeydown=function(){
switch(event.keyCode){
case 38: addValue(1,this);event.keyCode=16;break;//上方向
case 40: addValue(-1,this);event.keyCode=16;break;//下方向
case 37: //左方向
if(getCursorIndex(this)==0) {
event.keyCode=16;
}
break;
case 39: if(getCursorIndex(this)==this.value.length) event.keyCode=9;break;//右方向
case 13:case 32: event.keyCode=9;//回车和空格
}
};
datePanel.inputs[1].ondragenter=datePanel.inputs[1].onpaste=function(){return false;};
datePanel.inputs[1].onpropertychange=function(){checkField(this)};
datePanel.inputs[1].onmouseover=function(){this.select()};
datePanel.inputs[0].ondblclick=function (){addValue(-1,datePanel.inputs[1]);};
datePanel.inputs[2].ondblclick=function (){addValue(1,datePanel.inputs[1]);};
datePanel.inputs[0].onmousedown=function (){addValue(-1,datePanel.inputs[1]);datePanel.timer=setTimeout("datePanel.timer=setInterval('datePanel.addValue(-1,datePanel.inputs[1])',50)",500);};
datePanel.inputs[2].onmousedown=function (){addValue(1,datePanel.inputs[1]);datePanel.timer=setTimeout("datePanel.timer=setInterval('datePanel.addValue(1,datePanel.inputs[1])',50)",500);};
}
}
function addValue(increment,field){
var value=parseInt(field.value,10)+increment;
if(isNaN(value)) value=0;
else if(value>field.maxValue) value=0;
else if(value<0) value=field.maxValue;
field.value=value;
}
function checkField(field){
if(field&&field.value){
var value=parseInt(field.value,10);
if(value>field.maxValue){
var cursorIndex=getCursorIndex(field);
if(cursorIndex==field.value.length)field.value=field.value.substring(1);
else {
field.value=Math.floor(value/10);
setCursorIndex(field,cursorIndex);
}
}
else if(field.value.charAt(0)=='0'&&value!=0) field.value=value;
if(field==datePanel.inputs[1]){
if(value!=datePanel.tempDate.getFullYear()) {
datePanel.tempDate.setFullYear(value);
clearTimeout(showTimer);
showTimer=setTimeout("datePanel.showDays()",100);
}
}
else if(field==datePanel.inputs[4]) datePanel.tempDate.setHours(value);
else if(field==datePanel.inputs[5]) datePanel.tempDate.setMinutes(value);
else if(field==datePanel.inputs[6]) datePanel.tempDate.setSeconds(value);
}
}
function getCursorIndex(field){
var range=field.createTextRange();
range.setEndPoint('EndToStart',document.selection.createRange());
return range.text.length;
}
function setCursorIndex(field,index){
var range=field.createTextRange();
range.collapse(true);
range.moveStart('character',index);
range.select();
}
//显示面板
function showPanel(){
if(showing) return;
showing=true;
datePanel.tempDate.setTime(date.getTime());
var obj=element;
var left=0;
var top=0;
while(obj!=null){
left+=obj.offsetLeft;
top+=obj.offsetTop;
obj=obj.offsetParent;
}
datePanel.inputs[3].attachEvent('onclick',handleOK);
element.document.attachEvent('onmousedown',hidePanel);
showDateTime();
datePanel.style.display="block";
var scrollTop=element.document.body.scrollTop;
var dth=datePanel.offsetHeight;
var bdh=element.document.body.clientHeight;
if(dth>(bdh+scrollTop-top-element.offsetHeight)){
top=top-element.offsetHeight-dth;
}
var scrollLeft=element.document.body.scrollLeft;
var dtw=datePanel.offsetWidth;
var bdw=element.document.body.clientWidth;
if(dtw>(bdw+scrollLeft-left)){
left=left+element.offsetWidth-dtw;
}
datePanel.style.left=left;
datePanel.style.top=top+element.offsetHeight;
}
//文档中鼠标按下[隐藏面板]
function hidePanel(mustHide){
if(mustHide!=true&&(element.contains(event.srcElement)||datePanel.contains(event.srcElement))) return;
datePanel.style.display="none";
showing=false;
datePanel.inputs[3].detachEvent('onclick',handleOK);
element.document.detachEvent("onmousedown",hidePanel);
}
//单元格 鼠标按下
function selectDay(){
datePanel.cells[getFirstDayIndex()+datePanel.tempDate.getDate()-1].className="";
event.srcElement.className="Selected";
datePanel.tempDate.setDate(event.srcElement.innerText);
datePanel.inputs[3].fireEvent("onclick");
}
function handleOK(){
date.setTime(datePanel.tempDate.getTime());
element.innerText=getDateString();
element.forHtml.value=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
hidePanel(true);
var func = element.forHtml.changeEvent;
if(func!=null){
eval(func);
}
}
//库函数
function showDateTime(){
datePanel.inputs[1].value=date.getFullYear();
datePanel.monthField.selectedIndex=date.getMonth();
showDays();
dateInput.style.display="block";
datePanel.inputs[0].select();
}
function showDays(){
datePanel.tempDate.setMonth(datePanel.monthField.selectedIndex);
firstDayIndex=getFirstDayIndex();
lastDayIndex =firstDayIndex+daysInMonth(datePanel.tempDate.getFullYear(), datePanel.tempDate.getMonth());
for(var i=0;i<37;i++){
if(datePanel.cells.className) datePanel.cells.className="";
if(i<firstDayIndex||i>=lastDayIndex) {
datePanel.cells.innerHTML='';
datePanel.cells.onclick=null;
}
else {
datePanel.cells.innerHTML=i+1-firstDayIndex;
datePanel.cells.onclick=selectDay;
}
}
datePanel.cells[datePanel.tempDate.getDate()+firstDayIndex-1].className="Selected";
}
function getDateString(){
return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日";
}
function getFirstDayIndex(){
return (datePanel.tempDate.getDay()-datePanel.tempDate.getDate()+36)%7;
}
function daysInMonth(theYear,theMonth){
if (theMonth!= 1) {
return datePanel.dayCountArray[theMonth];
}
if ((theYear % 4 != 0) || ((theYear % 100 == 0) && (theYear % 400 != 0))){
return 28;
}
else{
return 29;
}
}
function parseTimeValue(timeValue){
return timeValue.substring(5,10)+"-"+timeValue.substring(0,4)+timeValue.substring(10);
}
//初次加载页面时建立唯一日期面板容器
function createDatePanelDiv(){
var showDiv = element.document.createElement('<div id="datePanel" class="DatePanel" style="position:absolute;display:none"></div>');
showDiv.innerHTML='<fieldset id="dateInput">'+
'<table border="0" cellspacing="0" cellpadding="0" width=100% >'+
'<tr>'+
'<td align="right"><input type="button" value=3 name="a" tabindex="-1" ></td>'+
'<td align="center"><input id="yearInput" class="YearInput" maxValue=2999 maxlength=4></td>'+
'<td align="left"><input type="button" value=4 name="a" tabindex="-1" > 年</td>'+
'<td align="right">'+
'<select>'+
'<option>一月</option>'+
'<option>二月</option>'+
'<option>三月</option>'+
'<option>四月</option>'+
'<option>五月</option>'+
'<option>六月</option>'+
'<option>七月</option>'+
'<option>八月</option>'+
'<option>九月</option>'+
'<option>十月</option>'+
'<option>十一月</option>'+
'<option>十二月</option>'+
'</select>'+
'</td>'+
'</tr>'+
'</table>'+
'<table border="1" width=100%>'+
'<tr>'+
'<th>日</th>'+
'<th>一</th>'+
'<th>二</th>'+
'<th>三</th>'+
'<th>四</th>'+
'<th>五</th>'+
'<th>六</th>'+
'</tr>'+
'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'+
'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'+
'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'+
'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'+
'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'+
'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'+
'</table>'+
'</fieldset>'+
'<input type="hidden" value="">'
element.document.body.insertAdjacentElement("afterBegin",showDiv);
}
</script>
</public:attach>
<script>
//日期面板容器's id datePanel
var date;
var type;//1 dateTime,0 date
var showTimer;
var showing;
function initPanel(){
var format=element.forHtml.format;
var timeValue=element.forHtml.value;
type="Date"==format?0:1;
if(element.document.getElementById("datePanel")==null){
createDatePanelDiv();
}
datePanel.inputs=datePanel.getElementsByTagName("input");
if(timeValue){
timeValue=parseTimeValue(timeValue);
}
date=new Date(parseInt(Date.parse(timeValue)));
if(isNaN(date)){
date=new Date();
if(type==0){
date.setMinutes(0);
date.setHours(0);
}
date.setSeconds(0);
element.innerText="-选择日期-";
}
else{
element.innerText=getDateString();
}
//set actions and init common elements
element.attachEvent("onclick",showPanel);
if(datePanel.tempDate==null){
datePanel.tempDate=new Date();
datePanel.cells=datePanel.getElementsByTagName("table")[1].getElementsByTagName("td");
datePanel.monthField=datePanel.getElementsByTagName("select")[0];
datePanel.curTimeField=datePanel.inputs[4];
datePanel.dayCountArray = new Array(31,-1,31,30,31,30,31,31,30,31,30,31);
datePanel.showDays=showDays;//setTimeout不能直接访问
datePanel.addValue=addValue;
datePanel.monthField.onchange=function(){
datePanel.tempDate.setMonth(this.selectedIndex);
showDays();
};
datePanel.inputs[0].onmouseout=datePanel.inputs[0].onmouseup=datePanel.inputs[2].onmouseout=datePanel.inputs[2].onmouseup=function(){
clearTimeout(datePanel.timer);clearInterval(datePanel.timer);
};
datePanel.inputs[1].maxValue=parseInt(datePanel.inputs[1].maxValue);
datePanel.inputs[1].onkeypress=function(){if(event.keyCode>57||event.keyCode<48||event.shiftKey) event.keyCode=0;};//非数字
datePanel.inputs[1].onkeydown=function(){
switch(event.keyCode){
case 38: addValue(1,this);event.keyCode=16;break;//上方向
case 40: addValue(-1,this);event.keyCode=16;break;//下方向
case 37: //左方向
if(getCursorIndex(this)==0) {
event.keyCode=16;
}
break;
case 39: if(getCursorIndex(this)==this.value.length) event.keyCode=9;break;//右方向
case 13:case 32: event.keyCode=9;//回车和空格
}
};
datePanel.inputs[1].ondragenter=datePanel.inputs[1].onpaste=function(){return false;};
datePanel.inputs[1].onpropertychange=function(){checkField(this)};
datePanel.inputs[1].onmouseover=function(){this.select()};
datePanel.inputs[0].ondblclick=function (){addValue(-1,datePanel.inputs[1]);};
datePanel.inputs[2].ondblclick=function (){addValue(1,datePanel.inputs[1]);};
datePanel.inputs[0].onmousedown=function (){addValue(-1,datePanel.inputs[1]);datePanel.timer=setTimeout("datePanel.timer=setInterval('datePanel.addValue(-1,datePanel.inputs[1])',50)",500);};
datePanel.inputs[2].onmousedown=function (){addValue(1,datePanel.inputs[1]);datePanel.timer=setTimeout("datePanel.timer=setInterval('datePanel.addValue(1,datePanel.inputs[1])',50)",500);};
}
}
function addValue(increment,field){
var value=parseInt(field.value,10)+increment;
if(isNaN(value)) value=0;
else if(value>field.maxValue) value=0;
else if(value<0) value=field.maxValue;
field.value=value;
}
function checkField(field){
if(field&&field.value){
var value=parseInt(field.value,10);
if(value>field.maxValue){
var cursorIndex=getCursorIndex(field);
if(cursorIndex==field.value.length)field.value=field.value.substring(1);
else {
field.value=Math.floor(value/10);
setCursorIndex(field,cursorIndex);
}
}
else if(field.value.charAt(0)=='0'&&value!=0) field.value=value;
if(field==datePanel.inputs[1]){
if(value!=datePanel.tempDate.getFullYear()) {
datePanel.tempDate.setFullYear(value);
clearTimeout(showTimer);
showTimer=setTimeout("datePanel.showDays()",100);
}
}
else if(field==datePanel.inputs[4]) datePanel.tempDate.setHours(value);
else if(field==datePanel.inputs[5]) datePanel.tempDate.setMinutes(value);
else if(field==datePanel.inputs[6]) datePanel.tempDate.setSeconds(value);
}
}
function getCursorIndex(field){
var range=field.createTextRange();
range.setEndPoint('EndToStart',document.selection.createRange());
return range.text.length;
}
function setCursorIndex(field,index){
var range=field.createTextRange();
range.collapse(true);
range.moveStart('character',index);
range.select();
}
//显示面板
function showPanel(){
if(showing) return;
showing=true;
datePanel.tempDate.setTime(date.getTime());
var obj=element;
var left=0;
var top=0;
while(obj!=null){
left+=obj.offsetLeft;
top+=obj.offsetTop;
obj=obj.offsetParent;
}
datePanel.inputs[3].attachEvent('onclick',handleOK);
element.document.attachEvent('onmousedown',hidePanel);
showDateTime();
datePanel.style.display="block";
var scrollTop=element.document.body.scrollTop;
var dth=datePanel.offsetHeight;
var bdh=element.document.body.clientHeight;
if(dth>(bdh+scrollTop-top-element.offsetHeight)){
top=top-element.offsetHeight-dth;
}
var scrollLeft=element.document.body.scrollLeft;
var dtw=datePanel.offsetWidth;
var bdw=element.document.body.clientWidth;
if(dtw>(bdw+scrollLeft-left)){
left=left+element.offsetWidth-dtw;
}
datePanel.style.left=left;
datePanel.style.top=top+element.offsetHeight;
}
//文档中鼠标按下[隐藏面板]
function hidePanel(mustHide){
if(mustHide!=true&&(element.contains(event.srcElement)||datePanel.contains(event.srcElement))) return;
datePanel.style.display="none";
showing=false;
datePanel.inputs[3].detachEvent('onclick',handleOK);
element.document.detachEvent("onmousedown",hidePanel);
}
//单元格 鼠标按下
function selectDay(){
datePanel.cells[getFirstDayIndex()+datePanel.tempDate.getDate()-1].className="";
event.srcElement.className="Selected";
datePanel.tempDate.setDate(event.srcElement.innerText);
datePanel.inputs[3].fireEvent("onclick");
}
function handleOK(){
date.setTime(datePanel.tempDate.getTime());
element.innerText=getDateString();
element.forHtml.value=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
hidePanel(true);
var func = element.forHtml.changeEvent;
if(func!=null){
eval(func);
}
}
//库函数
function showDateTime(){
datePanel.inputs[1].value=date.getFullYear();
datePanel.monthField.selectedIndex=date.getMonth();
showDays();
dateInput.style.display="block";
datePanel.inputs[0].select();
}
function showDays(){
datePanel.tempDate.setMonth(datePanel.monthField.selectedIndex);
firstDayIndex=getFirstDayIndex();
lastDayIndex =firstDayIndex+daysInMonth(datePanel.tempDate.getFullYear(), datePanel.tempDate.getMonth());
for(var i=0;i<37;i++){
if(datePanel.cells.className) datePanel.cells.className="";
if(i<firstDayIndex||i>=lastDayIndex) {
datePanel.cells.innerHTML='';
datePanel.cells.onclick=null;
}
else {
datePanel.cells.innerHTML=i+1-firstDayIndex;
datePanel.cells.onclick=selectDay;
}
}
datePanel.cells[datePanel.tempDate.getDate()+firstDayIndex-1].className="Selected";
}
function getDateString(){
return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日";
}
function getFirstDayIndex(){
return (datePanel.tempDate.getDay()-datePanel.tempDate.getDate()+36)%7;
}
function daysInMonth(theYear,theMonth){
if (theMonth!= 1) {
return datePanel.dayCountArray[theMonth];
}
if ((theYear % 4 != 0) || ((theYear % 100 == 0) && (theYear % 400 != 0))){
return 28;
}
else{
return 29;
}
}
function parseTimeValue(timeValue){
return timeValue.substring(5,10)+"-"+timeValue.substring(0,4)+timeValue.substring(10);
}
//初次加载页面时建立唯一日期面板容器
function createDatePanelDiv(){
var showDiv = element.document.createElement('<div id="datePanel" class="DatePanel" style="position:absolute;display:none"></div>');
showDiv.innerHTML='<fieldset id="dateInput">'+
'<table border="0" cellspacing="0" cellpadding="0" width=100% >'+
'<tr>'+
'<td align="right"><input type="button" value=3 name="a" tabindex="-1" ></td>'+
'<td align="center"><input id="yearInput" class="YearInput" maxValue=2999 maxlength=4></td>'+
'<td align="left"><input type="button" value=4 name="a" tabindex="-1" > 年</td>'+
'<td align="right">'+
'<select>'+
'<option>一月</option>'+
'<option>二月</option>'+
'<option>三月</option>'+
'<option>四月</option>'+
'<option>五月</option>'+
'<option>六月</option>'+
'<option>七月</option>'+
'<option>八月</option>'+
'<option>九月</option>'+
'<option>十月</option>'+
'<option>十一月</option>'+
'<option>十二月</option>'+
'</select>'+
'</td>'+
'</tr>'+
'</table>'+
'<table border="1" width=100%>'+
'<tr>'+
'<th>日</th>'+
'<th>一</th>'+
'<th>二</th>'+
'<th>三</th>'+
'<th>四</th>'+
'<th>五</th>'+
'<th>六</th>'+
'</tr>'+
'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'+
'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'+
'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'+
'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'+
'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'+
'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'+
'</table>'+
'</fieldset>'+
'<input type="hidden" value="">'
element.document.body.insertAdjacentElement("afterBegin",showDiv);
}
</script>
</public:attach>
作者: liang870420 发布时间: 2010-02-10
我自己写的js,页面上这样写
<input name="instance(MessageTransfer).releaseData" class="LabeledInput" format="Date" javaClassName="Date">
<input name="instance(MessageTransfer).releaseData" class="LabeledInput" format="Date" javaClassName="Date">
作者: liang870420 发布时间: 2010-02-10
My97DatePicker吧,个人感觉很好
作者: qianlifeng 发布时间: 2010-02-24
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28