Skip to content

Commit d4f63d3

Browse files
TangSYTangSY
committed
refactor: 重构single类型日历
1 parent b2ae59a commit d4f63d3

File tree

5 files changed

+361
-295
lines changed

5 files changed

+361
-295
lines changed

‎src/calendar/Calendar.tsx

+146-93
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import type {
2525
ThemeColorType,
2626
WeekStartType,
2727
SelectType,
28+
CalendarYearMonthType,
2829
} from './types';
2930

3031
// Utils
@@ -118,17 +119,14 @@ export default defineComponent({
118119

119120
setup(props, { emit, slots }) {
120121
const calendarRef = ref<CalendarDateInstance>();
121-
const checkedDate = ref<CalendarDateType | CalendarDateType[]>({
122-
year: new Date().getFullYear(),
123-
month: new Date().getMonth(),
124-
day: new Date().getDate(),
125-
hours: new Date().getHours(),
126-
minutes: new Date().getMinutes(),
127-
});
128122
const isShowCalendar = ref(true);
129123
const isShowWeek = ref(props.showWeekView);
130124
const calendarBodyHeight = ref(0);
131125
const firstTimes = ref(true);
126+
const currentYearMonth = ref<CalendarYearMonthType>({
127+
year: new Date().getFullYear(),
128+
month: new Date().getMonth(),
129+
});
132130

133131
const limitDateRange = (
134132
date: Date,
@@ -179,15 +177,19 @@ export default defineComponent({
179177
defaultDatetime = nowDatetime;
180178
}
181179

182-
console.log(
183-
'limitDateRange(defaultDatetime)',
184-
limitDateRange(defaultDatetime)
185-
);
186-
console.log('defaultDatetime', defaultDatetime);
187180
return limitDateRange(defaultDatetime);
188181
};
189182

190183
const currDateTime = ref(getInitialDateTime());
184+
const checkedDate = ref<CalendarDateType[]>([
185+
{
186+
year: new Date().getFullYear(),
187+
month: new Date().getMonth(),
188+
day: new Date().getDate(),
189+
hours: new Date().getHours(),
190+
minutes: new Date().getMinutes(),
191+
},
192+
]);
191193
const yearMonthType = ref<CalendarPanelType>('date');
192194

193195
const isShowDatetimePicker = computed({
@@ -262,15 +264,16 @@ export default defineComponent({
262264

263265
const dateClick = (date: CalendarDateType[], type?: CalendarPanelType) => {
264266
if (props.selectType === 'single') {
265-
checkedDate.value = {
266-
...checkedDate.value,
267-
...date[0],
268-
} as CalendarDateType;
267+
checkedDate.value = [
268+
{
269+
...checkedDate.value[0],
270+
...date[0],
271+
},
272+
];
273+
const { year, month, day, hours, minutes } = checkedDate.value[0];
269274

270275
let fDate: EmitDateType = new Date(
271-
`${checkedDate.value.year}/${checkedDate.value.month + 1}/${
272-
checkedDate.value.day
273-
} ${checkedDate.value.hours}:${checkedDate.value.minutes}`
276+
`${year}/${month + 1}/${day} ${hours}:${minutes}`
274277
);
275278
if (props.format) {
276279
fDate = formatDate(fDate, props.format, props.lang);
@@ -286,25 +289,37 @@ export default defineComponent({
286289
yearMonthType.value = 'month';
287290
break;
288291
case 'month':
289-
currDateTime.value = new Date(fDate);
290292
yearMonthType.value = 'date';
291293
break;
292294
}
293295

296+
currDateTime.value = new Date(fDate);
297+
294298
emit('calendarTypeChange', yearMonthType.value);
295299
}
296300

297301
emit('click', fDate);
298302
}
299303
};
300304

301-
const timeChange = (date: CalendarDateType) => {
302-
if (Array.isArray(checkedDate.value)) return;
305+
const yearMonthClick = (
306+
date: CalendarDateType,
307+
type: CalendarPanelType
308+
) => {
309+
dateClick([date], type);
310+
};
303311

304-
date.year = checkedDate.value.year;
305-
date.month = checkedDate.value.month;
306-
date.day = checkedDate.value.day;
307-
checkedDate.value = date;
312+
const timeChange = (date: CalendarDateType) => {
313+
if (props.selectType === 'single') {
314+
const { minutes, hours } = date;
315+
checkedDate.value = [
316+
{
317+
...checkedDate.value[0],
318+
hours,
319+
minutes,
320+
},
321+
];
322+
}
308323
};
309324

310325
const close = () => {
@@ -313,17 +328,18 @@ export default defineComponent({
313328

314329
// 确认选择时间
315330
const confirm = () => {
316-
if (Array.isArray(checkedDate.value)) return;
331+
if (props.selectType === 'single') {
332+
const { year, month, day, hours, minutes } = checkedDate.value[0];
317333

318-
let date: EmitDateType = new Date(
319-
`${checkedDate.value.year}/${checkedDate.value.month + 1}/${
320-
checkedDate.value.day
321-
} ${checkedDate.value.hours}:${checkedDate.value.minutes}`
322-
);
323-
if (props.format) {
324-
date = formatDate(date, props.format, props.lang);
334+
let date: EmitDateType = new Date(
335+
`${year}/${month + 1}/${day} ${hours}:${minutes}`
336+
);
337+
if (props.format) {
338+
date = formatDate(date, props.format, props.lang);
339+
}
340+
emit('confirm', date);
325341
}
326-
emit('confirm', date);
342+
327343
if (props.model === 'dialog') {
328344
close();
329345
}
@@ -412,21 +428,35 @@ export default defineComponent({
412428
watch(
413429
checkedDate,
414430
() => {
415-
if (Array.isArray(checkedDate.value)) return;
416-
417-
let date: EmitDateType = new Date(
418-
`${checkedDate.value.year}/${checkedDate.value.month + 1}/${
419-
checkedDate.value.day
420-
} ${checkedDate.value.hours}:${checkedDate.value.minutes}`
421-
);
422-
if (props.format) {
423-
date = formatDate(date, props.format, props.lang);
431+
if (props.selectType === 'single') {
432+
const { year, month, day, hours, minutes } = checkedDate.value[0];
433+
434+
let date: EmitDateType = new Date(
435+
`${year}/${month + 1}/${day} ${hours}:${minutes}`
436+
);
437+
if (props.format) {
438+
date = formatDate(date, props.format, props.lang);
439+
}
440+
emit('change', date);
424441
}
425-
emit('change', date);
426442
},
427443
{ deep: true }
428444
);
429445

446+
// watch(currDateTime, (date) => {
447+
// if (props.selectType === 'single' && date instanceof Date) {
448+
// checkedDate.value = [
449+
// {
450+
// year: date.getFullYear(),
451+
// month: date.getMonth(),
452+
// day: date.getDate(),
453+
// hours: date.getHours(),
454+
// minutes: date.getMinutes(),
455+
// },
456+
// ];
457+
// }
458+
// });
459+
430460
watch(
431461
() => props.showWeekView,
432462
(val) => {
@@ -449,6 +479,27 @@ export default defineComponent({
449479
});
450480

451481
const init = () => {
482+
const { defaultDatetime } = props;
483+
if (props.selectType === 'single' && defaultDatetime instanceof Date) {
484+
currentYearMonth.value = {
485+
year: defaultDatetime.getFullYear(),
486+
month: defaultDatetime.getMonth(),
487+
};
488+
489+
const date = currDateTime.value;
490+
if (date instanceof Date) {
491+
checkedDate.value = [
492+
{
493+
year: date.getFullYear(),
494+
month: date.getMonth(),
495+
day: date.getDate(),
496+
hours: date.getHours(),
497+
minutes: date.getMinutes(),
498+
},
499+
];
500+
}
501+
}
502+
452503
if (props.pickerType === 'time') {
453504
showTime();
454505
} else {
@@ -494,7 +545,26 @@ export default defineComponent({
494545
};
495546

496547
const renderAction = () => {
497-
if (Array.isArray(checkedDate.value)) return;
548+
let timeText = '';
549+
let dateText = `${currentYearMonth.value.year}年${
550+
currentYearMonth.value.month + 1
551+
}月`;
552+
553+
if (props.selectType === 'single') {
554+
const { year, month, day, hours, minutes } = checkedDate.value[0];
555+
556+
timeText = formatDatetime(
557+
`${year}/${month + 1}/${day} ${fillNumber(hours)}:${fillNumber(
558+
minutes
559+
)}`,
560+
languageUtil[props.lang].DEFAULT_TIME_FORMAT
561+
);
562+
563+
dateText = formatDatetime(
564+
`${year}/${month + 1}/${day}`,
565+
languageUtil[props.lang].DEFAULT_DATE_FORMAT
566+
);
567+
}
498568

499569
if (props.showAction) {
500570
return (
@@ -523,16 +593,7 @@ export default defineComponent({
523593
}`}
524594
onClick={showCalendar}
525595
>
526-
{props.selectType === 'single'
527-
? formatDatetime(
528-
`${checkedDate.value.year}/${
529-
checkedDate.value.month + 1
530-
}/${checkedDate.value.day}`,
531-
languageUtil[props.lang].DEFAULT_DATE_FORMAT
532-
)
533-
: `${checkedDate.value.year}年${
534-
checkedDate.value.month + 1
535-
}月`}
596+
{dateText}
536597
</span>
537598
) : null}
538599

@@ -546,14 +607,7 @@ export default defineComponent({
546607
}`}
547608
onClick={showTime}
548609
>
549-
{formatDatetime(
550-
`${checkedDate.value.year}/${
551-
checkedDate.value.month + 1
552-
}/${checkedDate.value.day} ${fillNumber(
553-
checkedDate.value.hours
554-
)}:${fillNumber(checkedDate.value.minutes)}`,
555-
languageUtil[props.lang].DEFAULT_TIME_FORMAT
556-
)}
610+
{timeText}
557611
</span>
558612
) : null}
559613
</div>
@@ -578,6 +632,10 @@ export default defineComponent({
578632
isShowWeek.value = val;
579633
};
580634

635+
const yearMonthChange = (yearMonth: CalendarYearMonthType) => {
636+
currentYearMonth.value = yearMonth;
637+
};
638+
581639
const renderCalendar = () => (
582640
<CalendarDate
583641
ref={calendarRef}
@@ -589,6 +647,7 @@ export default defineComponent({
589647
onTouchmove={touchMove}
590648
onTouchend={touchEnd}
591649
onSlidechange={slideChange}
650+
onYearMonthChange={yearMonthChange}
592651
onChange={dateChange}
593652
onClick={dateClick}
594653
showWeekView={isShowWeek.value}
@@ -616,47 +675,41 @@ export default defineComponent({
616675
);
617676

618677
const renderTimePicker = () => {
619-
if (Array.isArray(checkedDate.value)) return;
620-
621678
if (props.pickerType === 'datetime' || props.pickerType === 'time') {
622679
return (
623680
<CalendarTime
624681
show={!isShowCalendar.value}
625682
defaultTime={currDateTime.value as Date}
626-
calendarDate={checkedDate.value}
683+
calendarDate={checkedDate.value[0]}
627684
onChange={timeChange}
628685
{...pick(props, ['minuteStep', 'disabledTime'])}
629686
/>
630687
);
631688
}
632689
};
633690

634-
const renderYearMonthPicker = () => {
635-
if (Array.isArray(checkedDate.value)) return;
636-
637-
return (
638-
<CalendarYearMonth
639-
calendarContentHeight={calendarContentHeight.value}
640-
calendarDate={checkedDate.value}
641-
type={yearMonthType.value}
642-
onTouchstart={touchStart}
643-
onTouchmove={touchMove}
644-
onTouchend={touchEnd}
645-
onSlidechange={slideChange}
646-
onClick={dateClick}
647-
{...pick(props, [
648-
'minDate',
649-
'maxDate',
650-
'disabledDate',
651-
'lang',
652-
'disabledScroll',
653-
'checkedDayClassName',
654-
'notCurrentMonthDayClassName',
655-
'disabledClassName',
656-
])}
657-
/>
658-
);
659-
};
691+
const renderYearMonthPicker = () => (
692+
<CalendarYearMonth
693+
calendarContentHeight={calendarContentHeight.value}
694+
currentYearMonth={currentYearMonth.value}
695+
type={yearMonthType.value}
696+
onTouchstart={touchStart}
697+
onTouchmove={touchMove}
698+
onTouchend={touchEnd}
699+
onSlidechange={slideChange}
700+
onClick={yearMonthClick}
701+
{...pick(props, [
702+
'minDate',
703+
'maxDate',
704+
'disabledDate',
705+
'lang',
706+
'disabledScroll',
707+
'checkedDayClassName',
708+
'notCurrentMonthDayClassName',
709+
'disabledClassName',
710+
])}
711+
/>
712+
);
660713

661714
const renderCtrlImg = () => {
662715
let confirmEle: any = (

0 commit comments

Comments
 (0)