docs(PickerGroup): add constraints to the end date

youzan · Feb 1, 2025 · dc4f251 · dc4f251
1 parent 74e44b8
commit dc4f251
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/packages/vant/src/picker-group/README.md b/packages/vant/src/picker-group/README.md
@@ -147,18 +147,30 @@ Place two `DatePicker` components in the default slot of `PickerGroup` to select
     :min-date="minDate"
     :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>
 ```
 
 ```js
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { showToast } from 'vant';
 
 export default {
   setup() {
     const startDate = ref(['2022', '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 = () => {
       showToast(`${startDate.value.join('/')} ${endDate.value.join('/')}`);
@@ -171,6 +183,7 @@ export default {
     return {
       minDate: new Date(2020, 0, 1),
       maxDate: new Date(2025, 5, 1),
+      endMinDate,
       endDate,
       startDate,
       onConfirm,

diff --git a/packages/vant/src/picker-group/README.zh-CN.md b/packages/vant/src/picker-group/README.zh-CN.md
@@ -147,18 +147,30 @@ export default {
     :min-date="minDate"
     :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>
 ```
 
 ```js
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { showToast } from 'vant';
 
 export default {
   setup() {
     const startDate = ref(['2022', '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 = () => {
       showToast(`${startDate.value.join('/')} ${endDate.value.join('/')}`);
@@ -171,6 +183,7 @@ export default {
     return {
       minDate: new Date(2020, 0, 1),
       maxDate: new Date(2025, 5, 1),
+      endMinDate,
       endDate,
       startDate,
       onConfirm,