mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Calendar): allow default-date to be null (#7116)
This commit is contained in:
parent
afb8ac5443
commit
aefec84e14
@ -232,7 +232,7 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
|
|||||||
| color | Color for the bottom button and selected date | _string_ | `#ee0a24` |
|
| color | Color for the bottom button and selected date | _string_ | `#ee0a24` |
|
||||||
| min-date | Min date | _Date_ | Today |
|
| min-date | Min date | _Date_ | Today |
|
||||||
| max-date | Max date | _Date_ | Six months after the today |
|
| max-date | Max date | _Date_ | Six months after the today |
|
||||||
| default-date | Default selected date | _Date \| Date[]_ | Today |
|
| default-date | Default selected date | _Date \| Date[] \| null_ | Today |
|
||||||
| row-height | Row height | _number \| string_ | `64` |
|
| row-height | Row height | _number \| string_ | `64` |
|
||||||
| formatter | Day formatter | _(day: Day) => Day_ | - |
|
| formatter | Day formatter | _(day: Day) => Day_ | - |
|
||||||
| poppable | Whether to show the calendar inside a popup | _boolean_ | `true` |
|
| poppable | Whether to show the calendar inside a popup | _boolean_ | `true` |
|
||||||
|
@ -234,7 +234,7 @@ export default {
|
|||||||
| color | 主题色,对底部按钮和选中日期生效 | _string_ | `#ee0a24` |
|
| color | 主题色,对底部按钮和选中日期生效 | _string_ | `#ee0a24` |
|
||||||
| min-date | 可选择的最小日期 | _Date_ | 当前日期 |
|
| min-date | 可选择的最小日期 | _Date_ | 当前日期 |
|
||||||
| max-date | 可选择的最大日期 | _Date_ | 当前日期的六个月后 |
|
| max-date | 可选择的最大日期 | _Date_ | 当前日期的六个月后 |
|
||||||
| default-date | 默认选中的日期,`type`为`multiple`或`range`时为数组 | _Date \| Date[]_ | 今天 |
|
| default-date | 默认选中的日期,`type` 为 `multiple` 或 `range` 时为数组,传入 `null` 表示默认不选择 | _Date \| Date[] \| null_ | 今天 |
|
||||||
| row-height | 日期行高 | _number \| string_ | `64` |
|
| row-height | 日期行高 | _number \| string_ | `64` |
|
||||||
| formatter | 日期格式化函数 | _(day: Day) => Day_ | - |
|
| formatter | 日期格式化函数 | _(day: Day) => Day_ | - |
|
||||||
| poppable | 是否以弹层的形式展示日历 | _boolean_ | `true` |
|
| poppable | 是否以弹层的形式展示日历 | _boolean_ | `true` |
|
||||||
|
@ -189,6 +189,10 @@ export default createComponent({
|
|||||||
return 'disabled';
|
return 'disabled';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (currentDate === null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (type === 'single') {
|
if (type === 'single') {
|
||||||
return compareDay(day, currentDate) === 0 ? 'selected' : '';
|
return compareDay(day, currentDate) === 0 ? 'selected' : '';
|
||||||
}
|
}
|
||||||
|
@ -136,13 +136,14 @@ export default createComponent({
|
|||||||
buttonDisabled() {
|
buttonDisabled() {
|
||||||
const { type, currentDate } = this;
|
const { type, currentDate } = this;
|
||||||
|
|
||||||
|
if (currentDate) {
|
||||||
if (type === 'range') {
|
if (type === 'range') {
|
||||||
return !currentDate[0] || !currentDate[1];
|
return !currentDate[0] || !currentDate[1];
|
||||||
}
|
}
|
||||||
|
|
||||||
if (type === 'multiple') {
|
if (type === 'multiple') {
|
||||||
return !currentDate.length;
|
return !currentDate.length;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return !currentDate;
|
return !currentDate;
|
||||||
},
|
},
|
||||||
@ -198,6 +199,11 @@ export default createComponent({
|
|||||||
scrollIntoView() {
|
scrollIntoView() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
const { currentDate } = this;
|
const { currentDate } = this;
|
||||||
|
|
||||||
|
if (!currentDate) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const targetDate =
|
const targetDate =
|
||||||
this.type === 'single' ? currentDate : currentDate[0];
|
this.type === 'single' ? currentDate : currentDate[0];
|
||||||
const displayed = this.value || !this.poppable;
|
const displayed = this.value || !this.poppable;
|
||||||
@ -222,6 +228,10 @@ export default createComponent({
|
|||||||
getInitialDate() {
|
getInitialDate() {
|
||||||
const { type, minDate, maxDate, defaultDate } = this;
|
const { type, minDate, maxDate, defaultDate } = this;
|
||||||
|
|
||||||
|
if (defaultDate === null) {
|
||||||
|
return defaultDate;
|
||||||
|
}
|
||||||
|
|
||||||
let defaultVal = new Date();
|
let defaultVal = new Date();
|
||||||
|
|
||||||
if (compareDay(defaultVal, minDate) === -1) {
|
if (compareDay(defaultVal, minDate) === -1) {
|
||||||
@ -295,6 +305,11 @@ export default createComponent({
|
|||||||
const { type, currentDate } = this;
|
const { type, currentDate } = this;
|
||||||
|
|
||||||
if (type === 'range') {
|
if (type === 'range') {
|
||||||
|
if (!currentDate) {
|
||||||
|
this.select([date, null]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const [startDay, endDay] = currentDate;
|
const [startDay, endDay] = currentDate;
|
||||||
|
|
||||||
if (startDay && !endDay) {
|
if (startDay && !endDay) {
|
||||||
@ -311,8 +326,12 @@ export default createComponent({
|
|||||||
this.select([date, null]);
|
this.select([date, null]);
|
||||||
}
|
}
|
||||||
} else if (type === 'multiple') {
|
} else if (type === 'multiple') {
|
||||||
let selectedIndex;
|
if (!currentDate) {
|
||||||
|
this.select([date]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let selectedIndex;
|
||||||
const selected = this.currentDate.some((dateItem, index) => {
|
const selected = this.currentDate.some((dateItem, index) => {
|
||||||
const equal = compareDay(dateItem, date) === 0;
|
const equal = compareDay(dateItem, date) === 0;
|
||||||
if (equal) {
|
if (equal) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user