Standalone Date Picker
DatePicker를 inline 모드로 열어 입력 없이 독립 달력 선택 흐름을 구성합니다.
2026. 06. 12.
| 월 | 화 | 수 | 목 | 금 | 토 | 일 |
|---|---|---|---|---|---|---|
<script lang="ts">
import * as DatePicker from '@odbd/svelte/date-picker'
import { parseDate } from '@odbd/svelte/date-picker'
const selectedDate = parseDate('2026-06-12')
</script>
<div class="examples-standalone-date">
<DatePicker.Root
inline
defaultOpen
defaultValue={[selectedDate]}
defaultFocusedValue={selectedDate}
locale="ko-KR"
startOfWeek={1}
fixedWeeks
class="examples-standalone-date__picker"
>
<div class="examples-standalone-date__summary">
<DatePicker.Label>배포일</DatePicker.Label>
<DatePicker.ValueText />
</div>
<DatePicker.Content>
<DatePicker.View view="day">
<DatePicker.Context>
{#snippet render(api)}
<DatePicker.ViewControl>
<DatePicker.PrevTrigger aria-label="이전 달">‹</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger aria-label="다음 달">›</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableRow>
{#each api().weekDays as weekDay}
<DatePicker.TableHeader>{weekDay.narrow}</DatePicker.TableHeader>
{/each}
</DatePicker.TableRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{#each api().weeks as week}
<DatePicker.TableRow>
{#each week as day}
<DatePicker.TableCell value={day}>
<DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
{/each}
</DatePicker.TableRow>
{/each}
</DatePicker.TableBody>
</DatePicker.Table>
{/snippet}
</DatePicker.Context>
</DatePicker.View>
<!-- PresetTrigger는 전부 range 프리셋이라 단일 선택 picker를 2개 값으로
오염시킨다 — selectToday()로 단일 날짜를 선택한다 -->
<DatePicker.Context>
{#snippet render(api)}
<div class="examples-standalone-date__actions">
<button
type="button"
class="odbd-button"
data-variant="ghost"
data-size="sm"
onclick={() => api().selectToday()}>오늘</button
>
<DatePicker.ClearTrigger>지우기</DatePicker.ClearTrigger>
</div>
{/snippet}
</DatePicker.Context>
</DatePicker.Content>
</DatePicker.Root>
</div>
<style>
.examples-standalone-date {
display: grid;
width: min(100%, 22rem);
place-items: center;
}
.examples-standalone-date__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--odbd-space-3);
}
.examples-standalone-date__summary :global(.odbd-date-picker__value-text) {
color: var(--odbd-color-muted-foreground);
font-size: var(--odbd-font-size-sm);
}
.examples-standalone-date :global(.odbd-date-picker__content) {
width: 100%;
box-shadow: var(--odbd-shadow-sm);
}
.examples-standalone-date__actions {
display: flex;
justify-content: flex-end;
gap: var(--odbd-space-2);
}
@media (max-width: 420px) {
.examples-standalone-date {
width: min(100%, 19rem);
}
.examples-standalone-date :global(.odbd-date-picker__table-cell-trigger) {
width: 2rem;
height: 2rem;
}
}
</style>