个性化日期控件求助!!! 需求把日期控件个性化成这个样子,每一天日期里面需要可以有自定义的属性,每一天的样式可以根据自定义的属性来变化。 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 我现在在用My97DatePicker做修改,还不知道能不能改成那样,哪个朋友有适合的建议。 找一些纯js的日期控件比较好改。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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=["星期一","星期二", "星期三", "星期四", "星期五", "星期六", "星期日"]; var allNameOfMonths=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]; var newnewDate=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 monthmonthOut=month+1; if(monthOut < 10) monthOut='0'+monthOut; //target.value=dayOut+'.'+monthOut+'.'+year; <span style="white-space:pre"> </span>target.value = year + "-" + monthOut + "-" + dayOut; 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) hoverElehoverEle.className=hoverEle.className.replace(/hoverEle ?/,''); hoverEle=ele; ele.className='hoverEle '+ele.className; } else { if(hoverEle) { hoverElehoverEle.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; currentDaycurrentDayZero=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> </body> </html> 楼上碉堡了,,,不过,,js+css是可以参考的方式。 哥们, 这不是js能玩得开的东东了。 每天的数据, 从哪里来?没有数据就没有样式,有了数据你还不如直接把样式给相应的单元格td得了。前后台紧密结合, 是最吃亏不讨好的。 省省吧。直接用后台代码生成html。 找一个日历功能满足基本要求的JS控件一般都会有回调方法,如果没有你就自己在源代码里加一下,这个方法是在生成日期后执行的like this:function set(date, data) { //找到日期对应的node,然后由data的数据给元素添加样式啊什么的}set('2012-11-14',{'color':'#f00', 'num': '24.5'})这样既可以满足需求,日期控件也基本不用改什么,改了也不会影响用在其它地方 怎样屏蔽免费空间的广告 如何让弹出的窗口 中的文字显示在中间? 请问如何实现模拟点击? 请教关于定时刷新页面的问题 算法问题,按需要将数字分组 求解几个面试题 select框同时有onclick和ondbclick处理函数的时候,如何在双击的时候屏蔽单击事件处理? 关于 层的控制 求救:这个效果谁能实现?(地图查询) 小问题,让一个textfield变成只读,js怎么写? setAttribute设置class属性,只有部分样式有效??? js截取字符串
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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=["星期一","星期二", "星期三", "星期四", "星期五", "星期六", "星期日"];
var allNameOfMonths=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
var newnewDate=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 monthmonthOut=month+1;
if(monthOut < 10) monthOut='0'+monthOut;
//target.value=dayOut+'.'+monthOut+'.'+year;
<span style="white-space:pre"> </span>target.value = year + "-" + monthOut + "-" + dayOut;
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) hoverElehoverEle.className=hoverEle.className.replace(/hoverEle ?/,'');
hoverEle=ele;
ele.className='hoverEle '+ele.className;
} else {
if(hoverEle) {
hoverElehoverEle.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;
currentDaycurrentDayZero=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>
</body>
</html>
//找到日期对应的node,然后由data的数据给元素添加样式啊什么的
}set('2012-11-14',{'color':'#f00', 'num': '24.5'})这样既可以满足需求,日期控件也基本不用改什么,改了也不会影响用在其它地方