DatePicker

<div class="datepicker" id="dp-1">
  <div class="datepicker__input-wrap">
    <input class="datepicker__input" type="text"
           placeholder="날짜를 선택하세요" readonly
           aria-label="날짜 선택" aria-haspopup="dialog" />
    <input class="datepicker__hidden" type="hidden" name="date" />
    <button class="datepicker__trigger" type="button"
            aria-label="달력 열기" aria-expanded="false"
            aria-controls="dp-1-popup">
      <!-- 캘린더 SVG 아이콘 -->
      <svg viewBox="0 0 20 20" fill="none">
        <rect x="2.5" y="4" width="15" height="13" rx="2" stroke="currentColor" stroke-width="1.5"/>
        <path d="M2.5 8h15" stroke="currentColor" stroke-width="1.5"/>
        <path d="M6.5 2v3M13.5 2v3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
      </svg>
    </button>
  </div>

  <div class="datepicker__popup" id="dp-1-popup"
       role="dialog" aria-label="날짜 선택 달력" aria-modal="true">
    <div class="datepicker__header">
      <button class="datepicker__nav datepicker__nav--prev" type="button" aria-label="이전 달">
        <svg viewBox="0 0 16 16" fill="none">
          <path d="M10 12L6 8l4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      <span class="datepicker__month-year"></span>
      <button class="datepicker__nav datepicker__nav--next" type="button" aria-label="다음 달">
        <svg viewBox="0 0 16 16" fill="none">
          <path d="M6 12l4-4-4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
    </div>
    <div class="datepicker__weekdays">
      <span>일</span><span>월</span><span>화</span>
      <span>수</span><span>목</span><span>금</span><span>토</span>
    </div>
    <div class="datepicker__days"><!-- jQuery로 동적 생성 --></div>
    <div class="datepicker__footer">
      <button class="datepicker__today-btn" type="button">오늘</button>
	  <button class="datepicker__today-btn" type="button">초기화</button>
      <button class="datepicker__confirm-btn" type="button">확인</button>
    </div>
    <button class="datepicker__close" type="button" aria-label="닫기"></button>
  </div>
</div>

/* 기본 초기화 — HTML에 .datepicker 클래스가 있으면 자동 실행됨 */
$('.datepicker').datepicker();

/* 옵션: 오늘 이후만 선택 가능 */
$('#dp-1').datepicker({ minDate: new Date() });

/* 옵션: 특정 범위 */
$('#dp-1').datepicker({
  minDate: new Date('2026-01-01'),
  maxDate: new Date('2026-12-31')
});

/* 옵션: 날짜 선택 시 콜백 */
$('#dp-1').datepicker({
  onChange: function (isoString) {
    console.log('선택된 날짜:', isoString); /* '2026-06-05' */
  }
});

/* data 속성으로 옵션 (HTML에서 설정) */
/* <div class="datepicker" data-min-date="2026-01-01" data-max-date="2026-12-31"> */

/* ──────────────────────────────────────────────────────────
   백엔드 전송값: .datepicker__hidden input[type="hidden"]에
   'YYYY-MM-DD' 형식으로 자동 저장됩니다.
   ────────────────────────────────────────────────────────── */

/* ① HTML form submit — hidden input이 자동으로 포함됩니다 */
<form method="POST" action="/api/reservation">
  <div class="datepicker" id="dp-1">
    ...
    <input class="datepicker__hidden" type="hidden" name="reservation_date" />
    ...
  </div>
  <button type="submit">예약하기</button>
</form>
/* → 서버에서 req.body.reservation_date 로 수신 (예: '2026-06-15') */


/* ② jQuery AJAX */
$('form').on('submit', function (e) {
  e.preventDefault();
  $.ajax({
    url: '/api/reservation',
    method: 'POST',
    data: {
      reservation_date: $('[name="reservation_date"]').val()
      /* 값 예: '2026-06-15' */
    },
    success: function (res) {
      console.log('저장 완료:', res);
    },
    error: function (err) {
      console.error('오류:', err);
    }
  });
});


/* ③ fetch API (JSON) */
async function submitDate() {
  const date = document.querySelector('[name="reservation_date"]').value;
  /* 값 예: '2026-06-15' */

  const res = await fetch('/api/reservation', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ reservation_date: date })
  });
  const data = await res.json();
  console.log('저장 완료:', data);
}


/* ④ 서버 수신 예시 */

/* Node.js (Express) */
app.post('/api/reservation', (req, res) => {
  const date = req.body.reservation_date; /* '2026-06-15' */
  /* DB 저장: await db.query('INSERT INTO reservations (date) VALUES (?)', [date]) */
  res.json({ success: true });
});

/* PHP */
$date = $_POST['reservation_date']; /* '2026-06-15' */
/* $stmt = $pdo->prepare("INSERT INTO reservations (date) VALUES (?)");
   $stmt->execute([$date]); */

/* Spring Boot (Java) */
/* @PostMapping("/api/reservation")
   public ResponseEntity save(@RequestParam String reservation_date) {
     // reservation_date = "2026-06-15"
   } */

<div class="datepicker datepicker--range" id="dp-range-1">
  <div class="datepicker__range-inputs">
    <div class="datepicker__input-wrap">
      <input class="datepicker__input datepicker__input--start" type="text"
             placeholder="시작일" readonly aria-label="시작일 선택" />
    </div>
    <span class="datepicker__range-sep" aria-hidden="true">~</span>
    <div class="datepicker__input-wrap">
      <input class="datepicker__input datepicker__input--end" type="text"
             placeholder="종료일" readonly aria-label="종료일 선택" />
    </div>
    <input class="datepicker__hidden datepicker__hidden--start" type="hidden" name="start_date" />
    <input class="datepicker__hidden datepicker__hidden--end" type="hidden" name="end_date" />
    <button class="datepicker__trigger" type="button" aria-label="날짜 범위 선택" aria-expanded="false">
      <!-- 캘린더 SVG -->
    </button>
  </div>

  <div class="datepicker__popup" role="dialog" aria-label="날짜 범위 선택" aria-modal="true">
    <div class="datepicker__header">...</div>
    <span class="datepicker__range-phase"></span> <!-- '시작일을 선택하세요' / '종료일을 선택하세요' -->
    <div class="datepicker__weekdays">...</div>
    <div class="datepicker__days"></div>
    <div class="datepicker__footer">
      <button class="datepicker__reset-btn" type="button">초기화</button>
      <button class="datepicker__confirm-btn" type="button">확인</button>
    </div>
    <button class="datepicker__close" type="button" aria-label="닫기"></button>
  </div>
</div>

/* 자동 초기화 — .datepicker--range 클래스가 있으면 자동 실행됨 */
$('.datepicker--range').datepickerRange();

/* onChange 콜백 */
$('#dp-range-1').datepickerRange({
  onChange: function (startISO, endISO) {
    console.log('범위:', startISO, '~', endISO);
    /* 예: '2026-06-01' ~ '2026-06-30' */
  }
});

/* 선택된 값 읽기 */
var start = $('[name="start_date"]').val(); /* '2026-06-01' */
var end   = $('[name="end_date"]').val();   /* '2026-06-30' */

/* ① form submit */
<form method="POST" action="/api/search">
  <input type="hidden" name="start_date" />  <!-- '2026-06-01' -->
  <input type="hidden" name="end_date" />    <!-- '2026-06-30' -->
</form>

/* ② fetch */
const payload = {
  start_date: $('[name="start_date"]').val(),
  end_date:   $('[name="end_date"]').val()
};
await fetch('/api/search', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(payload)
});

/* ③ 서버 수신 (Node.js) */
app.post('/api/search', (req, res) => {
  const { start_date, end_date } = req.body;
  /* '2026-06-01', '2026-06-30' */
  /* SQL: WHERE date BETWEEN ? AND ? → [start_date, end_date] */
});