修改选中样式字体大小

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

View File

@@ -270,8 +270,15 @@
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: 600;
color: #000;
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 => {
if (!dateStr) return new Date();
// 将 "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');
console.log(isoStr, 'isoStr');
console.log(new Date(isoStr), 'new Date');
return new Date(isoStr);
};