간단한 수평 자바스크립트 날짜 control_time 및 날짜

var logDateControl=(function(){
var curSelEl; //현재 선택된 날짜
var styleData=[],dataStyle={};
//다음과 같은 요소를 가져옵니다. 지정된 id
var $=function(id){return document.getElementById(id)}
//지정된 날짜의 주를 계산합니다(기본값은 현재 날짜). 이 계산 방법은 더 엄격하고 정확합니다. 🎜> var calWeek= function(dt){
var calDay=dt||new Date(); //계산할 현재 시간
var firstDay=new Date(calDay.getFullYear(),0,1 ); //올해 첫날
//지금이 무슨 날인지 계산, 00:00이 하루의 시작
var daysAll=Math.floor((calDay-firstDay)/1000/ 60/60/24) 1;
//새해의 첫날은 무슨 요일인가요?
var firstDayWeekday=firstDay.getDay()
//결과는 월요일에 추가됩니다. 후속 계산을 용이하게 하기 위한 첫 번째 주
var diffDay=firstDayWeekday= =0?6:firstDayWeekday-1;
daysAll=daysAll diffDay
return Math.ceil(daysAll/7);
}
//월의 일수 계산, 연도는 4자리, 월은 1~2자리(1월은 0과 같은 js 날짜 형식이어야 함), 데이터가 불법입니다. 그리고 -1을 반환합니다
var getDaysLen=function(year,month){
if(!( /^d{4}$/.test(year)&&/^d{1,2}$/.test (월))){return -1}
var MonthDays=[31,28,31,30 ,31,30,31,31,30,31,30,31]
//2월 29일 존재
if(month==1&&new Date(year,1,29).getMonth()== 1){monthDays[1]=29}
return MonthDays[month]
}
//표시 날짜 목록에서 연도와 월을 전달합니다(매일 월을 전달합니다.예를 들어 2)에 2월이 전달되고 표시 위치는
var displayDayList=function(year,month,pos){
var daysList=[]
varcells1=$(pos).rows [0] .cells;
varcells2=$(pos).rows[1].cells;
var daysArr=['日','一','two','三','4' ,'五','六'];
//다음 월-1은 js 월 표현으로 변환됩니다.
for(var i=1,l=getDaysLen(year,--month) 1;i< l;i ) {
var wd=new Date(year,month,i).getDay()
cells1[i-1].className=""
if(wd==0| |wd== 6){cells1[i-1].className="weekEnd";} //주말을 위한 특별한 스타일 추가
//_oldCls는 현재 날짜의 기본 스타일을 저장합니다
cells1[i-1 ].innerText=daysArr[ wd];
cells2[i-1].className="unSelectDay";
cells2[i-1].setAttribute("_oldCls","unSelectDay")
cells2 [i-1].innerText=i>9?i:"0" i;
//사용자 정의 스타일 일치
var dtStr=year "|" (월 1)
if((", " styleData.join(',') ",").indexOf("," dtStr ",")>-1){
cells2[i-1].className="unSelectDay " dataStyle[dtStr];
cells2[i-1].setAttribute("_oldCls","unSelectDay " dataStyle[dtStr]);
}
}
//당월인 경우 , 현재 날짜 선택
if( new Date().getMonth()==month){
curSelEl=cells2[new Date().getDate()-1]
curSelEl.className=" selectDay";
}
for(var j=i-1;j<31;j ){
cells1[j].className=cells2[j].className="";
cells1 [j].innerHTML=cells2[j] .innerHTML=" "; 날짜 내용을 저장하는 DOM 요소를 직접 전달할 수도 있고, 클릭 위치에 따라 함수가 결정될 수도 있습니다.
varchangeInfo=function(e) {
e=e||event;
var el=e.target|| e.srcElement||e; //마지막 e:는 수신 객체일 수 있습니다.
var day=el.innerText;
if(!/^d{1,2}$/.test(day) ) return; //날짜가 아니면 아무것도 하지 않습니다
//이전에 선택한 날짜의 스타일을 복원합니다
if(curSelEl){curSelEl.className=curSelEl.getAttribute("_oldCls")}
curSelEl=el ; //현재 처리된 요소 저장
//선택한 날짜의 스타일 업데이트
el. className="selectDay";
var dt=new Date($("year").value,$("month").value-1,day)
//정보 업데이트
$( "day").value=day; //날짜
$("weekday").value=['day','One','Two','Three','Four','Five',' Six'][dt.getDay()]; //요일
$("week").value= calWeek(dt) //주의 주
}
//초기화
window.attachEvent("onload",function(){
var curDate=new Date(),curYear=curDate.getFullYear();
//상위 및 하위 10년 표시
(var i=-10;i<10;i ){$("year").add(new Option(curYear i,curYear i)) }
$("year").selectedIndex=10; 기본적으로 현재 연도가 선택됩니다
$("month").selectedIndex=curDate.getMonth(); //현재 월
$("day ").value=curDate.getDate() // 현재 날짜
$("weekday").value=['日','一','two','三','4','五','Saturday'][curDate.getDay()] ; //현재 요일
$("week").value=calWeek(); //현재 주
//날짜 또는 연도 변경 날짜 목록 업데이트
$("연도 ").onchange=$("month").onchange=function(){displayDayList($("year").value,$("month").value,"daysList ")};
//이번 달의 날짜 목록을 표시하고 오늘 날짜를 강조 표시합니다.
displayDayList(curDate.getFullYear(),curDate.getMonth() 1,"daysList")

//외부적으로 스타일을 설정하기 위한 인터페이스입니다.
//형식: ([2007,10,12],"color:#f00") ([[2007,10,20],[2007,11,25]],"color:#00f")
//월이 10보다 작으면 0을 가져오지 마세요.
var setDateStyle=function(dateArr,style){
if(typeof dateArr!="object")return; 인스턴스 오브 배열){
if(dateArr[0] 인스턴스 오브 배열){
for(var i=0;i }
var dataStr= dateArr.join('|');
styleData.push(dataStr)
dataStyle[dataStr]=style
return; //외부 인터페이스
return {setDateStyle:setDateStyle}
})();
//테스트 스타일 설정
logDateControl.setDateStyle([[2007,12,15],[2007,11, 12]], "테스트");