alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

docs(PickerGroup): add constraints to the end date (#13334)

Browse Source
This commit is contained in:
inottn
2025-02-01 13:17:07 +08:00
committed by GitHub
parent 74e44b8604
commit 9722629c32
2 changed files with 30 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/vant/src/picker-group/README.md
+15 -2
View File
@@ -147,18 +147,30 @@ Place two `DatePicker` components in the default slot of `PickerGroup` to select
:min-date="minDate" :min-date="minDate"
:max-date="maxDate" :max-date="maxDate"
/> />
<van-date-picker v-model="endDate" :min-date="minDate" :max-date="maxDate" /> <van-date-picker
v-model="endDate"
:min-date="endMinDate"
:max-date="maxDate"
/>
</van-picker-group> </van-picker-group>
``` ```
```js ```js
import { ref } from 'vue'; import { computed, ref } from 'vue';
import { showToast } from 'vant'; import { showToast } from 'vant';
export default { export default {
setup() { setup() {
const startDate = ref(['2022', '06', '01']); const startDate = ref(['2022', '06', '01']);
const endDate = ref(['2023', '06', '01']); const endDate = ref(['2023', '06', '01']);
const endMinDate = computed(
() =>
new Date(
Number(startDate.value[0]),
Number(startDate.value[1]) - 1,
Number(startDate.value[2]),
),
);
const onConfirm = () => { const onConfirm = () => {
showToast(`${startDate.value.join('/')} ${endDate.value.join('/')}`); showToast(`${startDate.value.join('/')} ${endDate.value.join('/')}`);
@@ -171,6 +183,7 @@ export default {
return { return {
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 5, 1), maxDate: new Date(2025, 5, 1),
endMinDate,
endDate, endDate,
startDate, startDate,
onConfirm, onConfirm,
packages/vant/src/picker-group/README.zh-CN.md
+15 -2
View File
@@ -147,18 +147,30 @@ export default {
:min-date="minDate" :min-date="minDate"
:max-date="maxDate" :max-date="maxDate"
/> />
<van-date-picker v-model="endDate" :min-date="minDate" :max-date="maxDate" /> <van-date-picker
v-model="endDate"
:min-date="endMinDate"
:max-date="maxDate"
/>
</van-picker-group> </van-picker-group>
``` ```
```js ```js
import { ref } from 'vue'; import { computed, ref } from 'vue';
import { showToast } from 'vant'; import { showToast } from 'vant';
export default { export default {
setup() { setup() {
const startDate = ref(['2022', '06', '01']); const startDate = ref(['2022', '06', '01']);
const endDate = ref(['2023', '06', '01']); const endDate = ref(['2023', '06', '01']);
const endMinDate = computed(
() =>
new Date(
Number(startDate.value[0]),
Number(startDate.value[1]) - 1,
Number(startDate.value[2]),
),
);
const onConfirm = () => { const onConfirm = () => {
showToast(`${startDate.value.join('/')} ${endDate.value.join('/')}`); showToast(`${startDate.value.join('/')} ${endDate.value.join('/')}`);
@@ -171,6 +183,7 @@ export default {
return { return {
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 5, 1), maxDate: new Date(2025, 5, 1),
endMinDate,
endDate, endDate,
startDate, startDate,
onConfirm, onConfirm,