캘린더
날짜 선택 캘린더입니다.
#calendar #date #picker
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
HTML
<div class="form-group">
<div class="form-tit">
<label for="cal">기간선택</label>
</div>
<div class="form-conts calendar-conts">
<div class="calendar-input">
<input type="number" class="krds-input datepicker cal" placeholder="YYYY.MM.DD" id="cal">
<button type="button" class="krds-btn medium icon form-btn-datepicker">
<span class="sr-only">달력 열기</span>
<i class="svg-icon ico-calendar"></i>
</button>
</div>
<div class="krds-calendar-area">
<div class="calendar-wrap bottom single" aria-label="달력">
<div class="calendar-head">
<button type="button" class="btn-cal-move prev"><span class="sr-only">이전 달</span></button>
<div class="calendar-switch-wrap">
<div class="calendar-drop-down">
<button type="button" class="btn-cal-switch year" aria-label="연도 선택">2024년</button>
<div class="calendar-select calendar-year-wrap">
<ul class="sel year">
<li>
<button type="button">2001년</button>
</li>
<li>
<button type="button" class="active">2002년</button>
</li>
<li>
<button type="button" disabled>2003년</button>
</li>
<li>
<button type="button">2004년</button>
</li>
<li>
<button type="button">2005년</button>
</li>
<li>
<button type="button">2006년</button>
</li>
<li>
<button type="button">2007년</button>
</li>
<li>
<button type="button">2008년</button>
</li>
<li>
<button type="button">2009년</button>
</li>
<li>
<button type="button">2010년</button>
</li>
<li>
<button type="button">2011년</button>
</li>
<li>
<button type="button">2012년</button>
</li>
<li>
<button type="button">2013년</button>
</li>
<li>
<button type="button">2014년</button>
</li>
<li>
<button type="button">2015년</button>
</li>
<li>
<button type="button">2016년</button>
</li>
<li>
<button type="button">2017년</button>
</li>
<li>
<button type="button">2018년</button>
</li>
<li>
<button type="button">2019년</button>
</li>
<li>
<button type="button">2020년</button>
</li>
<li>
<button type="button">2021년</button>
</li>
<li>
<button type="button">2022년</button>
</li>
<li>
<button type="button">2023년</button>
</li>
<li>
<button type="button">2024년</button>
</li>
</ul>
</div>
</div>
<div class="calendar-drop-down">
<button type="button" class="btn-cal-switch month" aria-label="월 선택">12월</button>
<div class="calendar-select calendar-mon-wrap">
<ul class="sel month">
<li>
<button type="button">01월</button>
</li>
<li>
<button type="button" disabled>02월</button>
</li>
<li>
<button type="button">03월</button>
</li>
<li>
<button type="button">04월</button>
</li>
<li>
<button type="button">05월</button>
</li>
<li>
<button type="button">06월</button>
</li>
<li>
<button type="button">07월</button>
</li>
<li>
<button type="button">08월</button>
</li>
<li>
<button type="button">09월</button>
</li>
<li>
<button type="button">10월</button>
</li>
<li>
<button type="button">11월</button>
</li>
<li>
<button type="button" class="active">12월</button>
</li>
</ul>
</div>
</div>
</div>
<button type="button" class="btn-cal-move next"><span class="sr-only">다음 달</span></button>
</div>
<div class="calendar-body">
<div class="calendar-table-wrap">
<table class="calendar-tbl">
<caption>
2024년 12월
</caption>
<thead>
<tr>
<th>일</th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
<th>토</th>
</tr>
</thead>
<tbody>
<tr>
<td class="old day-off"><button type="button" class="btn-set-date"><span>26</span></button></td>
<td class="old"><button type="button" class="btn-set-date"><span>27</span></button></td>
<td class="old"><button type="button" class="btn-set-date"><span>28</span></button></td>
<td class="old"><button type="button" class="btn-set-date"><span>29</span></button></td>
<td class="old"><button type="button" class="btn-set-date"><span>30</span></button></td>
<td><button type="button" class="btn-set-date"><span>1</span></button></td>
<td><button type="button" class="btn-set-date"><span>2</span></button></td>
</tr>
<tr>
<td class="day-off"><button type="button" class="btn-set-date"><span>3</span></button></td>
<td><button type="button" class="btn-set-date"><span>4</span></button></td>
<td><button type="button" class="btn-set-date"><span>5</span></button></td>
<td><button type="button" class="btn-set-date"><span>6</span></button></td>
<td class="period start end"><button type="button" class="btn-set-date"><span>7</span></button></td>
<td class="day-event"><button type="button" class="btn-set-date"><span>8</span></button></td>
<td><button type="button" class="btn-set-date"><span>9</span></button></td>
</tr>
<tr>
<td class="day-off"><button type="button" class="btn-set-date"><span>10</span></button></td>
<td><button type="button" class="btn-set-date"><span>11</span></button></td>
<td><button type="button" class="btn-set-date"><span>12</span></button></td>
<td class="disabled"><button type="button" class="btn-set-date" disabled><span>13</span></button></td>
<td><button type="button" class="btn-set-date"><span>14</span></button></td>
<td><button type="button" class="btn-set-date"><span>15</span></button></td>
<td><button type="button" class="btn-set-date"><span>16</span></button></td>
</tr>
<tr>
<td class="day-off"><button type="button" class="btn-set-date"><span>17</span></button></td>
<td><button type="button" class="btn-set-date"><span>18</span></button></td>
<td><button type="button" class="btn-set-date"><span>19</span></button></td>
<td><button type="button" class="btn-set-date"><span>20</span></button></td>
<td><button type="button" class="btn-set-date"><span>21</span></button></td>
<td><button type="button" class="btn-set-date"><span>22</span></button></td>
<td><button type="button" class="btn-set-date"><span>23</span></button></td>
</tr>
<tr>
<td class="day-off"><button type="button" class="btn-set-date"><span>24</span></button></td>
<td><button type="button" class="btn-set-date"><span>25</span></button></td>
<td><button type="button" class="btn-set-date"><span>26</span></button></td>
<td><button type="button" class="btn-set-date"><span>27</span></button></td>
<td><button type="button" class="btn-set-date"><span>28</span></button></td>
<td><button type="button" class="btn-set-date"><span>29</span></button></td>
<td class="today"><button type="button" class="btn-set-date"><span>30</span></button></td>
</tr>
<tr>
<td class="day-off"><button type="button" class="btn-set-date"><span>31</span></button></td>
<td class="new"><button type="button" class="btn-set-date"><span>1</span></button></td>
<td class="new"><button type="button" class="btn-set-date"><span>2</span></button></td>
<td class="new"><button type="button" class="btn-set-date"><span>3</span></button></td>
<td class="new"><button type="button" class="btn-set-date"><span>4</span></button></td>
<td class="new"><button type="button" class="btn-set-date"><span>5</span></button></td>
<td class="new"><button type="button" class="btn-set-date"><span>6</span></button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="calendar-footer">
<div class="calendar-btn-wrap">
<button type="button" class="krds-btn small text" id="get-today">오늘</button>
<button type="button" class="krds-btn small tertiary">취소</button>
<button type="button" class="krds-btn small primary">확인</button>
</div>
</div>
</div>
</div>
</div>
</div>Vue 컴포넌트
<template>
<div class="form-group">
<div class="form-tit">
<label for="cal">기간선택</label>
</div>
<div class="form-conts calendar-conts">
<div class="calendar-input">
<input type="number" class="krds-input datepicker cal" placeholder="YYYY.MM.DD" id="cal">
<button type="button" class="krds-btn medium icon form-btn-datepicker">
<span class="sr-only">달력 열기</span>
<i class="svg-icon ico-calendar"></i>
</button>
</div>
<div class="krds-calendar-area">
<div class="calendar-wrap bottom single" aria-label="달력">
<div class="calendar-head">
<button type="button" class="btn-cal-move prev"><span class="sr-only">이전 달</span></button>
<div class="calendar-switch-wrap">
<div class="calendar-drop-down">
<button type="button" class="btn-cal-switch year" aria-label="연도 선택">2024년</button>
<div class="calendar-select calendar-year-wrap">
<ul class="sel year">
<li>
<button type="button">2001년</button>
</li>
<li>
<button type="button" class="active">2002년</button>
</li>
<li>
<button type="button" disabled>2003년</button>
</li>
<li>
<button type="button">2004년</button>
</li>
<li>
<button type="button">2005년</button>
</li>
<li>
<button type="button">2006년</button>
</li>
<li>
<button type="button">2007년</button>
</li>
<li>
<button type="button">2008년</button>
</li>
<li>
<button type="button">2009년</button>
</li>
<li>
<button type="button">2010년</button>
</li>
<li>
<button type="button">2011년</button>
</li>
<li>
<button type="button">2012년</button>
</li>
<li>
<button type="button">2013년</button>
</li>
<li>
<button type="button">2014년</button>
</li>
<li>
<button type="button">2015년</button>
</li>
<li>
<button type="button">2016년</button>
</li>
<li>
<button type="button">2017년</button>
</li>
<li>
<button type="button">2018년</button>
</li>
<li>
<button type="button">2019년</button>
</li>
<li>
<button type="button">2020년</button>
</li>
<li>
<button type="button">2021년</button>
</li>
<li>
<button type="button">2022년</button>
</li>
<li>
<button type="button">2023년</button>
</li>
<li>
<button type="button">2024년</button>
</li>
</ul>
</div>
</div>
<div class="calendar-drop-down">
<button type="button" class="btn-cal-switch month" aria-label="월 선택">12월</button>
<div class="calendar-select calendar-mon-wrap">
<ul class="sel month">
<li>
<button type="button">01월</button>
</li>
<li>
<button type="button" disabled>02월</button>
</li>
<li>
<button type="button">03월</button>
</li>
<li>
<button type="button">04월</button>
</li>
<li>
<button type="button">05월</button>
</li>
<li>
<button type="button">06월</button>
</li>
<li>
<button type="button">07월</button>
</li>
<li>
<button type="button">08월</button>
</li>
<li>
<button type="button">09월</button>
</li>
<li>
<button type="button">10월</button>
</li>
<li>
<button type="button">11월</button>
</li>
<li>
<button type="button" class="active">12월</button>
</li>
</ul>
</div>
</div>
</div>
<button type="button" class="btn-cal-move next"><span class="sr-only">다음 달</span></button>
</div>
<div class="calendar-body">
<div class="calendar-table-wrap">
<table class="calendar-tbl">
<caption>
2024년 12월
</caption>
<thead>
<tr>
<th>일</th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
<th>토</th>
</tr>
</thead>
<tbody>
<tr>
<td class="old day-off"><button type="button" class="btn-set-date"><span>26</span></button></td>
<td class="old"><button type="button" class="btn-set-date"><span>27</span></button></td>
<td class="old"><button type="button" class="btn-set-date"><span>28</span></button></td>
<td class="old"><button type="button" class="btn-set-date"><span>29</span></button></td>
<td class="old"><button type="button" class="btn-set-date"><span>30</span></button></td>
<td><button type="button" class="btn-set-date"><span>1</span></button></td>
<td><button type="button" class="btn-set-date"><span>2</span></button></td>
</tr>
<tr>
<td class="day-off"><button type="button" class="btn-set-date"><span>3</span></button></td>
<td><button type="button" class="btn-set-date"><span>4</span></button></td>
<td><button type="button" class="btn-set-date"><span>5</span></button></td>
<td><button type="button" class="btn-set-date"><span>6</span></button></td>
<td class="period start end"><button type="button" class="btn-set-date"><span>7</span></button></td>
<td class="day-event"><button type="button" class="btn-set-date"><span>8</span></button></td>
<td><button type="button" class="btn-set-date"><span>9</span></button></td>
</tr>
<tr>
<td class="day-off"><button type="button" class="btn-set-date"><span>10</span></button></td>
<td><button type="button" class="btn-set-date"><span>11</span></button></td>
<td><button type="button" class="btn-set-date"><span>12</span></button></td>
<td class="disabled"><button type="button" class="btn-set-date" disabled><span>13</span></button></td>
<td><button type="button" class="btn-set-date"><span>14</span></button></td>
<td><button type="button" class="btn-set-date"><span>15</span></button></td>
<td><button type="button" class="btn-set-date"><span>16</span></button></td>
</tr>
<tr>
<td class="day-off"><button type="button" class="btn-set-date"><span>17</span></button></td>
<td><button type="button" class="btn-set-date"><span>18</span></button></td>
<td><button type="button" class="btn-set-date"><span>19</span></button></td>
<td><button type="button" class="btn-set-date"><span>20</span></button></td>
<td><button type="button" class="btn-set-date"><span>21</span></button></td>
<td><button type="button" class="btn-set-date"><span>22</span></button></td>
<td><button type="button" class="btn-set-date"><span>23</span></button></td>
</tr>
<tr>
<td class="day-off"><button type="button" class="btn-set-date"><span>24</span></button></td>
<td><button type="button" class="btn-set-date"><span>25</span></button></td>
<td><button type="button" class="btn-set-date"><span>26</span></button></td>
<td><button type="button" class="btn-set-date"><span>27</span></button></td>
<td><button type="button" class="btn-set-date"><span>28</span></button></td>
<td><button type="button" class="btn-set-date"><span>29</span></button></td>
<td class="today"><button type="button" class="btn-set-date"><span>30</span></button></td>
</tr>
<tr>
<td class="day-off"><button type="button" class="btn-set-date"><span>31</span></button></td>
<td class="new"><button type="button" class="btn-set-date"><span>1</span></button></td>
<td class="new"><button type="button" class="btn-set-date"><span>2</span></button></td>
<td class="new"><button type="button" class="btn-set-date"><span>3</span></button></td>
<td class="new"><button type="button" class="btn-set-date"><span>4</span></button></td>
<td class="new"><button type="button" class="btn-set-date"><span>5</span></button></td>
<td class="new"><button type="button" class="btn-set-date"><span>6</span></button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="calendar-footer">
<div class="calendar-btn-wrap">
<button type="button" class="krds-btn small text" id="get-today">오늘</button>
<button type="button" class="krds-btn small tertiary">취소</button>
<button type="button" class="krds-btn small primary">확인</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
// 캘린더 컴포넌트
// 날짜 선택 캘린더입니다.
import { ref } from 'vue'
// 필요한 상태 및 메서드 정의
const isActive = ref(false)
const handleClick = () => {
isActive.value = !isActive.value
}
</script>컴포넌트 정보
- 파일명
- calendar.html
- 카테고리
- 유틸리티
- 난이도
- 어려움