๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
ํ”„๋กœ์ ํŠธ ๊ธฐ๋ก

JQuery๋กœ ์˜ˆ์•ฝ ์‹œ๊ฐ„ ์กฐ์ •

by ์ฝ”๋”ฉํ•˜๋Š” ๋ถ•์–ด 2021. 2. 15.
๋ฐ˜์‘ํ˜•
<script>
$(function() {
    $("#time").timepicker({
       step:30,
        timeFormat: 'h:mm',
        interval: 30,
        minTime: '10',
        maxTime: '06:00pm',
        defaultTime: '11',
        startTime: '10:00',
        dynamic: false,
        dropdown: true,
        scrollbar: true        
    });
});
</script>

์šฐ๋ฆฌ BootStrap ํƒฌํ”Œ๋ฆฟ์ด ์˜ˆ์ „ ๋ฒ„์ „์ด๋ผ์„œ timepicker๊ฐ€ ์ ์šฉ์ด ์•ˆ๋œ๋‹ค.

๊ทธ๋ž˜์„œ ๊ทธ๋ƒฅ

 

<select name="time" id="time" class="form-control">
   <option value="" style=color:black>์˜ˆ์•ฝ ์‹œ๊ฐ„ ์„ ํƒ</option>
   <option value="10:00am" style=color:black>10:00am</option>
   <option value="10:30am" style=color:black>10:30am</option>
   <option value="11:00am" style=color:black>11:00am</option>
   <option value="11:30am" style=color:black>11:30am</option>
   <option value="12:00pm" style=color:black>12:00pm</option>
   <option value="1:00pm" style=color:black>1:00pm</option>
   <option value="2:00pm" style=color:black>2:00pm</option>
   <option value="2:30pm" style=color:black>2:30pm</option>
   <option value="3:00pm" style=color:black>3:00pm</option>
   <option value="3:30pm" style=color:black>3:30pm</option>
   <option value="4:00pm" style=color:black>4:00pm</option>
   <option value="4:30pm" style=color:black>4:30pm</option>
   <option value="5:00pm" style=color:black>5:00pm</option>
   <option value="5:30pm" style=color:black>5:30pm</option>
   <option value="6:00pm" style=color:black>6:00pm</option>
</select>

์ˆ˜์ž‘์—… ํ–ˆ๋‹ค!!!!!!!!!!!

 

 

์ ์šฉ ์™„๋ฃŒ!

 

 

<์‹คํ–‰ ๊ฒฐ๊ณผ>

์˜ˆ์•ฝ ํŽ˜์ด์ง€

โ€‹

DB

โ€‹

ํšŒ์› ์˜ˆ์•ฝํ™•์ธ ํŽ˜์ด์ง€

 

๊ด€๋ฆฌ์ž ์˜ˆ์•ฝํ™•์ธ ํŽ˜์ด์ง€

 

๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€