[JavaScript] 셀렉트 박스의 시간 자동 비교 및 선택기능[JavaScript] 셀렉트 박스의 시간 자동 비교 및 선택기능

Posted at 2019.05.23 19:44 | Posted in JavaScript & jQuery/JavaScript




해당 포스팅은 제작중인 사이트 에 추가하기 위해 제작한 샘플 들이다.


페이지 접속시 시간값을 선택하는 셀렉트 박스의 경우,


바로 다음 시간대를 선택해 주는 기능과, 지나간 시간의 선택을 방지하는 기능이다.


두개의 기능을 따로따로 분리한 다음에 마지막 내용에서 합친것이니


그냥 완성된 하나가 필요한 사람의 경우 맨아래 코드를 참고하면 된다.








■ 페이지 시작시 셀렉트 박스 시간 자동선택




홈페이지에서 당일 예약을 받는 경우,


예약 가능한 다음 타임을 자동으로 선택되게끔 해야한 경우가 있어 샘플로 만들어본 코드이다.


페이지 접속과 동시에 시간을 선택하는 옵션을 가진 셀렉트 박스의 리스트 중에서


선택 가능한 다음 시간을 자동으로 선택하는 기능을 수행한다.



<html>

<head>

<title>:: JavaScript 시간 자동 선택 ::</title>

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {

const toDay = new Date();

const toYear = toDay.getFullYear().toString();

// getMonth()의 경우 0 ~ 11의 값을 출력하기에 기본적으로 항상 +1을 해서 한달을 더하지만

// 해당 예제에서는 그대로의 값을 필요로 하기에 +1을 하지 않는다.

// const toMonth = (toDay.getMonth() + 1).toString();

              const toMonth = toDay.getMonth().toString();

     

              const toDate = toDay.getDate().toString();

     

               /* 

                * 현재 시간(Hour)과 분(Minute)은 사용하지 않는다.

                * const toHour = toDay.getHours().toString();

                * const toMinute = toDay.getMinutes().toString();

                */

     

const toSecond = toDay.getSeconds().toString();

     

              lastTimeConstraint(toYear, toMonth, toDate, toSecond, function(lastDay) {


if(lastDay.getTime() > toDay.getTime()) { 

// 선택 가능한 선택 옵션(시간)의 갯수를 구한다.

              const timeCnt = document.getElementById("choiceTime").options.length;

              // const timeCnt = document.getElementById("choiceTime").childElementCount;

     

              const optTime = document.getElementById("choiceTime").children;

     

for(var num = 1; num <= timeCnt; num++) {

// 현재 옵션의값 value값을 추출한다.

var choTime = optTime[num].value;

var choHour = choTime.substring(0, 2);

var choMinute = choTime.substring(2, 4);

// 현재 년, 월, 일, 초의 값과 옵션의 시간, 분의 값을 날짜값으로 변경한다.

var optDay = new Date(toYear, toMonth, toDate, choHour, choMinute, toSecond);

if(optDay.getTime() > toDay.getTime()) {

document.getElementById("choiceTime").options[num].selected = true;

break;

}

}

}

else {

alert("금일 예약가능한 시간이 모두 지났습니다.\n내일 다시 예약하여 주시기 바랍니다.");

document.getElementById("choiceTime").options[0].selected = true;

return;

}

});

});

// 마지막 예약 가능 시간을 체크

function lastTimeConstraint(toYear, toMonth, toDate, toSecond, callBack) {

const lastTime = document.getElementById("choiceTime").lastElementChild.value;

const lastHour = lastTime.substring(0, 2);

const lastMinute = lastTime.substring(2, 4);

const lastDay = new Date(toYear, toMonth, toDate, lastHour, lastMinute, toSecond);

callBack(lastDay);

}

</script>

</head>

<body>

<h1>■ Part#1 시간 자동 선택</h1>

<option value="">- 선택 -</option>

<option value="0900">09:00</option>

<option value="1000">10:00</option>

<option value="1100">11:00</option>

<option value="1200">12:00</option>

<option value="1300">13:00</option>

<option value="1400">14:00</option>

<option value="1500">15:00</option>

<option value="1600">16:00</option>

<option value="1700">17:00</option>

<option value="1800">18:00</option>

</select>

</body>

</html>









■ 셀렉트 박스 선택시 선택 가능 시간 확인



<html>

<head>

<title>:: RegExp.exec() 선택 ::</title>

<script type="text/javascript">

function timeConstraint(optTime) {

const toDay = new Date();

const toYear = toDay.getFullYear().toString();

// getMonth()의 경우 0 ~ 11의 값을 출력하기에 기본적으로 항상 +1을 해서 한달을 더하지만

// 해당 예제에서는 그대로의 값을 필요로 하기에 +1을 하지 않는다.

// const toMonth = (toDay.getMonth() + 1).toString();

      const toMonth = toDay.getMonth().toString();

     

      const toDate = toDay.getDate().toString();

     

      /* 

      * 현재 시간(Hour)과 분(Minute)은 사용하지 않는다.

      * const toHour = toDay.getHours().toString();

      * const toMinute = toDay.getMinutes().toString();

      */

     

const toSecond = toDay.getSeconds().toString();

lastTimeConstraint(toYear, toMonth, toDate, toSecond, function(lastDay) {


if(lastDay.getTime() > toDay.getTime()) { 

const choHour = optTime.substring(0, 2);

const choMinute = optTime.substring(2, 4);

const optDay = new Date(toYear, toMonth, toDate, choHour, choMinute, toSecond);

if(optDay.getTime() < toDay.getTime()) {

alert("선택하신 시간은 경과하여\n예약을 진행 할 수 없습니다.");

document.getElementById("choiceTime").options[0].selected = true;

return;

} else {

alert("선택하신 시간으로\n예약이 진행됩니다.");

return;

}

}

else {

alert("금일 예약가능한 시간이 모두 지났습니다.\n내일 다시 예약하여 주시기 바랍니다.");

document.getElementById("choiceTime").options[0].selected = true;

return;

}

});

}


// 마지막 예약 가능 시간을 체크

function lastTimeConstraint(toYear, toMonth, toDate, toSecond, callBack) {

const lastTime = document.getElementById("choiceTime").lastElementChild.value;

const lastHour = lastTime.substring(0, 2);

const lastMinute = lastTime.substring(2, 4);

const lastDay = new Date(toYear, toMonth, toDate, lastHour, lastMinute, toSecond);

callBack(lastDay);

}

</script>

</head>

<body>

<h1>■ Part#2 시간 자동 선택</h1>

<select id="choiceTime" onChange="timeConstraint(this.value);">

<option value="" selected>- 선택 -</option>

<option value="0900">09:00</option>

<option value="1000">10:00</option>

<option value="1100">11:00</option>

<option value="1200">12:00</option>

<option value="1300">13:00</option>

<option value="1400">14:00</option>

<option value="1500">15:00</option>

<option value="1600">16:00</option>

<option value="1700">17:00</option>

<option value="1800">18:00</option>

</select>

</body>

</html>  










■ 시간 자동 선택 및 직접 선택시 선택가능 유무 확인





지금까지 페이지 접속시 자동 실행과


직접 선택시 해당 시간의 선택 가능 유무를 확인하는 코드를 구현해 보았다.


하지만 아마도 이렇게 선택해야 하는 경우.


위 두 코드를 따로 쓰는 경우는 별로 없을 것이다.


그래서 이제 위 두 코드를 합친 코드이고.


사실 이 포스팅을 작성하게 된 계기도 아래와 같은 기능을 구현하기 위함이었다.



# 소스 코드

<html>

<head>

<title>:: JavaScript 시간 자동 선택 ::</title>

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {

// 자동 시간 선택 함수 실행

autoSelectTime();

});

// 자동 시간 선택 함수

function autoSelectTime() {

// 선택 가능한 선택 옵션(시간)의 갯수를 구한다.

const timeCnt = document.getElementById("choiceTime").options.length;

// const timeCnt = document.getElementById("choiceTime").childElementCount;

     

const optTime = document.getElementById("choiceTime").children;

for(var num = 1; num <= timeCntnum++) {

var presence = timeConstraint(optTime[num].value, "auto");


if(presence == "success") {

document.getElementById("choiceTime").options[num].selected = true;

break;

} else if(presence == "unknown") {

break;

}

}

}

// 자동 시간 선택 함수

// optTime : 선택된 option의 value값

// motion :  자동 실행의 호출(auto)인지, 직접 선택한 경우의 호출(passive)인지의 구분

function timeConstraint(optTime, motion) {

const toDay = new Date(); // 현재 날짜

const toYeartoDay.getFullYear().toString(); // 현재 년도

// getMonth()의 경우 0 ~ 11의 값을 출력하기에 기본적으로 항상 +1을 해서 한달을 더하지만

// 해당 예제에서는 그대로의 값을 필요로 하기에 +1을 하지 않는다.

// const toMonth = (toDay.getMonth() + 1).toString();

              const toMonthtoDay.getMonth().toString(); // 현재 월(자바스크립트의 특성상 지난 달)

     

              const toDatetoDay.getDate().toString(); // 현재 일

     

              /* 

               * 현재 시간(Hour)과 분(Minute)은 사용하지 않는다.

               * const toHour = toDay.getHours().toString();

               * const toMinute = toDay.getMinutes().toString();

               */

     

const toSecondtoDay.getSeconds().toString(); // 현재 초

const choHouroptTime.substring(0, 2); // 옵션의 시간

const choMinuteoptTime.substring(2, 4); // 옵션의 분

// 셀렉트 박스의 옵션 값을 시간값으로 포맷한다.

const optDay = new Date(toYeartoMonthtoDatechoHourchoMinutetoSecond);


// 리턴할 값을 담을 변수 지정

let presence = "";


// 계속되는 반복 작업을 막기위해, 먼저 금일 마지막 시간이 이미 지났는지 여부를 확인한다.

lastOptionTime(toYeartoMonthtoDatetoSecond, function(lastDay) {

// 마지막 예약 시간이 지나지 않은경우

if(lastDay.getTime() > toDay.getTime()) { 

const choHouroptTime.substring(0, 2);

const choMinuteoptTime.substring(2, 4);

// 선택한 옵션의 시간값을 날자 값으로 포맷한다.

const optDay = new Date(toYeartoMonthtoDatechoHourchoMinutetoSecond);

// 현재시간이 옵션의 시간보다 큰경우

if(optDay.getTime() < toDay.getTime()) {

if(motion == "passive") {

alert("선택하신 시간은 경과하여\n예약을 진행 할 수 없습니다.");

// 사용자가 직접 시간을 선택하였으나 이미 시간이 경과한경우 예약 가능한 시간을 찾기위해

// autoSelectTime() 함수를 실행한다.

autoSelectTime();

}

presence = "failure";

}

// 사용가능 한 시간

else {


if(motion == "passive") {

alert("선택하신 시간으로\n예약이 진행됩니다.");

}

presence = "success";

}

}

// 마지막 시간이 지난 경우

else {

document.getElementById("choiceTime").options[0].selected = true;

alert("금일 예약가능한 시간이 모두 지났습니다.\n내일 날자로 예약하여 주시기 바랍니다.");

presence = "unknown";

}

});

return presence;

}


// 마지막 예약 가능 시간을 체크하는 함수

function lastOptionTime(toYeartoMonthtoDatetoSecond, callBack) {

// 마지막 option 엘리먼트의 value값을 가져온다.

const lastTime = document.getElementById("choiceTime").lastElementChild.value;

const lastHourlastTime.substring(0, 2);

const lastMinutelastTime.substring(2, 4);

// 마지막 option의 value값(시간)을 날자값으로 포맷한다.

const lastDay = new Date(toYeartoMonthtoDatelastHourlastMinutetoSecond);

callBack(lastDay);

}

</script>

</head>

<body>

<h1>■ 시간 자동 선택 Part3</h1>

<select id="choiceTime" onChange="timeConstraint(this.value, 'passive');">

<option value="" selected>- 선택 -</option>

<option value="0900">09:00</option>

<option value="1000">10:00</option>

<option value="1100">11:00</option>

<option value="1200">12:00</option>

<option value="1300">13:00</option>

<option value="1400">14:00</option>

<option value="1500">15:00</option>

<option value="1600">16:00</option>

<option value="1700">17:00</option>

<option value="1800">18:00</option>

</select>

</body>

</html>  





# 출력 결과







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기