js选择日期

#calendar  { width:140px; border:solid 1px #b8f0e7; height:100px; position:absolute; display:none;}  
#calendar table 
{ margin:0px; background-color: #b8f0e7; font-size:12px;}  
#calendar input 
{ border:none 0px #ffffff; height:16px;}  
#cBar td 
{ background-color:#fff;}  
#cDay td 
{ padding-top:2px; background-color:#ffffff;}  
#cBar a:link,a:visited,a:active 
{ color: #000000; text-decoration: none; font-size:12px;}  
#cBar a:hover 
{ text-decoration: none; color: #FF0000; font-size:12px;}  
a.cDayS:link,a.cDayS:visited,a.cDayS:active 
{ color: #FF0000; text-decoration: none; font-size:12px;}  
a.cDayS:hover 
{ text-decoration: none; color: #FF0000; font-size:12px;}  
a.cDay:link,a.cDay:visited,a.cDay:active 
{ color: #000000; text-decoration: none; font-size:12px;}  
a.cDay:hover 
{ text-decoration: none; color: #000000; font-size:12px;}
function  setCalendar()  {
    
this.aWeek = ['','','','','',''];
    
this.aDay = new Array(); this.oDate = new Date();
    
this.toYear = this.oDate.getYear();
    
this.toMonth = this.oDate.getMonth() + 1;
    
this.toDay = this.oDate.getDate();
    
if(this.toYear<1900this.toYear+= 1900;
    
this.setThisDate = function(d) {
        
if(d!=''{
            
var aDate = d.split('-');
            
this.oDate = new Date(aDate[0], aDate[1- 1, aDate[2]);
            
this.thisYear = this.oDate.getYear();
            
this.thisMonth = this.oDate.getMonth() + 1this.thisDay = this.oDate.getDate();
            
if(this.thisYear<1900this.thisYear+= 1900;
        }

        
else {
            
this.thisYear = this.toYear;
            
this.thisMonth = this.toMonth;
            
this.thisDay = this.toDay;
        }

    }

    
this.writeCalendar = function() {
        
var html = '<table width="140" border="0" cellspacing="0" cellpadding="0"><tr><td id="cBar">';
        html
+= '<table width="140" border="0" cellspacing="0" cellpadding="0"><tr>';
        html
+= '<td><a href="javascript:oCalendar.setGoYear('-')" title="上一年"><</a><input type="text" id="calendarYear" maxlength="4" style="width:30px; height:16px;" οnkeyup="oCalendar.checkYear()"><a href="javascript:oCalendar.setGoYear('+')" title="下一年">></a><a href="javascript:oCalendar.setGoDay()">今天</a><a href="javascript:oCalendar.setGoMonth('-')" title="上一月"><</a><input type="text" id="calendarMonth" maxlength="2" style="width:18px; height:16px;" οnkeyup="oCalendar.checkMonth()"><a href="javascript:oCalendar.setGoMonth('+')" title="下一月">></a></td><td><a href="javascript:oCalendar.closeC('+')" title="关闭">×</a></td>';
        html
+= '</tr></table></td></tr>';
        html
+= '<tr><td id="cDay"></td></tr></table>';
        html
+= '<iframe src="javascript:false" style="border:0px; position:absolute; visibility:inherit; top:0px; left:0px; width:150px; height:200px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>';
        document.getElementById(
'calendar').innerHTML = html;
    }

    
this.writeCDay = function() {
        
this.checkDate();
        
this.getDays(document.getElementById('calendarYear').value,
        document.getElementById(
'calendarMonth').value);
        
var html = '<table id="XList" width="100%" border="0" cellspacing="1" cellpadding="0"><tr style="">';
        html
+= '<td align="center" style="color:red; background-color:#d8f1f6;">日</td>';
        
for(var i=0; i<this.aWeek.length; i++) html+= '<td align="center" style="background-color:#d8f1f6;">' + this.aWeek[i] + '</td>'; html+= '</tr>';
        
for(var i=0; i<6; i++{
            
var x = i*7;
            
if(i==0||this.aDay[x]!=''){
                html
+= '<tr>';
                html
+= this.getTDay(this.aDay[x], 1);
                
for(var j=1; j<7; j++{
                    
var x = 7*i+j;
                    html
+= this.getTDay(this.aDay[x], 0);
                }

                html
+= '</tr>';
            }

        }

        html
+= '</table>';
        document.getElementById(
'cDay').innerHTML = html;
    }

    
this.getTDay = function(d, t) {
        
var style = '';
        
var aStyle = 'cDay';
        
if(t==1{
            style
+= 'color:red;';
            aStyle 
= 'cDayS';
        }

        
if(this.isToDate==1 && d==this.toDay) style+= 'font-weight:bold;';
        
if(this.isThisDate==1 && d==this.thisDay) style+= 'background-color:#cccccc;';
        
return '<td align="center" style="' + style + '"><a href="javascript:oCalendar.selectDate(' + d + ')" class="' + aStyle + '">' + d + '</a></td>';
    }

    
this.getDays = function(y, m) {
        
for(var i=0; i<42; i++this.aDay[i] = '';
        
var days = new Date(y, m, 0).getDate();
        
var week = new Date(y, m-11).getDay();
        
for(var i=0; i<days; i++this.aDay[i+week] = i + 1;
    }

    
this.setGoYear = function(x) {
        
switch (x) {
            
case '+': document.getElementById('calendarYear').value = document.getElementById('calendarYear').value * 1 + 1break;
            
case '-': document.getElementById('calendarYear').value-= 1break;
            
default: document.getElementById('calendarYear').value = this.thisYear;
        }

        
this.writeCDay();
    }

    
this.setGoMonth = function(x) {
        
var m = document.getElementById('calendarMonth').value;
        
switch (x) {
            
case '+': m = m * 1 + 1break;
            
case '-': m-= 1break;
            
default: m = this.thisMonth;
        }

        
if(m<1{
            m
=12;
            document.getElementById(
'calendarYear').value-= 1;
        }

        
else if(m>12{
            m
=1; document.getElementById('calendarYear').value = document.getElementById('calendarYear').value * 1 + 1;
        }

        document.getElementById(
'calendarMonth').value = m;
        
this.writeCDay();
    }

    
this.setGoDay = function() {
        document.getElementById(
'calendarYear').value = this.toYear;
        document.getElementById(
'calendarMonth').value = this.toMonth; 
        
this.writeCDay();
    }

    
this.getThisDate = function() {
        alert(
this.thisYear+''+this.thisMonth+''+this.thisDay+'');
    }

    
this.checkDate = function() {
        
if(document.getElementById('calendarYear').value==this.toYear && document.getElementById('calendarMonth').value==this.toMonth) this.isToDate = 1;
        
else this.isToDate = 0;
        
if(document.getElementById('calendarYear').value==this.thisYear && document.getElementById('calendarMonth').value==this.thisMonth) this.isThisDate = 1;
        
else this.isThisDate = 0;
    }

    
this.selectDate = function(d) {
        document.getElementById(
this.id).value = document.getElementById('calendarYear').value + '-' + document.getElementById('calendarMonth').value + '-' + d;
        
this.closeC();
    }

    
this.showC = function(id, e) {
        
this.id = id;
        
this.setThisDate(document.getElementById(this.id).value);
        
this.writeCDay(); this.setGoYear('');
        
this.setGoMonth('');
        document.getElementById(
'calendar').style.display = 'block';
        
var cX = e.clientX; var cY = e.clientY;
        
var sX = document.body.clientWidth;
        
var sY = document.body.clientHeight;
        
if(cX>70) cX-= 70if((sX-cX)<80) cX = sC - 80if((sY-cY)<150) cY = sY - 150;
        document.getElementById(
'calendar').style.left = cX +'px';
        document.getElementById(
'calendar').style.top = cY + document.body.scrollTop + 'px';
    }

    
this.closeC = function() {
        document.getElementById(
'calendar').style.display = 'none';
    }

    
this.checkYear = function() {
        
var y = document.getElementById('calendarYear').value; if(y>1900&&y<3000this.writeCDay();
    }

    
this.checkMonth = function() {
        
var y = document.getElementById('calendarMonth').value; if(y>0&&y<13this.writeCDay();
    }

    
this.writeCalendar();
}
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用第三方库或者自己编写代码实现JavaScript日期选择器。其中比较常用的第三方库有jQuery UI Datepicker、Bootstrap Datepicker等。 如果使用jQuery UI Datepicker,可以在HTML中引入jQuery和jQuery UI的库文件,然后在JavaScript中调用datepicker()方法即可。例如: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery UI Datepicker</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script> $(function() { $("#datepicker").datepicker(); }); </script> </head> <body> <p>Date: <input type="text" id="datepicker"></p> </body> </html> ``` 如果使用Bootstrap Datepicker,可以在HTML中引入Bootstrap和Bootstrap Datepicker的库文件,然后在JavaScript中调用datepicker()方法即可。例如: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap Datepicker</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script> <script> $(function() { $("#datepicker").datepicker(); }); </script> </head> <body> <p>Date: <input type="text" id="datepicker"></p> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值