[javascript] bootstrap datepicker 사용 방법

Summary

1. 기본 형태

Boostrap CSS+JS
Datepicker CSS+JS

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Datepicker 연습</title>

  <!-- ① Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <!-- ② Datepicker CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">

</head>
<body>

  <!-- ③ 날짜 입력창 -->
  <div class="container" style="margin-top:50px;">
    <label>날짜 선택:</label>
    <input type="text" id="datepicker" class="form-control" style="width:200px;">
  </div>

  <!-- ④ jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <!-- ⑤ Bootstrap JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <!-- ⑥ Datepicker JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

  <!-- ⑦ Datepicker 작동시키기 -->
  <script>
    $(document).ready(function() {
      $('#datepicker').datepicker({ 
        format: 'yyyy',  // 날짜 형식: 2025 ('yyyy-mm-dd' 형식)
        minViewMode: 2,        // 연도 선택 모드 (0=일, 1=월, 2=연도)
        autoclose: true,       // 날짜 선택 시 자동 닫힘
        todayHighlight: true   // 오늘 날짜 강조
      });
    });
  </script>

</body>
</html>

2. 위치 바꾸기

.on 이하 구문으로 활성화가 될 경우 행동에 대해 설정할 수 있다.

// datepicker.js

$(document).ready(function() {
    $('#yearpicker').datepicker({
    format: 'yyyy',  // 날짜 형식: 2025 (yyyy-mm-dd)
    minViewMode: 2,        // 연도 선택 모드 (0=일, 1=월, 2=연도)
    autoclose: true,       // 날짜 선택 시 자동 닫힘
    todayHighlight: true   // 오늘 날짜 강조
    });
}).on('show', function () { 🌟🌟 이 부분 추가 🌟🌟
  setTimeout(() => {
    const picker = $('.datepicker:visible'); // 열린 팝업 DOM

    picker.css({
      top: '140px',
      left: '520px'
    });
  }, 10); // 팝업 생성 후 위치 적용
});