578 lines
21 KiB
JavaScript
578 lines
21 KiB
JavaScript
$(function () {
|
|
if ($(".input_calendar").length > 0) {
|
|
setTimeout(function () {
|
|
calendar();
|
|
}, 100)
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
// header, footer 공통 영역 불러오기
|
|
window.addEventListener('load', function () {
|
|
var allElements = document.getElementsByTagName('*');
|
|
Array.prototype.forEach.call(allElements, function (el) {
|
|
var includePath = el.dataset.includePath;
|
|
if (includePath) {
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function () {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
header();
|
|
el.outerHTML = this.responseText;
|
|
|
|
}
|
|
};
|
|
xhttp.open('GET', includePath, true);
|
|
xhttp.send();
|
|
}
|
|
});
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var calendarEl = document.getElementById('calendar');
|
|
|
|
if ($(".wrap").find("#calendar").length > 0) {
|
|
var calendar = new FullCalendar.Calendar(calendarEl, {
|
|
initialView: 'dayGridMonth',
|
|
titleFormat: function (date) {
|
|
year = date.date.year;
|
|
month = date.date.month + 1;
|
|
|
|
return year + "년 " + month + "월";
|
|
},
|
|
locale: "ko",
|
|
buttonText: {
|
|
today: "오늘"
|
|
},
|
|
height: "auto",
|
|
dayCellContent: function (info) {
|
|
var number = document.createElement('a');
|
|
number.classList.add('fc-daygrid-day-number');
|
|
number.innerHTML = info.dayNumberText.replace("일", "");
|
|
if (info.view.type === 'dayGridMonth') {
|
|
return {
|
|
html: number.outerHTML
|
|
};
|
|
}
|
|
return {
|
|
domNodes: []
|
|
}
|
|
},
|
|
events: [{
|
|
title: '조정절차 관련 일정',
|
|
start: '2024-10-15',
|
|
}]
|
|
});
|
|
calendar.render();
|
|
}
|
|
|
|
});
|
|
|
|
// 달력팝업
|
|
function calendar() {
|
|
|
|
// 캘린더 고유 클래스 추가
|
|
$(".input_calendar").not(".start_date,.end_date").each(function (idx, itm) {
|
|
idx += 1;
|
|
$(itm).addClass("input_calendar" + idx);
|
|
});
|
|
|
|
$(".start_date").each(function (idx, itm) {
|
|
idx += 1;
|
|
$(itm).addClass("start_date" + idx);
|
|
$(itm).attr("id", "start_date" + idx);
|
|
});
|
|
|
|
$(".end_date").each(function (idx, itm) {
|
|
idx += 1;
|
|
$(itm).addClass("end_date" + idx);
|
|
$(itm).attr("id", "end_date" + idx);
|
|
$(itm).find(".duet-date__input").attr("id", "end_date" + idx);
|
|
});
|
|
|
|
setTimeout(function () {
|
|
|
|
calendarTitle(); // 달력 타이틀
|
|
calednarCaption(); // 달력 caption
|
|
}, 100)
|
|
|
|
|
|
|
|
// input value 값 추가, 검색 시 input value 값 안없어지게.
|
|
var start_duetValue = $("duet-date-picker.start_date").val();
|
|
var end_duetValue = $("duet-date-picker.end_date").val();
|
|
var startcalendar_name = $(".start_date").attr("name");
|
|
var endcalendar_name = $(".end_date").attr("name");
|
|
|
|
//달력 입력창 최대 입력 수 10자 제한('.' 포함)
|
|
$("input.duet-date__input").attr("maxlength", "10");
|
|
|
|
var DATE_FORMAT = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/
|
|
var duetdateleng = $("duet-date-picker").length + 1;
|
|
|
|
var calendarNum = [];
|
|
var startDateNum = [];
|
|
var endDateNum = [];
|
|
setTimeout(function () {
|
|
for (var i = 1; i < duetdateleng; i++) {
|
|
calendarNum[i] = document.querySelector(".input_calendar" + i);
|
|
if (calendarNum[i] !== null) {
|
|
calendarNum[i].dateAdapter = {
|
|
parse: function parse() {
|
|
var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ""
|
|
var createDate = arguments.length > 1 ? arguments[1] : undefined
|
|
var matches = value.match(DATE_FORMAT)
|
|
|
|
if (matches) {
|
|
return createDate(matches[3], matches[2], matches[1])
|
|
}
|
|
},
|
|
format: function format(date) {
|
|
if (date.getMonth() < 9) {
|
|
if (date.getDate() < 10) {
|
|
return ""
|
|
.concat(date.getFullYear(), ".")
|
|
.concat('0', date.getMonth() + 1, ".")
|
|
.concat('0', date.getDate())
|
|
} else {
|
|
return ""
|
|
.concat(date.getFullYear(), ".")
|
|
.concat('0', date.getMonth() + 1, ".")
|
|
.concat(date.getDate())
|
|
}
|
|
} else {
|
|
if (date.getDate() < 10) {
|
|
return ""
|
|
.concat(date.getFullYear(), ".")
|
|
.concat(date.getMonth() + 1, ".")
|
|
.concat('0', date.getDate())
|
|
} else {
|
|
return ""
|
|
.concat(date.getFullYear(), ".")
|
|
.concat(date.getMonth() + 1, ".")
|
|
.concat(date.getDate())
|
|
}
|
|
}
|
|
},
|
|
}
|
|
|
|
// 달력 플러그인 실행
|
|
calendarNum[i].localization = {
|
|
placeholder: '날짜 입력',
|
|
selectedDateMessage: 'Selected date is',
|
|
prevMonthLabel: '이전 달 보기',
|
|
nextMonthLabel: '다음 달 보기',
|
|
monthSelectLabel: '달 선택',
|
|
yearSelectLabel: '년도 선택',
|
|
closeLabel: '달력 닫기',
|
|
dayNames: ['일', '월', '화', '수', '목', '금', '토'],
|
|
monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
|
|
monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
|
|
identifier: "input_date",
|
|
name: "input_date"
|
|
}
|
|
|
|
// 달력 닫았을 때 input, input[type=hidden]에 value 값 넣어주기
|
|
calendarNum[i].addEventListener("duetClose", function (e) {
|
|
startDt = e.target;
|
|
startDtVal = e.target.value;
|
|
startSub = startDtVal.replace(/\-/g, '');
|
|
var inputName = $(this).attr("name");
|
|
});
|
|
|
|
setTimeout(function () {
|
|
$("duet-date-picker").not(".start_date,.end_date").find(".duet-date__input").each(function (idx, itm) {
|
|
idx += 1;
|
|
$(itm).attr("name", "input_date" + idx);
|
|
$(itm).attr("id", "input_date" + idx);
|
|
});
|
|
$("duet-date-picker .duet-date__input").attr('onkeydown', 'this.value=dateSetting(this.value);');
|
|
}, 100)
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
// 시작날짜
|
|
|
|
for (var i = 1; i < duetdateleng; i++) {
|
|
startDateNum[i] = document.querySelector(".start_date" + i);
|
|
if (startDateNum[i] !== null) {
|
|
startDateNum[i].dateAdapter = {
|
|
parse: function parse() {
|
|
var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ""
|
|
var createDate = arguments.length > 1 ? arguments[1] : undefined
|
|
var matches = value.match(DATE_FORMAT)
|
|
|
|
if (matches) {
|
|
return createDate(matches[3], matches[2], matches[1])
|
|
}
|
|
},
|
|
format: function format(date) {
|
|
if (date.getMonth() < 9) {
|
|
if (date.getDate() < 10) {
|
|
return ""
|
|
.concat(date.getFullYear(), ".")
|
|
.concat('0', date.getMonth() + 1, ".")
|
|
.concat('0', date.getDate())
|
|
} else {
|
|
return ""
|
|
.concat(date.getFullYear(), ".")
|
|
.concat('0', date.getMonth() + 1, ".")
|
|
.concat(date.getDate())
|
|
}
|
|
} else {
|
|
if (date.getDate() < 10) {
|
|
return ""
|
|
.concat(date.getFullYear(), ".")
|
|
.concat(date.getMonth() + 1, ".")
|
|
.concat('0', date.getDate())
|
|
} else {
|
|
return ""
|
|
.concat(date.getFullYear(), ".")
|
|
.concat(date.getMonth() + 1, ".")
|
|
.concat(date.getDate())
|
|
}
|
|
}
|
|
},
|
|
}
|
|
|
|
// 달력 플러그인 실행
|
|
startDateNum[i].localization = {
|
|
placeholder: '날짜 입력',
|
|
selectedDateMessage: 'Selected date is',
|
|
prevMonthLabel: '이전 달 보기',
|
|
nextMonthLabel: '다음 달 보기',
|
|
monthSelectLabel: '달 선택',
|
|
yearSelectLabel: '년도 선택',
|
|
closeLabel: '달력 닫기',
|
|
dayNames: ['일', '월', '화', '수', '목', '금', '토'],
|
|
monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
|
|
monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
|
|
identifier: "start_date",
|
|
name: "start_date"
|
|
}
|
|
|
|
|
|
// 달력 닫았을 때 input, input[type=hidden]에 value 값 넣어주기
|
|
startDateNum[i].addEventListener("duetClose", function (e) {
|
|
startDt = e.target;
|
|
startDtVal = e.target.value;
|
|
startSub = startDtVal.replace(/\-/g, '');
|
|
var inputName = $(startDt).attr("id");
|
|
$(".start_date").each(function (idx, itm) {
|
|
$(this).find(".duet-date__input").attr("id", inputName);
|
|
/*$(this).find(".duet-date__input").attr("name", inputName);*/
|
|
$(this).find(".duet-date__input").attr("value", startDtVal);
|
|
/*$(this).find(".duet-date__input").next().attr("name", inputName + "_submit");*/
|
|
$(this).find(".duet-date__input").next().attr("value", startSub);
|
|
});
|
|
});
|
|
|
|
//날짜 값 바꼈을 때 시작일, 종료일 찾아 alert 띄우기
|
|
startDateNum[i].addEventListener("duetChange", function (e) {
|
|
startDt = e.target;
|
|
var startDateNum = startDt.id;
|
|
startDateNum = startDateNum.replace("start_date", "");
|
|
startDtVal = e.target.value;
|
|
// var n = i - 1;
|
|
var endDtVal = $(".end_date" + startDateNum).find(".duet-date__input").val();
|
|
endDtVal = endDtVal.replace(/[.]/gi, '');
|
|
startDtVal = startDtVal.replace(/[.]/gi, '');
|
|
if (startDtVal > endDtVal && endDtVal != "") {
|
|
e.target.value = "";
|
|
alert("시작일이 종료일보다 클 수 없습니다.");
|
|
} else {}
|
|
});
|
|
|
|
setTimeout(function () {
|
|
$("duet-date-picker.start_date .duet-date__input").each(function (idx, itm) {
|
|
idx += 1;
|
|
$(itm).attr("name", "start_date" + idx);
|
|
$(itm).attr("id", "start_date" + idx);
|
|
});
|
|
$("duet-date-picker .duet-date__input").attr('onkeydown', 'this.value=dateSetting(this.value);');
|
|
}, 100)
|
|
|
|
startDateNum[i].addEventListener("duetFocus", function (e) {
|
|
calendarSetting();
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
// 종료날짜
|
|
|
|
for (var i = 1; i < duetdateleng; i++) {
|
|
endDateNum[i] = document.querySelector(".end_date" + i);
|
|
if (endDateNum[i] !== null) {
|
|
endDateNum[i].dateAdapter = {
|
|
parse: function parse() {
|
|
var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ""
|
|
var createDate = arguments.length > 1 ? arguments[1] : undefined
|
|
var matches = value.match(DATE_FORMAT)
|
|
|
|
if (matches) {
|
|
return createDate(matches[3], matches[2], matches[1])
|
|
}
|
|
},
|
|
format: function format(date) {
|
|
if (date.getMonth() < 9) {
|
|
if (date.getDate() < 10) {
|
|
return ""
|
|
.concat(date.getFullYear(), ".")
|
|
.concat('0', date.getMonth() + 1, ".")
|
|
.concat('0', date.getDate())
|
|
} else {
|
|
return ""
|
|
.concat(date.getFullYear(), ".")
|
|
.concat('0', date.getMonth() + 1, ".")
|
|
.concat(date.getDate())
|
|
}
|
|
} else {
|
|
if (date.getDate() < 10) {
|
|
return ""
|
|
.concat(date.getFullYear(), ".")
|
|
.concat(date.getMonth() + 1, ".")
|
|
.concat('0', date.getDate())
|
|
} else {
|
|
return ""
|
|
.concat(date.getFullYear(), ".")
|
|
.concat(date.getMonth() + 1, ".")
|
|
.concat(date.getDate())
|
|
}
|
|
}
|
|
},
|
|
}
|
|
|
|
// 달력 플러그인 실행
|
|
endDateNum[i].localization = {
|
|
placeholder: '날짜 입력',
|
|
selectedDateMessage: 'Selected date is',
|
|
prevMonthLabel: '이전 달 보기',
|
|
nextMonthLabel: '다음 달 보기',
|
|
monthSelectLabel: '달 선택',
|
|
yearSelectLabel: '년도 선택',
|
|
closeLabel: '달력 닫기',
|
|
dayNames: ['일', '월', '화', '수', '목', '금', '토'],
|
|
monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
|
|
monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
|
|
identifier: "end_date",
|
|
name: "end_date"
|
|
}
|
|
|
|
// 달력 닫았을 때 input, input[type=hidden]에 value 값 넣어주기
|
|
endDateNum[i].addEventListener("duetClose", function (e) {
|
|
endDt = e.target;
|
|
endDtVal = e.target.value;
|
|
endSub = endDtVal.replace(/\-/g, '');
|
|
var inputName = $(this).attr("name");
|
|
console.log(inputName)
|
|
$(".end_date").each(function (idx, itm) {
|
|
$(itm).find(".duet-date__input").attr("id", inputName);
|
|
/*$(itm).find(".duet-date__input").attr("name", inputName);*/
|
|
$(itm).find(".duet-date__input").attr("value", endDtVal);
|
|
/*$(itm).find(".duet-date__input").next().attr("name", inputName + "_submit");*/
|
|
$(itm).find(".duet-date__input").next().attr("value", endSub);
|
|
});
|
|
});
|
|
|
|
//날짜 값 바꼈을 때 시작일, 종료일 찾아 alert 띄우기
|
|
endDateNum[i].addEventListener("duetChange", function (e) {
|
|
endDt = e.target;
|
|
endDtVal = e.target.value;
|
|
var endDateNum = endDt.id;
|
|
endDateNum = endDateNum.replace("end_date", "");
|
|
// var n = i - 1
|
|
var startDtVal = $(".start_date" + endDateNum).find(".duet-date__input").val();
|
|
startDtVal = startDtVal.replace(/[.]/gi, '');
|
|
endDtVal = endDtVal.replace(/[.]/gi, '');
|
|
//console.log(startDtVal,endDtVal)
|
|
//console.log("2",startDtVal,endDtVal);
|
|
if (endDtVal < startDtVal) {
|
|
e.target.value = "";
|
|
alert("종료일이 시작일보다 작을 수 없습니다.");
|
|
} else {}
|
|
});
|
|
|
|
setTimeout(function () {
|
|
$("duet-date-picker.end_date").each(function (idx, itm) {
|
|
idx += 1;
|
|
/*$(itm).attr("name", "end_date" + idx);*/
|
|
$(itm).attr("id", "end_date" + idx);
|
|
});
|
|
$("duet-date-picker .duet-date__input").attr('onkeydown', 'this.value=dateSetting(this.value);');
|
|
}, 100)
|
|
|
|
endDateNum[i].addEventListener("duetFocus", function (e) {
|
|
calendarSetting();
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
//input에 value 값 추가
|
|
$(".duet-date__input").focusout(function () {
|
|
var thisVal = $(this).val();
|
|
$(this).closest(".hydrated").attr("value", thisVal);
|
|
$(this).attr("value", thisVal);
|
|
$(this).next('input[type=hidden]').attr("value", thisVal);
|
|
/*var startVal = $('.startDate .duet-date__input').val();
|
|
var endVal = $('.endDate .duet-date__input').val();*/
|
|
|
|
var startName, endName;
|
|
|
|
|
|
if ($(this).closest(".hydrated").is(".start_date")) {
|
|
var startNum = $(this).closest(".start_date").attr("id");
|
|
startNum = startNum.replace("start_date", "");
|
|
var startVal = $('#start_date' + startNum).find('.duet-date__input').val();
|
|
var endVal = $('#end_date' + startNum).find('.duet-date__input').val();
|
|
startName = $('#start_date' + startNum);
|
|
endName = $('#end_date' + startNum);
|
|
calendarMsgKey(this, startVal, endVal, startName, endName);
|
|
} else if ($(this).closest(".hydrated").is(".end_date")) {
|
|
var endNum = $(this).closest(".end_date").attr("id");
|
|
endNum = endNum.replace("end_date", "");
|
|
var startVal = $('#start_date' + endNum).find('.duet-date__input').val();
|
|
var endVal = $('#end_date' + endNum).find('.duet-date__input').val();
|
|
startName = $('#start_date' + endNum).attr("id");
|
|
endName = $('#end_date' + endNum).attr("id");
|
|
calendarMsgKey(this, startVal, endVal, startName, endName);
|
|
}
|
|
});
|
|
|
|
|
|
|
|
}, 10)
|
|
|
|
function calendarMsgKey(ipt, startVal, endVal, startName, endName) {
|
|
startVal = startVal.replace(/[-]/gi, '');
|
|
endVal = endVal.replace(/[-]/gi, '');
|
|
if ($(ipt).closest(".input_calendar").is(".start_date") > 0) {
|
|
if (startVal > endVal && $(ipt).closest(".input_calendar").is(".start_date") == true && endVal != "") {
|
|
alert("시작일이 종료일보다 클 수 없습니다.");
|
|
ipt.value = "";
|
|
} else if (startVal > endVal && $(ipt).closest(".input_calendar").is(".end_date") == true && startVal != "") {
|
|
if ($("duet-date-picker.end_date").val() == "") {
|
|
|
|
} else {
|
|
alert("종료일이 시작일보다 작을 수 없습니다.");
|
|
ipt.value = "";
|
|
}
|
|
} else {}
|
|
} else {
|
|
if (startVal > endVal && $(ipt).is("#" + startName) == true && endVal != "") {
|
|
alert("시작일이 종료일보다 클 수 없습니다.");
|
|
ipt.value = "";
|
|
} else if (startVal > endVal && $(ipt).is("#" + endName) == true && startVal != "") {
|
|
if ($("duet-date-picker.end_date").val() == "") {
|
|
|
|
} else {
|
|
alert("종료일이 시작일보다 작을 수 없습니다.");
|
|
ipt.value = "";
|
|
}
|
|
} else {}
|
|
}
|
|
|
|
}
|
|
|
|
function dateSetting(objValue) {
|
|
var v = objValue.replace("--", "-");
|
|
//console.log(event.keyCode); // 한글쪽 - 189, 숫자키 쪽 109
|
|
if (v.match(/^\d{4}$/) !== null) {
|
|
if (event.keyCode == "8") {
|
|
// 백스페이스 키를 누를 때 '.' 안생기게
|
|
} else {
|
|
v = v + '-';
|
|
}
|
|
} else if (v.match(/^\d{4}\-\d{2}$/) !== null) {
|
|
if (event.keyCode == "8") {
|
|
// 백스페이스 키를 누를 때 '.' 안생기게
|
|
} else {
|
|
v = v + '-';
|
|
}
|
|
}
|
|
|
|
// '-' 막기
|
|
if (event.keyCode == "190" || event.keyCode == "110") {
|
|
event.preventDefault();
|
|
return v;
|
|
} else {}
|
|
|
|
|
|
return v;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
function calendarSetting() {
|
|
$('.calendar_wrap').each(function () {
|
|
$(this).find('.duet-date__input').attr('onkeydown', 'this.value=dateSetting(this.value);');
|
|
$(this).find('.duet-date__input').attr('onblur', 'this.value=dateSetting(this.value);');
|
|
});
|
|
}
|
|
|
|
function dateSetting(objValue) {
|
|
var v = objValue.replace("--", "-");
|
|
//console.log(event.keyCode); // 한글쪽 - 189, 숫자키 쪽 109
|
|
if (v.match(/^\d{4}$/) !== null) {
|
|
if (event.keyCode == "8") {
|
|
// 백스페이스 키를 누를 때 '.' 안생기게
|
|
} else {
|
|
v = v + '-';
|
|
}
|
|
} else if (v.match(/^\d{4}\-\d{2}$/) !== null) {
|
|
if (event.keyCode == "8") {
|
|
// 백스페이스 키를 누를 때 '.' 안생기게
|
|
} else {
|
|
v = v + '-';
|
|
}
|
|
}
|
|
|
|
// '-' 막기
|
|
if (event.keyCode == "190" || event.keyCode == "110") {
|
|
event.preventDefault();
|
|
return v;
|
|
} else {}
|
|
|
|
|
|
return v;
|
|
}
|
|
|
|
function calednarCaption() {
|
|
// 이전, 다음달 클릭 시 table caption 변경
|
|
$(".duet-date__prev").on("click", function () {
|
|
var monthText = $(this).closest(".duet-date__dialog-content").find(".duet-date__select--month").val();
|
|
var yearText = $(this).closest(".duet-date__dialog-content").find(".duet-date__select--year").val();
|
|
monthText = Number(monthText) + 1;
|
|
monthText = monthText + "월";
|
|
yearText = yearText + "년 ";
|
|
$(this).closest(".duet-date__dialog-content").find(".duet-date__table caption").remove();
|
|
$(this).closest(".duet-date__dialog-content").find(".duet-date__table").prepend("<caption>" + yearText + monthText + " 달력입니다.</caption>");
|
|
});
|
|
|
|
$(".duet-date__next").on("click", function () {
|
|
var monthText = $(this).closest(".duet-date__dialog-content").find(".duet-date__select--month").val();
|
|
var yearText = $(this).closest(".duet-date__dialog-content").find(".duet-date__select--year").val();
|
|
monthText = Number(monthText) + 1;
|
|
monthText = monthText + "월";
|
|
yearText = yearText + "년 ";
|
|
$(this).closest(".duet-date__dialog-content").find(".duet-date__table caption").remove();
|
|
$(this).closest(".duet-date__dialog-content").find(".duet-date__table").prepend("<caption>" + yearText + monthText + " 달력입니다.</caption>");
|
|
});
|
|
}
|
|
|
|
function calendarTitle() {
|
|
setTimeout(function () {
|
|
$(".start_date .duet-date__input").attr("title", "시작날짜를 YYYY.MM.DD 형식으로 입력해주세요");
|
|
$(".end_date .duet-date__input").attr("title", "종료날짜를 YYYY.MM.DD 형식으로 입력해주세요");
|
|
|
|
//웹접근성>달력 버튼 title추가
|
|
$(".duet-date__input-wrapper .duet-date__toggle").attr("title", "달력팝업 열림");
|
|
}, 100)
|
|
} |