네 이 티 브 JS 달력 구성 요소 의 예제 코드 구현
구성 요소 의 재 활용 성 을 위해 서 는 대상 을 대상 으로 하 는 사상 이 필요 하 다.
모든 달력 구성 요 소 는 하나의 달력 대상 입 니 다.주로 날짜 선택 상자,날짜 제어 표시 줄,그리고 달력 칸 을 포함 합 니 다.날짜 제어 표시 줄 과 달력 칸 의 날짜 가 동기 화 되 는 변 화 를 유지 하기 위해 날짜 제어 표시 줄 과 달력 의 모든 칸 에는 Date 속성 이 포함 되 어야 합 니 다.달력 의 칸 을 클릭 하여 칸 에 저 장 된 Date 속성 을 함수 매개 변수 로 합 니 다.함수 가 날짜 제어 표시 줄 을 바 꾸 는 시간 을 호출 합 니 다.마찬가지 로 날짜 제어 표시 줄 의 시간 이 변 할 때 도 Date 속성 을 매개 변수 호출 함수 로 하고 함수 가 달력 칸 을 다시 그립 니 다.
코드:
function Calendar(parentId) {
this.parentElement = document.getElementById(parentId);
this.init();
}
Calendar.prototype = {
init: function() {
this.contains = document.createElement("div");
this.contains.onselectstart = function(){return false}; //
this.dateInput = document.createElement("input");
this.datePicker = document.createElement("div");
this.showDateBar = document.createElement("div");
this.dateBox = document.createElement("div");
this.icon = document.createElement("i");
this.contains.className = 'datepicker-container';
this.dateInput.className = 'date-input';
this.dateInput.readOnly = true;
var parent = this;
this.dateInput.onclick = function(event){
parent.onDateInputClick(event); //
};
this.contains.onblur = function(){
parent.datePicker.style.display = 'none';
}
this.datePicker.className = 'date-picker';
this.datePicker.style.display = 'none';
this.showDateBar.className = 'show-date';
this.dateBox.className = 'date-box';
this.icon.className = 'date-icon';
this.icon.innerHTML = '\'; //iconfont ，
this.datePicker.appendChild(this.showDateBar);
this.datePicker.appendChild(this.dateBox);
this.contains.appendChild(this.dateInput);
this.contains.appendChild(this.icon);
this.contains.appendChild(this.datePicker);
this.parentElement.appendChild(this.contains);
},
}
drawShowDateBar: function(parentElement){
var parent = this;
var nowDate = new Date();
parentElement.date = nowDate;
var nowYear = nowDate.getFullYear();
var nowMonth = nowDate.getMonth();
var nowDay = nowDate.getDate();
//showDateBar
var contentStr ='<div class="year-input"><span>'+nowYear+' </span><i class="select-year-btn">Z</i><ul class="year-select-box" style="display : none">';
for(var i=0;i<150;i++){
contentStr+='<li>'+(i+1900)+' </li>';
}
contentStr+='</ul></div>'
+'<div class="month-input"><i class="prev-month">[</i><select class="months-options">'
for(var i=0;i<12;i++){
contentStr+='<option>'+(i+1)+' </option>';
}
contentStr+='</select><i class="next-month">\</i></div>'
+'<div class="day-input"><i class="prev-day">[</i><select class="days-options"></select>'
+'<i class="next-day">\</i></div>'
+'<button class="today-btn"> </button>'
+'<div class="days-title">';
var weekday = [' ', ' ', ' ', ' ', ' ', ' ', ' '];
for (var i = 0; i < 7; i++) {
contentStr+='<span class="day-title">'+weekday[i]+'</span>';
}
contentStr+='</div>';
parentElement.innerHTML = contentStr;
this.changeShowDateBar(nowDate); // showTimeBar ， ，
var yearInput = parentElement.firstChild;
//
yearInput.onclick = function(){ //target this target ，this
var ul = this.lastChild;
ul.style.display==='none'||ul.style.display==='none'? ul.style.display='inline-block':ul.style.display='none';
};
//
var yearSelectBox = yearInput.lastChild;
var yearLi = yearSelectBox.children;
for(var i=0;i<yearLi.length;i++){
yearLi[i].onclick = function(){
parent.showDateBar.date.setFullYear(this.innerText.slice(0,-1));
parent.changeShowDateBar(parent.showDateBar.date); // ， ， ，
};
}
// month
var monthInput = yearInput.nextSibling;
monthInput.firstChild.onclick = function(){
var monthOptions = this.nextSibling;
if(monthOptions.selectedIndex>0){
parent.showDateBar.date.setMonth(--monthOptions.selectedIndex);
}else{
monthOptions.selectedIndex = 11;
parent.showDateBar.date.setFullYear(parent.showDateBar.date.getFullYear()-1);
parent.showDateBar.date.setMonth(11);
}
parent.changeShowDateBar(parent.showDateBar.date);
};
monthInput.lastChild.onclick = function(){
var monthOptions = this.previousSibling;
if(monthOptions.selectedIndex<11){
parent.showDateBar.date.setMonth(++monthOptions.selectedIndex);
}else{
monthOptions.selectedIndex = 0;
parent.showDateBar.date.setFullYear(parent.showDateBar.date.getFullYear()+1);
parent.showDateBar.date.setMonth(0);
}
parent.changeShowDateBar(parent.showDateBar.date);
}
monthInput.children[1].onchange = function(){
parent.showDateBar.date.setMonth(this.selectedIndex);
parent.changeShowDateBar(parent.showDateBar.date)
};
// day
var dayInput = monthInput.nextSibling;
dayInput.firstChild.onclick = function(){
var dayOptions = this.nextSibling;
if(dayOptions.selectedIndex>0){
parent.showDateBar.date.setDate(dayOptions.selectedIndex--);
}else{
parent.showDateBar.date.setMonth(parent.showDateBar.date.getMonth()-1);
parent.showDateBar.date.setDate(parent.getDaysOfMonth(parent.showDateBar.date));
}
parent.changeShowDateBar(parent.showDateBar.date);
};
dayInput.lastChild.onclick = function(){
var dayOptions = this.previousSibling;
if(dayOptions.selectedIndex < dayOptions.length-1){
dayOptions.selectedIndex++;
parent.showDateBar.date.setDate(dayOptions.selectedIndex+1);
}else{
parent.showDateBar.date.setDate(1);
parent.showDateBar.date.setMonth(parent.showDateBar.date.getMonth()+1);
}
parent.changeShowDateBar(parent.showDateBar.date);
};
dayInput.children[1].onchange = function(){
parent.showDateBar.date.setDate(this.selectedIndex+1);
parent.changeShowDateBar(parent.showDateBar.date)
};
//
var todayBtn = dayInput.nextSibling;
todayBtn.onclick = function(){
parent.drawPicker(new Date());
parent.changeShowDateBar(new Date());
}
},
날짜 제어 막대 가 초기 화 되 거나 쇼 데이트 바 의 데이트 를 변경 할 때 changeshow 데이트 바 함 수 를 호출 합 니 다.이 함 수 는 들 어 오 는 날짜 에 따라 날짜 제어 판'일'드 롭 다운 바 의 일 수 를 변경 합 니 다.매달 일수 가 다 르 기 때문에 들 어 오 는 날짜 에 따라 변경 해 야 합 니 다.들 어 오 는 날짜 에 대응 하 는 달 이 얼마나 되 는 지 계산 하고 getDaysOfMonth 함수 로 계산 합 니 다.
//
getDaysOfMonth: function(primalDate) {
var date = new Date(primalDate); // ， date
var month = date.getMonth();
var time = date.getTime(); // month+1,
var newTime = date.setMonth(month + 1);
return Math.ceil((newTime - time) / (24 * 60 * 60 * 1000));
},
changeShowDateBar : function(date){
var yearInput = this.showDateBar.firstChild;
var monthInput = yearInput.nextSibling;
var dayInput = monthInput.nextSibling;
yearInput.firstChild.innerText = date.getFullYear()+' ';
var monthsOptions = monthInput.firstChild.nextSibling;
monthsOptions.selectedIndex = date.getMonth();
var daysOptions = dayInput.firstChild.nextSibling;
var days = this.getDaysOfMonth(date);
var dayStr = '';
for(var i=1;i<=days;i++){
dayStr+='<option>'+i+' </option>';
}
daysOptions.innerHTML = dayStr;
// console.log(date.toLocaleDateString()+'changeShowDateBar');
daysOptions.selectedIndex = date.getDate()-1;
this.drawPicker(date);
},
달력 칸 을 그립 니 다.
drawPicker 함 수 는 들 어 오 는 날짜 에 따라 달력 칸 을 그립 니 다.
drawPicker: function(primalDate) {
var date = new Date(primalDate); // ， date
var nowMonth = date.getMonth()+1;
var nowDate = date.getDate();
var spanContainer = [];
var dateBox = this.dateBox;
dateBox.innerHTML = '';
var time = date.getTime();
var days = this.getDaysOfMonth(date); //
date.setDate(1); // date 1
var firstDay = date.getDay(); // 1
for (var i = 0; i < firstDay; i++) { // 1 ( ), 1
var tempDate = new Date(date);
tempDate.setDate(i - firstDay + 1);
var span = document.createElement("span");
span.className = "unshow";
spanContainer.push({span : span, date : tempDate});
}
for (var i = 1; i <= days; i++) { //1 1
var span = document.createElement("span");
span.className = 'show';
spanContainer.push({span : span, date : new Date(date)});
date.setDate(i + 1);
}
for (var i = date.getDay(); i <= 6; i++) { //
var span = document.createElement("span");
span.className = "unshow";
spanContainer.push({span : span, date : new Date(date)});
date.setDate(date.getDate()+1);
}
for(var i=0;i<spanContainer.length;i++){
var spanBox = spanContainer[i];
var span = spanBox.span;
span.year = spanBox.date.getFullYear(); // span
span.month = spanBox.date.getMonth() + 1;
span.date = spanBox.date.getDate();
span.innerText = spanBox.date.getDate();
if(span.date === nowDate&&span.month === nowMonth) // span ， select
span.className+=" select";
var parent = this;
span.onclick = function(){ //
var target = event.target;
var selected = target.parentElement.getElementsByClassName("select");
for(var i=0 ;i<selected.length;i++){
selected[i].className = selected[i].className.replace(" select","");
};
target.className+=" select";
parent.changeDate(target.year, target.month, target.date);
parent.changeShowDateBar(new Date(target.year, target.month-1, target.date));
};
dateBox.appendChild(span); // span dateBox
}
this.changeDate(primalDate.getFullYear(), primalDate.getMonth()+1, primalDate.getDate())
return;
},
//
onDateInputClick: function(event) {
var target = event.target;
var value = target.value;
var datePicker = this.datePicker;
if(datePicker.style.display==='none'){ // js datePicker.style.display none， css none, display ""
datePicker.style.display = 'block';
}else{
datePicker.style.display = 'none';
return;
}
if (!value) this.drawShowDateBar(this.showDateBar); //
},
changeDate : function(year, month, date){
this.dateInput.value = year+"-"+(month<10?("0"+month):month)+"-"+(date<10?("0"+date):date);
},
좀 못 생 겼 는데..
실현 과정 에서 만난 문제.
프로젝트 원본 https://github.com/wenkeShi/js-calendar
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
