ScDateRangePicker

ScDateRangePicker 컴포넌트는 시작 날짜와 종료 날짜를 한 번에 선택할 수 있는 입력 필드를 제공합니다. 두 개의 ScTextField와 달력 레이어를 활용하여 날짜 범위를 지정하며, 읽기전용, 날짜 제한, 포맷, 레이어 위치, 유효성 검사 등 다양한 옵션을 지원합니다.

---

✅ 기본 사용법

  ~  

결과 : [ "20250407", "20250413" ]

<div class="w-[300px]">
  <sc-date-range-picker v-model="date" @change="onChange" />
  <div class="mt-5 text-sm">결과 : {{ date }}</div>
</div>

<script setup>
const date = ref(['20250407', '20250413']);

const onChange = (value) => {
  console.log('Selected date range:', value);
};
</script>

---

✨ 사용 예시 모음

▸ 커스텀 기간 버튼 (period 슬롯) 프리셋 버튼

오늘날짜로 부터 최근 날짜를 설정할 수 있습니다. d(day), w(week), m(month), y(year) 를 사용 할 수 있습니다.

  ~  

결과 : [ "", "" ]

<div class="w-[300px]">
  <sc-date-range-picker v-model="date2" @change="onChange">
    <template #period="{ setPeriod }">
      <sc-button type="round" @click="setPeriod(-7, 'd')">최근 7일</sc-button>
      <sc-button type="round" @click="setPeriod(-2, 'w')">최근 2주</sc-button>
      <sc-button type="round" @click="setPeriod(-1, 'm')">최근 한달</sc-button>
    </template>
  </sc-date-range-picker>
  <div class="mt-5 text-sm">결과 : {{ date2 }}</div>
</div>

---

▸ 정렬 align: left, right

날짜 팝업창의 위치를 조절할 수 있습니다. 기본값: left

  ~  

  ~  

<div class="w-[300px]">
  <sc-date-range-picker v-model="date" align="left" />
</div>
<div class="mt-5 w-[300px]">
  <sc-date-range-picker v-model="date" align="right" />
</div>

---

▸ 날짜 제한 (minDate, maxDate)

  ~  

<div class="w-[300px]">
  <sc-date-range-picker
    v-model:modelValue="date3"
    min-date="20250407"
    max-date="20250411"
  />
</div>

---

▸ 비활성화 및 읽기전용

  ~  

  ~  

<div class="w-[300px]">
  <sc-date-range-picker v-model="date" disabled />
  <sc-date-range-picker v-model="date" readonly />
</div>

---

🛠️ 속성 (Props)

이름	타입	기본값	설명
inputType	String	'YYYY/MM/DD'	입력 필드 표시 형식
modelType	String	'YYYYMMDD'	v-model에 바인딩되는 날짜 형식
modelValue	Array<String>	['','']	선택된 날짜 범위 배열 [start, end] (필수)
clearable	Boolean	true	클리어(초기화) 버튼 표시 여부
disabled	Boolean	false	입력 비활성화
readonly	Boolean	false	읽기전용
size	String	'medium'	컴포넌트 크기: small, medium, large
minDate	String	null	선택 가능한 최소 날짜 (modelType 형식)
maxDate	String	null	선택 가능한 최대 날짜
align	String	'left'	레이어 정렬 방향: left, right
rules	Array<Function>	[]	유효성 검사용 함수 배열

---

📤 이벤트 (Emits)

이벤트 이름	설명
update:modelValue	v-model 업데이트 이벤트: [start, end] 배열
change	날짜 범위 선택 완료 후 발생 이벤트: [start, end] 배열
open	달력 레이어가 열릴 때 발생 이벤트

---

🔳 슬롯 (Slots)

슬롯 이름	설명
period	커스텀 기간 버튼 등 추가 컨트롤 정의, slot props: { setPeriod }

---

🎨 스타일 클래스

클래스 이름	설명
.sc-date-range-picker	컴포넌트 최상위 래퍼
.sc-textfield-container	텍스트 필드 및 버튼을 감싸는 래퍼
.separator	시작/종료 필드 사이 구분 기호 (span)
.picker-layer	달력 레이어 팝업 컨테이너
.calendar	달력 뷰 내부 컨테이너
.message	유효성 에러 메시지 표시 영역
.invalid	유효성 검사 실패 시 최상위에 추가되는 클래스
small / medium / large	컴포넌트 크기별 클래스

---