깔끔하게 날짜를 SELECT 하는 방법!

datepicker.js 라이브러리를 이용하여 간단하게 날짜 셀렉트를 구현해보자!

DATEPICKER 란?
달력처럼 날짜를 구현해주는 예쁜 UI

 

바로 코드 고고링!

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

$("#datepicker").datepicker({
  dateFormat: "yy-mm-dd", // 날짜 형식 지정 (예: 2023-12-18)
  showOtherMonths: true,   // 이전/다음 달의 날짜도 표시
  selectOtherMonths: true,   // 이전/다음 달의 날짜도 선택 가능
  minDate : 0,
  beforeShowDay: function(date) {
      // 주말 (토요일: 6, 일요일: 0)이면 선택 불가능하도록 설정
      var day = date.getDay();
      return [day != 0 && day != 6 , ''];
    }
});

<div class="input">
    <input type="text" id="datepicker" placeholder="년/월/일" >
</div>

너무 쉽고 편하다!

datepicker example

결과는 이렇게 나온다! 오 편해

감자에게 라이브러리란 너무 도움되는것 ㅠㅠ