Skip to content

Commit

Permalink
fix: 日历更新外部值的时机
Browse files Browse the repository at this point in the history
  • Loading branch information
@YufJi
YufJi committed Jan 29, 2024
1 parent 60211af commit f86c553
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 205 deletions.
230 changes: 34 additions & 196 deletions src/calendar/demo/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,33 @@
<template>
<demo-section>
<demo-block>
<div>date: {{ date }}</div>
<div>start: {{ start }}</div>
<div>end: {{ end }}</div>
<van-calendar
label-field="日历选择"
:value.sync="start"
:min-date="min"
:max-date="end"
title="选择日期"
></van-calendar>
<van-calendar
label-field="日历选择"
:value.sync="end"
:min-date="start"
:max-date="max"
title="选择日期"
></van-calendar>
<button @click="clear">clear</button>
<demo-block title="基础用法--单日期">
<van-cell>
<template #title>
<span>日期选择</span>
</template>
<van-calendar
:value.sync="date1"
:min-date="min"
:max-date="end"
title="选择日期"
@confirm="onConfirm1"
@select="onSelect1"
></van-calendar>
</van-cell>
</demo-block>

<demo-block title="全量渲染节点">
<van-calendar
label-field="日历选择"
:value.sync="start"
:min-date="min"
:max-date="end"
title="选择日期"
:lazyRender="false"
></van-calendar>
</demo-block>

<demo-block card title="临时测试">
<van-cell>
<template #title>
<span>日期选择</span>
</template>
<van-calendar
label-field="日历选择"
:min-date="min"
:max-date="end"
title="选择日期"
:lazyRender="true"
:close-on-click-overlay="true"
:lazyRender="false"
></van-calendar>
</van-cell>
</demo-block>

<demo-block title="占位符">
Expand All @@ -57,178 +46,27 @@

<script>
export default {
i18n: {
'zh-CN': {
in: '入店',
out: '离店',
today: '今天',
laborDay: '劳动节',
youthDay: '青年节',
calendar: '日历',
maxRange: '日期区间最大范围',
selectCount: (count) => `选择了 ${count} 个日期`,
selectSingle: '选择单个日期',
selectMultiple: '选择多个日期',
selectRange: '选择日期区间',
quickSelect: '快捷选择',
confirmText: '完成',
customColor: '自定义颜色',
customRange: '自定义日期范围',
customConfirm: '自定义按钮文字',
customDayText: '自定义日期文案',
customPosition: '自定义弹出位置',
customCalendar: '自定义日历',
confirmDisabledText: '请选择结束时间',
firstDayOfWeek: '自定义周起始日',
tiledDisplay: '平铺展示',
},
'en-US': {
in: 'In',
out: 'Out',
today: 'Today',
laborDay: 'Labor day',
youthDay: 'Youth Day',
calendar: 'Calendar',
maxRange: 'Max Range',
selectCount: (count) => `${count} dates selected`,
selectSingle: 'Select Single Date',
selectMultiple: 'Select Multiple Date',
selectRange: 'Select Date Range',
quickSelect: 'Quick Select',
confirmText: 'OK',
customColor: 'Custom Color',
customRange: 'Custom Date Range',
customConfirm: 'Custom Confirm Text',
customDayText: 'Custom Day Text',
customPosition: 'Custom Position',
customCalendar: 'Custom Calendar',
firstDayOfWeek: 'Custom First Day Of Week',
confirmDisabledText: 'Select End Time',
tiledDisplay: 'Tiled display',
},
},
data() {
return {
date: '2023-10-11',
start: null,
end: null,
min: '1900-01-01',
max: '2050-12-31',
};
},
methods: {
resetSettings() {
this.round = true;
this.color = undefined;
this.minDate = undefined;
this.maxDate = undefined;
this.maxRange = undefined;
this.position = undefined;
this.formatter = undefined;
this.showConfirm = true;
this.confirmText = undefined;
this.confirmDisabledText = undefined;
this.firstDayOfWeek = 0;
},
show(type, id) {
this.resetSettings();
this.id = id;
this.type = type;
this.showCalendar = true;
switch (id) {
case 'quickSelect1':
case 'quickSelect2':
this.showConfirm = false;
break;
case 'customColor':
this.color = '#1989fa';
break;
case 'customConfirm':
this.confirmText = this.t('confirmText');
this.confirmDisabledText = this.t('confirmDisabledText');
break;
case 'customRange':
this.minDate = new Date(2010, 0, 1);
this.maxDate = new Date(2010, 0, 31);
break;
case 'customDayText':
this.minDate = new Date(2010, 4, 1);
this.maxDate = new Date(2010, 4, 31);
this.formatter = this.dayFormatter;
break;
case 'customPosition':
this.round = false;
this.position = 'right';
break;
case 'maxRange':
this.maxRange = 3;
break;
case 'firstDayOfWeek':
this.firstDayOfWeek = 1;
break;
}
},
dayFormatter(day) {
const month = day.date.getMonth() + 1;
const date = day.date.getDate();
if (month === 5) {
if (date === 1) {
day.topInfo = this.t('laborDay');
} else if (date === 4) {
day.topInfo = this.t('youthDay');
} else if (date === 11) {
day.text = this.t('today');
}
}
if (day.type === 'start') {
day.bottomInfo = this.t('in');
} else if (day.type === 'end') {
day.bottomInfo = this.t('out');
}
return day;
},
formatDate(date) {
if (date) {
return `${date.getMonth() + 1}/${date.getDate()}`;
}
},
formatFullDate(date) {
if (date) {
return `${date.getFullYear()}/${this.formatDate(date)}`;
}
},
date1: '2023-10-11',
formatMultiple(dates) {
if (dates.length) {
return this.t('selectCount', dates.length);
}
},
start: null,
end: null,
formatRange(dateRange) {
if (dateRange.length) {
const [start, end] = dateRange;
return `${this.formatDate(start)} - ${this.formatDate(end)}`;
}
},
};
},
onConfirm(date) {
this.showCalendar = false;
this.date[this.id] = date;
methods: {
onSelect1(date) {
console.log('onSelect1 date: ', date);
console.log('date1: ', this.date1);
},
clear() {
this.date = null
this.start = null
this.end = null
onConfirm1(date) {
console.log('onConfirm1 date: ', date);
console.log('date1: ', this.date1);
}
},
};
Expand Down
30 changes: 21 additions & 9 deletions src/calendar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,10 +190,6 @@ export default createComponent({
},
currentValue(val) {
this.tempValue = val;

const date = dayjs(val)
this.$emit('update:value', date.isValid() ? date.format('YYYY-MM-DD') : val);
this.$emit('update:default-date', date.isValid() ? date.format('YYYY-MM-DD') : val);
},
defaultDate: {
handler(val) {
Expand Down Expand Up @@ -238,8 +234,13 @@ export default createComponent({

return '';
},
setCurrentDate(date) {
this.currentValue = date;
setCurrentDate(val) {
this.currentValue = val;

const date = dayjs(this.currentValue);
const value = date.isValid() ? date.format('YYYY-MM-DD') : this.currentValue;
this.$emit('update:value', value);
this.$emit('update:default-date', value);
},
ifDesigner() {
return this.$env && this.$env.VUE_APP_DESIGNER;
Expand All @@ -254,8 +255,13 @@ export default createComponent({
}
},
// @exposed-api
reset(date = this.getInitialDate()) {
this.currentValue = date;
reset(val = this.getInitialDate()) {
this.currentValue = val;

const date = dayjs(this.currentValue);
const value = date.isValid() ? date.format('YYYY-MM-DD') : this.currentValue;
this.$emit('update:value', value);
this.$emit('update:default-date', value);
this.scrollIntoView();
},

Expand Down Expand Up @@ -399,7 +405,13 @@ export default createComponent({

onConfirm() {
this.currentValue = this.currentDate;
this.$emit('confirm', dayjs(this.currentValue).format('YYYY-MM-DD'));

const date = dayjs(this.currentValue);
const value = date.isValid() ? date.format('YYYY-MM-DD') : this.currentValue;
this.$emit('update:value', value);
this.$emit('update:default-date', value);

this.$emit('confirm', value);

this.togglePopup();
},
Expand Down

0 comments on commit f86c553

Please sign in to comment.