JQuery 이용 datepicker 사용방법 순차적 설명

2024. 3. 14. 21:35

datepicker는 급하게 기능을 구현해야 하거나 예쁜 디자인이 필요 없이 간단하게 달력창을 만들어서 사용할 때 적용하기 편합니다.

datepicker에 대해 가장 기본적인 설정부터 조금씩 살을 붙여 나가면서 사용 방법에 대해 알아봅니다.

1. 기본 기능 설정

우선 datepicker를 사용하기 위해서는 아래와 같은 jquery가 필요합니다.

그리고 HTML 태그를 이용하여 날짜를 입력 받기 위한 text input을 하나 만들어 줍니다.

<body>

</body>

그리고 javascript에서 input 입력과 datepicker을 기본적 값으로 설정하고 서로 연결 시켜주면 바로 달력창을 사용할 수 있습니다.

$(document).ready(function () {

$.datepicker.setDefaults();

$("#start_dt").datepicker();

});

</script>

웹 브라우저에서 실행하고 input 박스를 클릭하면 아래와 같은 가장 기본적인 달력창을 확인할 수 있고 날짜를 선택해서 input 창에 값을 입력 받습니다.

가장 기본적인 설정으로는 [월/일/년]의 형식으로 날짜가 입력됩니다.

03/21/2024

우리는 이렇게 사용하지 않으니 수정하려면 날짜 형식을 설정하는 값을 하나 추가합니다.

$.datepicker.setDefaults({

dateFormat: 'yy-mm-dd',

});

다시 실행해서 확인해 봅니다.

날짜가 설정한 형식으로 잘 입력이 되었습니다.

$.datepicker.setDefaults() 로 정의된 함수에 추가하는 설정 값은 공통으로 적용되는 설정입니다.

하나의 페이지에 여러 개의 달력 창을 만들어 사용하는 경우 모든 달력창에 동일한 설정 값이 적용됩니다.

만약 하나의 페이지에 여러 개의 달력창을 사용하는데 각각 또는 일부 달력창에는 다른 형태의 설정 값을 적용해서 사용하고 싶은 경우에는 배열 변수를 필요한 만큼 생성해서 서로 다른 설정을 정의한 후 필요한 달력 창에 적용해주면 됩니다.

예를 들어 var datepicker_set1 변수를 하나 생성하고 새로운 달력창(end_dt)을 추가한 후 설정을 반영해보도록 하겠습니다. 날짜 구분을 사선으로 구분하는 설정입니다.

var datepicker_set1 = {

dateFormat: 'yy/mm/dd',

}

$("#end_dt").datepicker(datepicker_set1);

input 박스를 클릭해서 날짜를 입력 받으면 바로 확인 가능합니다.

이런 식으로 처음 작업해본 start_dt와는 다른 결과 값을 얻기 위해 별도의 설정 값 적용하는 것이 가능 합니다.

물론 변수를 생성해서 사용하는 것이 혼란스럽다면 아래처럼 값을 직접 입력해도 됩니다.

$("#end_dt").datepicker({dateFormat : ‘yy/mm/dd’});

2. 한글 사용

이번에는 datepicker 달력창에 한글을 사용하는 방법입니다.

한글 추가라고 해서 특별한 건 없고 지금까지 작업한 소스에 아래 설정을 추가해서 월과 요일을 한글로 변경할 수 있습니다.

monthNames: ['1월(JAN)','2월(FEB)','3월(MAR)','4월(APR)','5월(MAY)','6월(JUN)',

'7월(JUL)','8월(AUG)','9월(SEP)','10월(OCT)','11월(NOV)','12월(DEC)'],

dayNamesMin: ['일','월','화','수','목','금','토'],

브라우저에서 어떻게 나오나 확인해 보겠습니다.

입력한 값이 그대로 노출되기 때문에 수정이 필요하면 바로 고치면 됩니다.

이번에는 년과 월을 선택하는 방법을 변경하는 설정을 추가해 보겠습니다.

지금까지는 좌우측 끝부분에 있는 버튼을 이용해서 월을 이동하는 방식이었는데 셀렉트 박스로 년과 월을 변경하는 방법입니다.

아래에 있는 설정을 추가합니다. 물론 전체 또는 필요한 달력창만 설정이 반영하도록 할 수 있습니다.

changeXX라는 설정은 년월을 변경하겠다는 것이고 추가로 월의 값을 한글로 수정할 수 있도록 한글 월을 적어주도록 합니다.

changeMonth: true,

changeYear: true,

monthNamesShort: ['1월','2월','3월','4월','5월','6월',

'7월','8월','9월','10월','11월','12월'],

monthNamesShort은 셀렉트 박스에서 보여주는 월 명칭입니다. 생략하면 기본값으로 영문이 나오게 됩니다. 값은 입력한 한글이 그대로 노출되니 필요에 따라 수정하면 됩니다.

년 또는 월을 선택하기위해 방형버튼을 여러 번 누르지 않고도 바로 선택을 할 수 있습니다.

3. 버튼 추가

달력창을 보다 유용하게 사용하고 커스터마이징을 하는 방법으로 하단에 버튼을 추가해서 작업을 할 수 있습니다.

showButtonPanel: true,

currentText: "이번달",

closeText: '닫기',

이 설정은 달력창 아래에 버튼을 추가하도록 하며 버튼의 기본 값은 영문으로 current와 close로 나오는데 이를 한글로 변경해서 볼 수 있습니다.

[이번달] 버튼은 다른 년 월을 선택했다가 다시 현재의 날짜로 돌아오려는 경우 사용하는 버튼입니다.

[닫기] 버튼은 그냥 달력창을 닫기만 하는 용도인데 내부적으로 함수를 가지고 있습니다. 만약 다른 기능을 추가하려면 아래와 같이 함수에 기능을 추가 해서 사용이 가능 합니다.

여기서는 선택한 값을 alert으로 나오도록 하는 단순 작업인데 필요에 따라 복잡하게 하면 되겠죠.

onClose: function(dateText, inst ) {

alert(dateText);

}

[닫기] 버튼을 클릭해 볼까요?

좀더 많은 내장된 함수와 기능들은 홈페이지를 방문하면 찾아볼 수 있습니다.

https://jqueryui.com/datepicker/

소스도 공개되어 있고 API documentation에 가면 다양한 기능 목록을 확인할 수 있습니다.

지금까지 작업한 전체 소스

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

var startDate = "";

var endDate ="";