修改选中样式字体大小

This commit is contained in:
筱野
2025-11-22 11:44:09 +08:00
parent 7d02a3e0b6
commit b2b665dfb6
3 changed files with 25 additions and 6 deletions

View File

@@ -71,6 +71,7 @@ const NutUICalendar = React.forwardRef<CalendarUIRef, NutUICalendarProps>(
const [current, setCurrent] = useState<Date>(startOfMonth(new Date())); const [current, setCurrent] = useState<Date>(startOfMonth(new Date()));
const calendarRef = useRef<any>(null); const calendarRef = useRef<any>(null);
const [visible, setvisible] = useState(false); const [visible, setvisible] = useState(false);
const [activeQuickAction, setActiveQuickAction] = useState<'weekend' | 'week' | 'month' | null>(null);
console.log("current", current); console.log("current", current);
// 当外部 value 变化时更新内部状态 // 当外部 value 变化时更新内部状态
useEffect(() => { useEffect(() => {
@@ -94,6 +95,7 @@ const NutUICalendar = React.forwardRef<CalendarUIRef, NutUICalendarProps>(
const handleDateChange = (newValue: any) => { const handleDateChange = (newValue: any) => {
if (type === "range") return; if (type === "range") return;
setSelectedValue(newValue); setSelectedValue(newValue);
setActiveQuickAction(null);
onChange?.(newValue as any); onChange?.(newValue as any);
}; };
const formatHeader = (date: Date) => `${getMonth(date)}`; const formatHeader = (date: Date) => `${getMonth(date)}`;
@@ -106,6 +108,7 @@ const NutUICalendar = React.forwardRef<CalendarUIRef, NutUICalendarProps>(
const handleDayClick = (day: any) => { const handleDayClick = (day: any) => {
const { type, year, month, date } = day; const { type, year, month, date } = day;
if (type === "next") return; if (type === "next") return;
setActiveQuickAction(null);
onChange?.([new Date(year, month - 1, date)]); onChange?.([new Date(year, month - 1, date)]);
}; };
@@ -157,18 +160,21 @@ const NutUICalendar = React.forwardRef<CalendarUIRef, NutUICalendarProps>(
const [start, end] = getWeekend(); const [start, end] = getWeekend();
setSelectedValue([start, end]); setSelectedValue([start, end]);
syncMonthTo(start); syncMonthTo(start);
setActiveQuickAction('weekend');
onChange?.([start, end]); onChange?.([start, end]);
}; };
const selectWeek = () => { const selectWeek = () => {
const dayList = getWeekendOfCurrentWeek(7); const dayList = getWeekendOfCurrentWeek(7);
setSelectedValue(dayList); setSelectedValue(dayList);
syncMonthTo(dayList[0]); syncMonthTo(dayList[0]);
setActiveQuickAction('week');
onChange?.(dayList); onChange?.(dayList);
}; };
const selectMonth = () => { const selectMonth = () => {
const dayList = getOneMonth(); const dayList = getOneMonth();
setSelectedValue(dayList); setSelectedValue(dayList);
syncMonthTo(dayList[0]); syncMonthTo(dayList[0]);
setActiveQuickAction('month');
onChange?.(dayList); onChange?.(dayList);
}; };
@@ -184,13 +190,22 @@ const NutUICalendar = React.forwardRef<CalendarUIRef, NutUICalendarProps>(
{/* 快速操作行 */} {/* 快速操作行 */}
{showQuickActions && ( {showQuickActions && (
<View className={styles["quick-actions"]}> <View className={styles["quick-actions"]}>
<View className={styles["quick-action"]} onClick={selectWeekend}> <View
className={`${styles["quick-action"]} ${activeQuickAction === 'weekend' ? styles["active"] : ""}`}
onClick={selectWeekend}
>
</View> </View>
<View className={styles["quick-action"]} onClick={selectWeek}> <View
className={`${styles["quick-action"]} ${activeQuickAction === 'week' ? styles["active"] : ""}`}
onClick={selectWeek}
>
</View> </View>
<View className={styles["quick-action"]} onClick={selectMonth}> <View
className={`${styles["quick-action"]} ${activeQuickAction === 'month' ? styles["active"] : ""}`}
onClick={selectMonth}
>
</View> </View>
</View> </View>

View File

@@ -270,8 +270,15 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
font-weight: 600;
color: #000; color: #000;
flex: 1; flex: 1;
box-sizing: border-box;
&.active {
background: rgba(0, 0, 0, 0.9);
color: #fff;
border-color: rgba(0, 0, 0, 0.9);
}
} }

View File

@@ -10,10 +10,7 @@ import dayjs from 'dayjs'
const parseDate = (dateStr: string): Date => { const parseDate = (dateStr: string): Date => {
if (!dateStr) return new Date(); if (!dateStr) return new Date();
// 将 "yyyy-MM-dd HH:mm:ss" 转换为 "yyyy-MM-ddTHH:mm:ss" // 将 "yyyy-MM-dd HH:mm:ss" 转换为 "yyyy-MM-ddTHH:mm:ss"
console.log(dateStr, 'dateStrdateStrdateStr');
const isoStr = dateStr.replace(/^(\d{4}-\d{2}-\d{2})\s(\d{2}:\d{2}(?::\d{2})?)$/, '$1T$2'); const isoStr = dateStr.replace(/^(\d{4}-\d{2}-\d{2})\s(\d{2}:\d{2}(?::\d{2})?)$/, '$1T$2');
console.log(isoStr, 'isoStr');
console.log(new Date(isoStr), 'new Date');
return new Date(isoStr); return new Date(isoStr);
}; };