<div class="title">검색조건</div>
<div>
    <div style="width: 72px;">지역센터</div>
    <select id="center" style="width: 174px; padding: 2px;">
        <option>선택</option>
        <option th:each="code : ${list}" th:value="${code?.centerId}" th:text="${code?.centerInfo}"></option>
    </select>
</div>
<div>
    <div>검색시작시각</div>
    <input th:value="${#temporals.format(#temporals.createNow(), 'yyyy-MM-dd')}" type="date" id="start-dt" name="start-dt">
    <select id="start-tm"></select>
</div>
<div>
    <div class="red">검색기간에 따라 검색결과가 늦어질 수 있습니다.</div>
    <div class="button" onclick="search()"><img src="/static/image/search.svg">조회</div>
</div>

<script>
    const startDt = $('#start-dt');
    const startTm = $('#start-tm');
    const endDt   = $('#end-dt');
    const endTm   = $('#end-tm');
    const selType = null;
    const now = new Date();
    let options = "";
    for (let ii = 0; ii <= 23; ii++) {
        const value = timeFormatter(ii);
        options += `<option value="${value}">${value}시</option>`;
    }
    startTm.html(options);
    endTm.html(options);
    startTm.val('00');
    endTm.val('23');
    function timeFormatter(value) {
        return String(value).padStart(2, '0');
    }
</script>