+ -
当前位置:首页 → 问答吧 → 有没有简单点的日期选择控件啊?

有没有简单点的日期选择控件啊?

时间:2009-11-18

来源:互联网

置顶的那个太复杂了.引用一堆文件,是IE还得再引用一个,太复杂了
有没有简单点的啊? 引用一个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>

作者: liang870420   发布时间: 2010-02-10

我自己写的js,页面上这样写
<input name="instance(MessageTransfer).releaseData"  class="LabeledInput" format="Date" javaClassName="Date">

作者: liang870420   发布时间: 2010-02-10

My97DatePicker吧,个人感觉很好

作者: qianlifeng   发布时间: 2010-02-24

相关阅读 更多