純javascript作成カレンダーコントロール
11842 ワード
以前はカレンダーのコントロールを使うのはすべて直接ネット上から1セットのソースコードをダウンロードして使用して、心の中はずっと梗があって、自分でカレンダーのコントロールを書きたいと思って、最近ちょうど興味が来て、時間の上で許可して、そこで自分で1つを模索して書いて、機能はまだ完備して、インタフェースは間に合いました.最も言う価値のある点は、inputコントロールの内部の右側にボタンを表示させることです.私は直接inputに背景を付けて、inputの枠を外して実現しました.
これは初版で、これから純javascript版を作るつもりで、これからJQueryでセットを作るつもりです.
これは初版で、これから純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];
}
-+
-+
, 。