didirus/AstralRinth
5
10
Fork 33
Code Issues 2 Pull Requests Packages Projects Releases 12 Wiki Activity

feat: swap date input to use date picker (#6146)

Browse Source 
* feat: swap date input to use date picker

* feat: update date picker to analytics branch changes

* feat: polish date picker usage
This commit is contained in:
Truman Gao
2026-05-20 11:50:46 -06:00
committed by GitHub
parent 3eeb549d20
commit d8b1415f9c
6 changed files with 836 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/base/DatePicker.vue
+643 -46
View File
File diff suppressed because it is too large Load Diff
packages/ui/src/stories/base/DatePicker.stories.ts
+167 -1
View File
@@ -94,6 +94,28 @@ export const Range: Story = {
}),
}
export const SameDayRange: Story = {
render: () => ({
components: { DatePicker },
setup() {
const value = ref(['2026-04-27', '2026-04-27'])
return { value }
},
template: /* html */ `
<div class="flex max-w-sm flex-col gap-2">
<DatePicker
v-model="value"
wrapperClass="w-[350px]"
mode="range"
default-view-date="2026-04-01"
placeholder="Select a date range..."
/>
<p class="text-sm text-secondary">Selected value: {{ value?.join(' to ') || 'None' }}</p>
</div>
`,
}),
}
export const TwoMonthRange: Story = {
render: () => ({
components: { DatePicker },
@@ -125,7 +147,61 @@ export const TwoMonthRange: Story = {
}),
}
export const DraggableRange: Story = {
export const TwoMonthRangeAlignedRight: Story = {
render: () => ({
components: { DatePicker },
setup() {
const value = ref(['2033-11-16', '2033-12-21'])
const datePicker = ref<InstanceType<typeof DatePicker> | null>(null)
onMounted(async () => {
await nextTick()
datePicker.value?.open()
})
return { datePicker, value }
},
template: /* html */ `
<div class="flex h-[460px] max-w-[700px] flex-col gap-2">
<DatePicker
ref="datePicker"
v-model="value"
wrapperClass="w-[350px]"
mode="range"
:show-months="2"
view-date-alignment="right"
placeholder="Select a date range..."
/>
<p class="text-sm text-secondary">Selected value: {{ value?.join(' to ') || 'None' }}</p>
</div>
`,
}),
}
export const TwoMonthCalendarOnlyRange: Story = {
render: () => ({
components: { DatePicker },
setup() {
const value = ref(['2033-11-16', '2033-12-21'])
return { value }
},
template: /* html */ `
<div class="flex max-w-[700px] flex-col gap-2">
<DatePicker
v-model="value"
wrapperClass="w-full"
mode="range"
:show-months="2"
calendar-only
default-view-date="2033-11-01"
/>
<p class="text-sm text-secondary">Selected value: {{ value?.join(' to ') || 'None' }}</p>
</div>
`,
}),
}
export const AdjustableRange: Story = {
render: () => ({
components: { DatePicker },
setup() {
@@ -150,6 +226,9 @@ export const DraggableRange: Story = {
placeholder="Select a date range..."
/>
<p class="text-sm text-secondary">Selected value: {{ value?.join(' to ') || 'None' }}</p>
<p class="text-xs text-secondary">
Drag either endpoint, or click an endpoint, hover to preview, and click another day to move it.
</p>
</div>
`,
}),
@@ -213,6 +292,35 @@ export const OpenCalendar: Story = {
}),
}
export const ForceAbove: Story = {
render: () => ({
components: { DatePicker },
setup() {
const value = ref('2026-06-15')
const datePicker = ref<InstanceType<typeof DatePicker> | null>(null)
onMounted(async () => {
await nextTick()
datePicker.value?.open()
})
return { datePicker, value }
},
template: /* html */ `
<div class="flex h-[420px] max-w-sm flex-col justify-end gap-2 pb-6">
<DatePicker
ref="datePicker"
v-model="value"
wrapperClass="w-[300px]"
default-view-date="2026-06-01"
position="above"
/>
<p class="text-sm text-secondary">Selected value: {{ value || 'None' }}</p>
</div>
`,
}),
}
export const PreserveDay: Story = {
render: () => ({
components: { DatePicker },
@@ -270,9 +378,67 @@ export const ShowToday: Story = {
}),
}
export const InsideClippedContainer: Story = {
render: () => ({
components: { DatePicker },
setup() {
const value = ref('2026-04-27')
const datePicker = ref<InstanceType<typeof DatePicker> | null>(null)
onMounted(async () => {
await nextTick()
datePicker.value?.open()
})
return { datePicker, value }
},
template: /* html */ `
<div class="h-[220px] w-[360px] overflow-hidden rounded-xl border border-solid border-surface-5 bg-surface-2 p-4">
<div class="flex flex-col gap-2">
<DatePicker
ref="datePicker"
v-model="value"
wrapperClass="w-[300px]"
placeholder="Select a date..."
/>
<p class="text-sm text-secondary">Selected value: {{ value || 'None' }}</p>
</div>
</div>
`,
}),
}
export const Disabled: Story = {
args: {
modelValue: '2026-04-27',
disabled: true,
},
}
export const CalendarClass: Story = {
render: () => ({
components: { DatePicker },
setup() {
const value = ref('2026-04-27')
const datePicker = ref<InstanceType<typeof DatePicker> | null>(null)
onMounted(async () => {
await nextTick()
datePicker.value?.open()
})
return { datePicker, value }
},
template: /* html */ `
<div class="flex h-[420px] max-w-sm flex-col gap-2">
<DatePicker
ref="datePicker"
v-model="value"
wrapperClass="w-[300px]"
calendar-class="ring-2 ring-brand"
/>
<p class="text-sm text-secondary">Calendar has a brand-colored ring applied via calendarClass.</p>
</div>
`,
}),
}