日期和时间特效-日期输入框
——————————————————————
<script type="text/javascript">
function init(){
var y = document.getElementById('y');
var m = document.getElementById('m');
var str = '';
for(var i=2000;i<2030;i++){
str += '<option value="'+i+'">'+i+'</option>';
}
y.innerHTML = str;
str = '';
for(var i=1;i<=12;i++){
str += '<option value="'+i+'">'+i+'</option>';
}
m.innerHTML = str;
}
function showDetail(){
var year = document.getElementById('y').value;
year = parseInt(year);
var month = parseInt(document.getElementById('m').value);
var days = 30;
if(isRunNian(year)&&month==2){
days = 29;
}else if(!isRunNian(year)&&month==2){
days = 28;
}else if(month == 1
||month == 3
||month == 5
||month == 7
||month == 8
||month == 10
||month == 12){
days = 31;
}
var str = '<tr>';
for(var i=1;i<=7;i++){
str += '<td>星期'+i+'</td>';
}
str += '</tr>';
var date = new Date(year,month-1,1);
var week = date.getDay();
var j = 1;
while(true){
str += '<tr>';
for(var i=1;i<=7;i++){
if(j == 1 && i==week){
str += '<td onclick="fillDay('+j+');">1</td>';
j++;
}else if(j > 1 && j<=days){
str += '<td onclick="fillDay('+j+');">'+j+'</td>';
j++;
}else
str += '<td> </td>';
}
str += '</tr>';
if(j >= days)
break;
}
document.getElementById('tbl').innerHTML = str;
}
function isRunNian(y){
return y % 4 ==0;
}
function fillDay(d){
var y = document.getElementById('y').value;
var m = document.getElementById('m').value;
window.currDateInput.value = y+'年'+m+'月'+d+'日';
}
function inputDate(input){
window.currDateInput = input;
var d = document.getElementById('d_div');
var y = document.getElementById('y');
var m = document.getElementById('m');
var now = new Date();
y.value = now.getFullYear();
m.value = now.getMonth() + 1;
d.style.display = 'block';
showDetail();
}
</script>
————————————————————————
<body style="text-align:center" onload="init();">
<p>
<input type="text" onfocus="inputDate(this)"/>
</p>
<div id="d_div" style="border:1px solid red;display:none;width:400px;margin:0 auto;padding:5px;">
<p>
<select id="y"></select>年
<select id="m" onchange="showDetail()"></select>月
</p>
<table id="tbl" border="1" align="center"></table>
</div>
</body>
————————————————————————————
