캘린더

              <!--달력-->
              <form autocomplete="off">
                <div class="form-group">
                  <input
                    type="text"
                    id="dp1"
                    class="datepicker mr-2"
                    placeholder="Select Date"
                    name="date"
                  />
                  <button
                    type="submit"
                    class="calendar-btn btn-info font-bitbit"
                  >
                    결정
                  </button>
                </div>
              </form>

/*---------calendar---------*/
.input {
  padding: 10px 20px 10px 20px;
  border: 1px solid lightgrey !important;
  border-radius: 6px !important;
  box-sizing: border-box;
  background-color: #fff !important;
  color: #2c3e50;
  font-size: 14px;
  letter-spacing: 1px;
  width: 10px;
}

.input:focus {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: 1px solid #512da8;
  outline-width: 0;
}

::placeholder {
  color: #bdbdbd;
  opacity: 1;
}

:-ms-input-placeholder {
  color: #bdbdbd;
}

::-ms-input-placeholder {
  color: #bdbdbd;
}

button:focus {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  outline-width: 0;
}

.datepicker {
  background-color: #fff;
  border: none;
}

.datepicker-dropdown {
  top: 0;
  left: 0;
}

.datepicker table tr td.today,
span.focused {
  border-radius: 50% !important;
}

thead tr:nth-child(2) {
  background-color: #ff80ab !important;
}

thead tr:nth-child(3) th {
  color: #ff80ab !important;
  padding-top: 20px;
  padding-bottom: 10px;
}

.dow,
.old-day,
.day,
.new-day {
  width: 40px !important;
  height: 40px !important;
  border-radius: 0px !important;
}

.old-day:hover,
.day:hover,
.new-day:hover,
.month:hover,
.year:hover,
.decade:hover,
.century:hover {
  border-radius: 50% !important;
  background-color: #eee;
}

.datepicker table tr td.active.active,
.datepicker table tr td span.active.active {
  border-radius: 50% !important;
  background-image: linear-gradient(#c9c9c9, #c9c9c9) !important;
  color: #000000 !important;
}

.prev,
.next,
.datepicker-switch {
  border-radius: 0 !important;
  padding: 20px 10px !important;
  text-transform: uppercase;
  font-size: 20px;
  color: #fff;
  opacity: 0.8;
}

.prev:hover,
.next:hover,
.datepicker-switch:hover {
  background-color: inherit !important;
  opacity: 1;
}
.row {
  width: 50%;
}

$(document).ready(function () {
  $(".datepicker").datepicker({
    format: "yyyy-mm", // 데이터 포맷 형식(yyyy: 년 mm: 월)
    startView: "months", // 뷰 모드를 월로 설정
    minViewMode: "months", // 최소 뷰 모드를 월로 설정
    startDate: "2023-01", // 2023년 이후의 날짜만 선택 가능
    endDate: "2023-12", // 2023년까지의 날짜만 선택 가능
    autoclose: true, // 사용자가 날짜를 선택하면 자동으로 달력을 닫음
    language: "ko", // 달력 언어 설정
  });
});