datepicker 처음 열리는 달이 다음달이 될수있도록

datepicker 처음 열리는 달이 다음달이 될수있도록

QA

datepicker 처음 열리는 달이 다음달이 될수있도록

답변 1

본문

datepicker에서 처음 열리는 달이 오늘이 있는 이번달이 아니고
"10월"이나 "2026년 1월"이나 이렇게 특정 달로 지정을 할수 있으면 좋겠습니다.

방법을 아시는 분의 조언을 기다립니다.
감사합니다.

이 질문에 댓글 쓰기 :

답변 1

jQuery UI Datepicker에서는 처음 달력을 열었을 때 표시되는 달을 특정 연도/월로 지정할 수 있습니다.
이때 defaultDate 옵션을 활용하면 됩니다.


1. 특정 월로 시작하기 (예: 10월)

<input type="text" id="datepicker">
<script>
$(function() {
    $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        defaultDate: new Date(new Date().getFullYear(), 9, 1) // 10월 (0=1월, 9=10월)
    });
});
</script>

? 설명

  • new Date(연도, 월-1, 일) 형식

  • new Date().getFullYear() → 올해 연도

  • 910월 (0부터 시작)


2. 특정 연도·월로 시작하기 (예: 2026년 1월)

<input type="text" id="datepicker">
<script>
$(function() {
    $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        defaultDate: new Date(2026, 0, 1) // 2026년 1월
    });
});
</script>

3. 현재 날짜는 유지하면서 특정 달로만 열기

만약 오늘 날짜는 선택값으로 유지하되, 달력만 특정 달로 열고 싶으면 setDate로 현재 날짜를 유지하고 gotoDate로 화면만 이동합니다.

<input type="text" id="datepicker">
<script>
$(function() {
    $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd"
    }).datepicker("setDate", new Date())        // 선택 날짜를 오늘로
      .datepicker("option", "beforeShow", function() {
          $(this).datepicker("setDate", new Date()); // 선택값 유지
          $(this).datepicker("gotoDate", new Date(2026, 0, 1)); // 달력은 2026년 1월로 이동
      });
});
</script>

4. 옵션 요약

옵션 설명 예시
defaultDate 달력이 처음 열릴 때 기본 날짜를 지정 defaultDate: "+1m" (한 달 후)
gotoDate 현재 선택값과는 별개로 달력의 표시 월을 변경 $("#datepicker").datepicker("gotoDate", new Date(2026, 0, 1))
setDate 선택된 값을 지정 $("#datepicker").datepicker("setDate", new Date())

어떤 방식으로 쓰실 건가요?
예를 들어 항상 10월로 시작하지만 선택은 오늘 날짜로 하고 싶다면 세 번째 방식이 가장 적합합니다.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 129,088
© SIRSOFT
현재 페이지 제일 처음으로