シンプルな水平方向の JavaScript 日付 control_time と date

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.getFull Year(),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; // 計算結果を返します。
}
//月の日数を計算します。年は 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=[];
var cell1=$(pos).rows [0] .cells;
var cell2=$(pos).rows[1].cells;
var daysArr=['日','一','二','三','四' ,'五','六'];
//次の month-1 は js の月表現に変換されます
for(var i=1,l=getDaysLen(year,--month) 1;i< l;i ) {
var wd=new Date(年,月,i).getDay();
cell1[i-1].className="";
if(wd==0| |wd== 6){cells1[i-1].className="weekEnd";} //週末に特別なスタイルを追加します
//_oldCls は現在の日付のデフォルトのスタイルを保存します
cells1[i-1 ].innerText=daysArr[ wd];
セル2[i-1].className="unSelectDay";
セル2[i-1].setAttribute("_oldCls","unSelectDay"); [i-1]. innerText=i>9?i:"0" i;
// ユーザー定義のスタイルに一致します
var dtStr=year "|" (月 1) "|" i; > if((", " styleData.join(',') ",").indexOf("," dtStr ",")>-1){
cell2[i-1].className="unSelectDay " dataStyle[dtStr];
cell2[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 セル1[j].className=cells2[j].className="";
セル1 [j].innerHTML=cells2[j] .innerHTML=" "; 日付コンテンツを保存する DOM 要素を直接渡すことも、クリック位置に基づいて関数が決定することもできます
var changeInfo=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($("年").value,$("月").value-1,day);
//情報を更新します
$( "day").value=day; //Date
$("weekday").value=['day ','One','Two','Three','Four','Five',' Six'][dt.getDay()]; //曜日
$("week").value= calWeek(dt) //曜日
}
//初期化
window.attachEvent("onload",function(){
var curDate=new Date(),cur Year=curDate.getFull Year();
//上位 10 年と下位 10 年を表示します
(var i=-10;i $("year").selectedIndex=10;デフォルトでは現在の年が選択されます
$("month").selectedIndex=curDate.getMonth() //現在の月
$("day ").value=curDate.getDate();現在の日付
$("weekday").value=['日','一','二','三','四','五','土曜日'][curDate.getDay()] ; //現在の曜日
$("week").value=calWeek(); //現在の週
//日付または年を変更します 日付リストを更新します
$("year ").onchange=$("月").onchange=function(){displayDayList($("年").value,$("月").value,"daysList ")};
//今月の日付のリストを表示し、今日の日付を強調表示します
displayDayList(curDate.getFull Year(),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);
}
}
//外部インターフェース
return {setDateStyle:setDateStyle}
})();
// テストスタイル設定
logDateControl.setDateStyle([[2007,12,15],[2007,11, 12]], "テスト");