好多Javascript日期选择器呀--2
2007-03-22 00:31
288 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<title>calender select</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type='text/css'>
body {
font-family:"Lucida sans unicode", sans-serif;
font-size:12px;
margin:0;
padding:0;
height:100%;
}
#basis {
display:inline;
position:relative;
}
#calender {
position:absolute;
top:30px;
left:0;
width:220px;
background-color:#fff;
border:3px solid #ccc;
padding:10px;
z-index:10;
}
#control {
text-align:center;
margin:0 0 5px 0;
}
#control select {
font-family:"Lucida sans unicode", sans-serif;
font-size:11px;
margin:0 5px;
vertical-align:middle;
}
#calender .controlPlus {
padding:0 5px;
text-decoration:none;
color:#333;
}
#calender table {
empty-cells: show;
width:100%;
font-size:11px;
table-layout:fixed;
}
#calender .weekdays td{
text-align:right;
padding:1px 5px 1px 1px;
color:#333;
}
#calender .week td {
text-align:right;
cursor:pointer;
border:1px solid #fff;
padding:1px 4px 1px 0;
}
#calender .week .today {
background-color:#ccf;
border-color:#ccf;
}
#calender .week .holiday {
font-weight: bold;
}
#calender .week .hoverEle {
border-color:#666;
background-color:#99f;
color:#000;
}
</style>
<script type="text/javascript">
var allMonth=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var allNameOfWeekDays=["Mo","Di", "Mi", "Do", "Fr", "Sa", "So"];
var allNameOfMonths=["Januar","Februar","M?rz","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"];
var newDate=new Date();
var yearZero=newDate.getFullYear();
var monthZero=newDate.getMonth();
var day=newDate.getDate();
var currentDay=0, currentDayZero=0;
var month=monthZero, year=yearZero;
var yearMin=2000, yearMax=2010;
var target='';
var hoverEle=false;
function setTarget(e){
if(e) return e.target;
if(event) return event.srcElement;
}
function newElement(type, attrs, content, toNode) {
var ele=document.createElement(type);
if(attrs) {
for(var i=0; i<attrs.length; i++) {
eval('ele.'+attrs[i][0]+(attrs[i][2] ? '=\u0027' :'=')+attrs[i][1]+(attrs[i][2] ? '\u0027' :''));
}
}
if(content) ele.appendChild(document.createTextNode(content));
if(toNode) toNode.appendChild(ele);
return ele;
}
function setMonth(ele){month=parseInt(ele.value);calender()}
function setYear(ele){year=parseInt(ele.value);calender()}
function setValue(ele) {
if(ele.parentNode.className=='week' && ele.firstChild){
var dayOut=ele.firstChild.nodeValue;
if(dayOut < 10) dayOut='0'+dayOut;
var monthOut=month+1;
if(monthOut < 10) monthOut='0'+monthOut;
target.value=dayOut+'.'+monthOut+'.'+year;
removeCalender();
}
}
function removeCalender() {
var parentEle=document.getElementById("calender");
while(parentEle.firstChild) parentEle.removeChild(parentEle.firstChild);
document.getElementById('basis').parentNode.removeChild(document.getElementById('basis'));
}
function calender() {
var parentEle=document.getElementById("calender");
parentEle.onmouseover=function(e) {
var ele=setTarget(e);
if(ele.parentNode.className=='week' && ele.firstChild && ele!=hoverEle) {
if(hoverEle) hoverEle.className=hoverEle.className.replace(/hoverEle ?/,'');
hoverEle=ele;
ele.className='hoverEle '+ele.className;
} else {
if(hoverEle) {
hoverEle.className=hoverEle.className.replace(/hoverEle ?/,'');
hoverEle=false;
}
}
}
while(parentEle.firstChild) parentEle.removeChild(parentEle.firstChild);
function check(){
if(year%4==0&&(year%100!=0||year%400==0))allMonth[1]=29;
else allMonth[1]=28;
}
function addClass (name) { if(!currentClass){currentClass=name} else {currentClass+=' '+name} };
if(month < 0){month+=12; year-=1}
if(month > 11){month-=12; year+=1}
if(year==yearMax-1) yearMax+=1;
if(year==yearMin) yearMin-=1;
check();
var control=newElement('p',[['id','control',1]],false,parentEle);
var controlPlus=newElement('a', [['href','javascript:month--;calender()',1],['className','controlPlus',1]], '<', control);
var select=newElement('select', [['onchange',function(){setMonth(this)}]], false, control);
for(var i=0; i<allNameOfMonths.length; i++) newElement('option', [['value',i,1]], allNameOfMonths[i], select);
select.selectedIndex=month;
select=newElement('select', [['onchange',function(){setYear(this)}]], false, control);
for(var i=yearMin; i<yearMax; i++) newElement('option', [['value',i,1]], i, select);
select.selectedIndex=year-yearMin;
controlPlus=newElement('a', [['href','javascript:month++;calender()',1],['className','controlPlus',1]], '>', control);
check();
currentDay=1-new Date(year,month,1).getDay();
if(currentDay > 0) currentDay-=7;
currentDayZero=currentDay;
var newMonth=newElement('table',[['cellSpacing',0,1],['onclick',function(e){setValue(setTarget(e))}]], false, parentEle);
var newMonthBody=newElement('tbody', false, false, newMonth);
var tr=newElement('tr', [['className','head',1]], false, newMonthBody);
tr=newElement('tr', [['className','weekdays',1]], false, newMonthBody);
for(i=0;i<7;i++) td=newElement('td', false, allNameOfWeekDays[i], tr);
tr=newElement('tr', [['className','week',1]], false, newMonthBody);
for(i=0; i<allMonth[month]-currentDayZero; i++){
var currentClass=false;
currentDay++;
if(currentDay==day && month==monthZero && year==yearZero) addClass ('today');
if(currentDay <= 0 ) {
if(currentDayZero!=-7) td=newElement('td', false, false, tr);
}
else {
if((currentDay-currentDayZero)%7==0) addClass ('holiday');
td=newElement('td', (!currentClass ? false : [['className',currentClass,1]] ), currentDay, tr);
if((currentDay-currentDayZero)%7==0) tr=newElement('tr', [['className','week',1]], false, newMonthBody);
}
if(i==allMonth[month]-currentDayZero-1){
i++;
while(i%7!=0){i++;td=newElement('td', false, false, tr)};
}
}
}
function showCalender(ele) {
if(document.getElementById('basis')) { removeCalender() }
else {
target=document.getElementById(ele.id.replace(/for_/,''));
var basis=ele.parentNode.insertBefore(document.createElement('div'),ele);
basis.id='basis';
newElement('div', [['id','calender',1]], false, basis);
calender();
}
}
</script>
</head>
<body >
<div><input type='text' id='date1' /><input type='button' id='for_date1' value='date' onclick='showCalender(this)' /></div>
<div><input type='text' id='date2' /><input type='button' id='for_date2' value='date' onclick='showCalender(this)' /></div>
<p id='output'></p>
</body>
</html>
"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<title>calender select</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type='text/css'>
body {
font-family:"Lucida sans unicode", sans-serif;
font-size:12px;
margin:0;
padding:0;
height:100%;
}
#basis {
display:inline;
position:relative;
}
#calender {
position:absolute;
top:30px;
left:0;
width:220px;
background-color:#fff;
border:3px solid #ccc;
padding:10px;
z-index:10;
}
#control {
text-align:center;
margin:0 0 5px 0;
}
#control select {
font-family:"Lucida sans unicode", sans-serif;
font-size:11px;
margin:0 5px;
vertical-align:middle;
}
#calender .controlPlus {
padding:0 5px;
text-decoration:none;
color:#333;
}
#calender table {
empty-cells: show;
width:100%;
font-size:11px;
table-layout:fixed;
}
#calender .weekdays td{
text-align:right;
padding:1px 5px 1px 1px;
color:#333;
}
#calender .week td {
text-align:right;
cursor:pointer;
border:1px solid #fff;
padding:1px 4px 1px 0;
}
#calender .week .today {
background-color:#ccf;
border-color:#ccf;
}
#calender .week .holiday {
font-weight: bold;
}
#calender .week .hoverEle {
border-color:#666;
background-color:#99f;
color:#000;
}
</style>
<script type="text/javascript">
var allMonth=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var allNameOfWeekDays=["Mo","Di", "Mi", "Do", "Fr", "Sa", "So"];
var allNameOfMonths=["Januar","Februar","M?rz","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"];
var newDate=new Date();
var yearZero=newDate.getFullYear();
var monthZero=newDate.getMonth();
var day=newDate.getDate();
var currentDay=0, currentDayZero=0;
var month=monthZero, year=yearZero;
var yearMin=2000, yearMax=2010;
var target='';
var hoverEle=false;
function setTarget(e){
if(e) return e.target;
if(event) return event.srcElement;
}
function newElement(type, attrs, content, toNode) {
var ele=document.createElement(type);
if(attrs) {
for(var i=0; i<attrs.length; i++) {
eval('ele.'+attrs[i][0]+(attrs[i][2] ? '=\u0027' :'=')+attrs[i][1]+(attrs[i][2] ? '\u0027' :''));
}
}
if(content) ele.appendChild(document.createTextNode(content));
if(toNode) toNode.appendChild(ele);
return ele;
}
function setMonth(ele){month=parseInt(ele.value);calender()}
function setYear(ele){year=parseInt(ele.value);calender()}
function setValue(ele) {
if(ele.parentNode.className=='week' && ele.firstChild){
var dayOut=ele.firstChild.nodeValue;
if(dayOut < 10) dayOut='0'+dayOut;
var monthOut=month+1;
if(monthOut < 10) monthOut='0'+monthOut;
target.value=dayOut+'.'+monthOut+'.'+year;
removeCalender();
}
}
function removeCalender() {
var parentEle=document.getElementById("calender");
while(parentEle.firstChild) parentEle.removeChild(parentEle.firstChild);
document.getElementById('basis').parentNode.removeChild(document.getElementById('basis'));
}
function calender() {
var parentEle=document.getElementById("calender");
parentEle.onmouseover=function(e) {
var ele=setTarget(e);
if(ele.parentNode.className=='week' && ele.firstChild && ele!=hoverEle) {
if(hoverEle) hoverEle.className=hoverEle.className.replace(/hoverEle ?/,'');
hoverEle=ele;
ele.className='hoverEle '+ele.className;
} else {
if(hoverEle) {
hoverEle.className=hoverEle.className.replace(/hoverEle ?/,'');
hoverEle=false;
}
}
}
while(parentEle.firstChild) parentEle.removeChild(parentEle.firstChild);
function check(){
if(year%4==0&&(year%100!=0||year%400==0))allMonth[1]=29;
else allMonth[1]=28;
}
function addClass (name) { if(!currentClass){currentClass=name} else {currentClass+=' '+name} };
if(month < 0){month+=12; year-=1}
if(month > 11){month-=12; year+=1}
if(year==yearMax-1) yearMax+=1;
if(year==yearMin) yearMin-=1;
check();
var control=newElement('p',[['id','control',1]],false,parentEle);
var controlPlus=newElement('a', [['href','javascript:month--;calender()',1],['className','controlPlus',1]], '<', control);
var select=newElement('select', [['onchange',function(){setMonth(this)}]], false, control);
for(var i=0; i<allNameOfMonths.length; i++) newElement('option', [['value',i,1]], allNameOfMonths[i], select);
select.selectedIndex=month;
select=newElement('select', [['onchange',function(){setYear(this)}]], false, control);
for(var i=yearMin; i<yearMax; i++) newElement('option', [['value',i,1]], i, select);
select.selectedIndex=year-yearMin;
controlPlus=newElement('a', [['href','javascript:month++;calender()',1],['className','controlPlus',1]], '>', control);
check();
currentDay=1-new Date(year,month,1).getDay();
if(currentDay > 0) currentDay-=7;
currentDayZero=currentDay;
var newMonth=newElement('table',[['cellSpacing',0,1],['onclick',function(e){setValue(setTarget(e))}]], false, parentEle);
var newMonthBody=newElement('tbody', false, false, newMonth);
var tr=newElement('tr', [['className','head',1]], false, newMonthBody);
tr=newElement('tr', [['className','weekdays',1]], false, newMonthBody);
for(i=0;i<7;i++) td=newElement('td', false, allNameOfWeekDays[i], tr);
tr=newElement('tr', [['className','week',1]], false, newMonthBody);
for(i=0; i<allMonth[month]-currentDayZero; i++){
var currentClass=false;
currentDay++;
if(currentDay==day && month==monthZero && year==yearZero) addClass ('today');
if(currentDay <= 0 ) {
if(currentDayZero!=-7) td=newElement('td', false, false, tr);
}
else {
if((currentDay-currentDayZero)%7==0) addClass ('holiday');
td=newElement('td', (!currentClass ? false : [['className',currentClass,1]] ), currentDay, tr);
if((currentDay-currentDayZero)%7==0) tr=newElement('tr', [['className','week',1]], false, newMonthBody);
}
if(i==allMonth[month]-currentDayZero-1){
i++;
while(i%7!=0){i++;td=newElement('td', false, false, tr)};
}
}
}
function showCalender(ele) {
if(document.getElementById('basis')) { removeCalender() }
else {
target=document.getElementById(ele.id.replace(/for_/,''));
var basis=ele.parentNode.insertBefore(document.createElement('div'),ele);
basis.id='basis';
newElement('div', [['id','calender',1]], false, basis);
calender();
}
}
</script>
</head>
<body >
<div><input type='text' id='date1' /><input type='button' id='for_date1' value='date' onclick='showCalender(this)' /></div>
<div><input type='text' id='date2' /><input type='button' id='for_date2' value='date' onclick='showCalender(this)' /></div>
<p id='output'></p>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 好多Javascript日期选择器呀-7
- 好多Javascript日期选择器呀-6
- 好多Javascript日期选择器呀-5
- 好多Javascript日期选择器呀-4
- 好多Javascript日期选择器呀--3
- 好多Javascript日期选择器呀--1
- Javascript日期选择控件(1)
- javascript级联选择日期(最常用的网站选择日期样式)
- Javascript: 在下拉列表中选择年份和月份，然后判断是瑞年还是平年，在日日期得下拉列表中显示瑞年二月对应多少天，平年对应多少天。
- [转]JavaScript日期选择器
- 一个简单的例子：通过javascript输出所选择的日期（1）
- JavaScript：日期选择器组件的使用
- [分享]精心收集的3款JavaScript实现的日期时间选择控件
- JavaScript输出所选择起始与结束日期的方法
- 17个Javascript日期选择器
- Javascript日期选择控件(2)
- 在网页中选择日期的Javascript代码
- Javascript实现日期的联动选择代码
- 基于javascript bootstrap实现生日日期联动选择