datepicker 처음 열리는 달이 다음달이 될수있도록
본문
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()→ 올해 연도 -
9→ 10월 (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월로 시작하지만 선택은 오늘 날짜로 하고 싶다면 세 번째 방식이 가장 적합합니다.
답변을 작성하시기 전에 로그인 해주세요.
