[javascript] jQuery를 사용하여 날짜 및 시간 선택기 구현하기

01 Dec 2023

javascript

이번 블로그에서는 jQuery를 사용하여 날짜와 시간을 선택할 수 있는 선택기를 구현하는 방법에 대해 알아보겠습니다.

필요 라이브러리

먼저, 날짜 및 시간 선택기를 구현하기 위해 다음과 같은 라이브러리를 다운로드 해야 합니다:

jQuery: 공식 웹사이트에서 다운로드할 수 있습니다.
jQuery UI: 공식 웹사이트에서 다운로드할 수 있습니다.

HTML 구조

선택기를 사용하기 위해 HTML 구조를 설정해야 합니다. 예를 들어 다음과 같이 <input> 요소를 사용하면 됩니다:

<input type="text" id="datepicker">

JavaScript로 선택기 초기화하기

선택기를 사용할 수 있도록 JavaScript 코드를 작성해야 합니다. 다음과 같이 해보겠습니다:

$(document).ready(function() {
  $("#datepicker").datepicker();
});

위의 코드는 datepicker라는 ID를 가진 요소를 선택하고, datepicker() 함수를 호출하여 선택기를 초기화합니다.

CSS 스타일 적용하기

선택기의 스타일을 변경하려면 추가적인 CSS 스타일을 적용해야 합니다. 다음과 같은 예제를 참고하세요:

.ui-datepicker {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  padding: 10px;
}

.ui-datepicker-header {
  background-color: #f5f5f5;
  border-bottom: 1px solid #ccc;
  padding: 5px;
}

.ui-datepicker-title {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.ui-datepicker-calendar tbody td {
  padding: 5px;
  text-align: center;
}

.ui-datepicker-calendar tbody td:hover {
  background-color: #eee;
  cursor: pointer;
}

위의 스타일은 선택기의 배경색, 테두리, 그림자, 패딩 등을 설정합니다. 필요에 따라 스타일을 수정해 사용할 수 있습니다.

결과 확인하기

모든 설정을 마친 후 HTML 파일을 실행하면 날짜 선택이 가능한 선택기가 나타납니다. 선택한 날짜와 시간은 datepicker 요소의 value 속성에 자동으로 설정됩니다.

이것으로 jQuery를 사용하여 날짜와 시간 선택기를 구현하는 방법을 알아보았습니다. 참고 코드와 결과를 확인해보세요!