純javascript作成カレンダーコントロール

11842 ワード

以前はカレンダーのコントロールを使うのはすべて直接ネット上から1セットのソースコードをダウンロードして使用して、心の中はずっと梗があって、自分でカレンダーのコントロールを書きたいと思って、最近ちょうど興味が来て、時間の上で許可して、そこで自分で1つを模索して書いて、機能はまだ完備して、インタフェースは間に合いました.最も言う価値のある点は、inputコントロールの内部の右側にボタンを表示させることです.私は直接inputに背景を付けて、inputの枠を外して実現しました.
これは初版で、これから純javascript版を作るつもりで、これからJQueryでセットを作るつもりです. Date.prototype.toFormatString = function(){ var result = this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + this.getDate(); return result; }; var today = new Date(); var month_big = new Array("1","3","5","7","8","10","12"); // var month_small = new Array("4","6","9","11"); // // array obj , true, false function array_contain(array, obj){ for (var i = 0; i < array.length; i++){ if (array[i] == obj) return true; } return false; } // year , true, false function isLeapYear(year){ var a = year % 4; var b = year % 100; var c = year % 400; if( ( (a == 0) && (b != 0) ) || (c == 0) ){ return true; } return false; } function hideCalendar(){ var calbody = document.getElementById("cal_body"); cal_body.style.display = "none"; } function showCalendar(){ var calbody = document.getElementById("cal_body"); var style = getDefaultStyle(calbody,"display"); if(style == "none") cal_body.style.display = "block"; if(style == "block") cal_body.style.display = "none"; var date_text = document.getElementById("date_text"); var val = date_text.value; init(val); } function init(val){ clearCube(); var temp_date; var date_text = document.getElementById("date_text"); if(val == ""){ temp_date = today; date_text.value = today.toFormatString(); } else{ temp_date = new Date(val); } var year = temp_date.getFullYear(); var month = temp_date.getMonth() + 1; var date = temp_date.getDate(); temp_date.setDate(1); var start = temp_date.getDay() + 7; var end; if(array_contain(month_big, month)){ end = start + 31; } else if(array_contain(month_small, month)){ end = start + 30; } else{ if(isLeapYear(year)){ end = start + 29; } else{ end = start + 28; } } for(var i = start; i < end; i++){ var cube = document.getElementsByClassName("cube").item(i); cube.innerHTML = i - start + 1; cube.style.cursor = "pointer"; cube.onmouseover = function(){ this.style.backgroundColor = '#0FF'; } if(date == (i - start + 1)) cube.style.backgroundColor = '#0FF'; else{ cube.onmouseout = function(){ this.style.backgroundColor = ''; } } cube.onclick = function(){ date_text.value = year + "-" + month + "-" + this.innerHTML; cal_body.style.display = "none"; } } document.getElementById("text_year").value = year; document.getElementById("text_month").value = month; } function clearCube(){ for(var i=7; i < 49; i++){ var cube = document.getElementsByClassName("cube").item(i); cube.innerHTML = ""; cube.style.backgroundColor = ""; } } function yearDown(){ if(isValidated()){ var old_year = parseInt(document.getElementById("text_year").value); if(old_year > 1960){ var year = old_year - 1; var month = parseInt(document.getElementById("text_month").value); var val = year + "-" + month + "-" + 1; init(val); } } } function yearUp(){ if(isValidated()){ var old_year = parseInt(document.getElementById("text_year").value); if(old_year < 2050){ var year = old_year + 1; var month = parseInt(document.getElementById("text_month").value); var val = year + "-" + month + "-" + 1; init(val); } } } function monthDown(){ if(isValidated()){ var old_month = parseInt(document.getElementById("text_month").value) if(old_month > 1){ var year = parseInt(document.getElementById("text_year").value); var month = old_month - 1; var val = year + "-" + month + "-" + 1; init(val); } else { var year = parseInt(document.getElementById("text_year").value) - 1; var month = 12; var val = year + "-" + month + "-" + 1; init(val); } } } function monthUp(){ if(isValidated()){ var old_month = parseInt(document.getElementById("text_month").value) if(old_month < 12){ var year = parseInt(document.getElementById("text_year").value); var month = parseInt(document.getElementById("text_month").value) + 1; var val = year + "-" + month + "-" + 1; init(val); } else { var year = parseInt(document.getElementById("text_year").value) + 1; var month = 1; var val = year + "-" + month + "-" + 1; init(val); } } } function isValidated(){ var year = document.getElementById("text_year").value; var month = document.getElementById("text_month").value; if(isNaN(year) || isNaN(month)){ alert(" / "); return false; } else{ if(year%1 != 0 || month%1 != 0){ alert(" / "); return false; } else{ year = parseInt(year); if(year < 1960 || year > 2050){ alert(" 1960~2050 !"); return false; } else if(month < 1 || month >12){ alert(" !"); return false; } else{ return true; } } } } function changed(){ if(isValidated()){ var year = document.getElementById("text_year").value; var month = document.getElementById("text_month").value; var val = year + "-" + month + "-" + 1; init(val); } } function getDefaultStyle(obj,attribute){ return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute]; }
-
+
-
+

, 。