修改选中样式字体大小
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -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);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user