svcm/oa
1
0
Fork 0
mirror of https://git.hmsn.ink/kospo/svcm/oa.git synced 2026-03-20 07:53:48 +09:00
Code Issues Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
bangae1
2025-05-24 01:49:48 +09:00
commit 62abbcf4eb
2376 changed files with 325522 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
documentation/plugins/datepicker/datepicker-range-documentation.md Normal file
View File

@@ -0,0 +1,80 @@
---
state:
range:
start: 2021-02-08
end: 2021-02-14
---
### DateRangepicker
`<VCalendar />` can be turned into a date range picker if needed. Check the
code example for more details about usage.
<!--code-->
```vue
<script setup lang="ts">
const range = reactive({
start: new Date(),
end: new Date(),
})
</script>
<template>
<ClientOnly>
<VDatePicker
v-model.range="range"
color="green"
trim-weeks
>
<template #default="{ inputValue, inputEvents }">
<VField addons>
<VControl>
<input
class="input v-input"
type="text"
:value="inputValue.start"
v-on="inputEvents.start"
>
</VControl>
<VControl>
<VButton static icon="lucide:arrow-right" />
</VControl>
<VControl subcontrol>
<input
class="input v-input"
type="text"
:value="inputValue.end"
v-on="inputEvents.end"
>
</VControl>
</VField>
</template>
</VDatePicker>
</ClientOnly>
</template>
```
<!--/code-->
<!--example-->
<ClientOnly>
<VDatePicker v-model.range="frontmatter.state.range" color="green" trim-weeks>
<template v-slot="{ inputValue, inputEvents }">
<VField addons>
<VControl expanded icon="lucide:corner-down-right">
<input class="input v-input" type="text" :value="inputValue.start" v-on="inputEvents.start" />
</VControl>
<VControl>
<VButton static>to</VButton>
</VControl>
<VControl expanded icon="lucide:corner-right-up" subcontrol>
<input class="input v-input" type="text" :value="inputValue.end" v-on="inputEvents.end" />
</VControl>
</VField>
</template>
</VDatePicker>
</ClientOnly>
<!--/example-->