feat(dashboard): stepwise Jalali birthday picker + correct send direction
- JalaliDatePicker gains an opt-in `stepwise` mode (year → month → day): the year step is a scrollable list from the current Jalali year down to 1332, used by the birthday field. Default-off so appointment/panel pickers keep the month-grid behavior. Parse incoming Jalali string values safely (fixes NaN keys). - Birthday create path now converts Jalali→Unix on send (changeDateType true), matching the update path and the Unix-based backend contract. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
hamed
@@ -24,6 +24,20 @@ const MONTHS = [
|
||||
"اسفند",
|
||||
];
|
||||
|
||||
const MIN_BIRTH_YEAR = 1332;
|
||||
|
||||
// Parse an incoming value that may be a Jalali string ("1370/5/15"), a Date,
|
||||
// or a moment. Returns a valid moment, falling back to now() when invalid.
|
||||
const parseValue = (value) => {
|
||||
if (!value) return moment();
|
||||
if (typeof value === "string") {
|
||||
const m = moment(value, "jYYYY/jM/jD");
|
||||
return m.isValid() ? m : moment();
|
||||
}
|
||||
const m = moment(value);
|
||||
return m.isValid() ? m : moment();
|
||||
};
|
||||
|
||||
function JalaliDatePicker({
|
||||
value,
|
||||
onChange,
|
||||
@@ -39,20 +53,20 @@ function JalaliDatePicker({
|
||||
prevIcon = null,
|
||||
dayLabelRender = null,
|
||||
isFirst = false,
|
||||
stepwise = false,
|
||||
}) {
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
const [selectedDate, setSelectedDate] = useState(
|
||||
value ? moment(value) : moment()
|
||||
);
|
||||
const [displayDate, setDisplayDate] = useState(
|
||||
value ? moment(value) : moment()
|
||||
const [selectedDate, setSelectedDate] = useState(() =>
|
||||
value ? parseValue(value) : null
|
||||
);
|
||||
const [displayDate, setDisplayDate] = useState(() => parseValue(value));
|
||||
const [viewMode, setViewMode] = useState(stepwise ? "year" : "day");
|
||||
const nextIconRef = useRef(null);
|
||||
const prevIconRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (value) {
|
||||
const newDate = moment(value);
|
||||
const newDate = parseValue(value);
|
||||
setSelectedDate(newDate);
|
||||
setDisplayDate(newDate);
|
||||
}
|
||||
@@ -61,11 +75,15 @@ function JalaliDatePicker({
|
||||
const handleClick = (event) => {
|
||||
if (!disabled) {
|
||||
setAnchorEl(event.currentTarget);
|
||||
if (stepwise) {
|
||||
setViewMode("year");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
if (stepwise) setViewMode("year");
|
||||
};
|
||||
|
||||
const open = Boolean(anchorEl);
|
||||
@@ -87,6 +105,16 @@ function JalaliDatePicker({
|
||||
handleClose();
|
||||
};
|
||||
|
||||
const handleYearSelect = (year) => {
|
||||
setDisplayDate(moment(displayDate).jYear(year));
|
||||
setViewMode("month");
|
||||
};
|
||||
|
||||
const handleMonthSelect = (month) => {
|
||||
setDisplayDate(moment(displayDate).jMonth(month));
|
||||
setViewMode("day");
|
||||
};
|
||||
|
||||
const handlePrevMonth = () => {
|
||||
setDisplayDate(moment(displayDate).subtract(1, "jMonth"));
|
||||
};
|
||||
@@ -120,7 +148,211 @@ function JalaliDatePicker({
|
||||
return selectedDate.format("jYYYY/jMM/jDD");
|
||||
};
|
||||
|
||||
const days = getDaysInMonth();
|
||||
const renderYearView = () => {
|
||||
const currentYear = moment().jYear();
|
||||
// newest first, down to the minimum birth year
|
||||
const years = Array.from(
|
||||
{ length: currentYear - MIN_BIRTH_YEAR + 1 },
|
||||
(_, i) => currentYear - i
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Box sx={{ fontWeight: 600, fontSize: "14px", textAlign: "center", mb: 2 }}>
|
||||
انتخاب سال
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(3, 1fr)",
|
||||
gap: 0.5,
|
||||
maxHeight: 240,
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
{years.map((year) => {
|
||||
const isSelected = selectedDate && selectedDate.jYear() === year;
|
||||
return (
|
||||
<Box
|
||||
key={year}
|
||||
onClick={() => handleYearSelect(year)}
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
py: 1.5,
|
||||
cursor: "pointer",
|
||||
borderRadius: "4px",
|
||||
fontSize: "14px",
|
||||
bgcolor: isSelected ? "primary.main" : "transparent",
|
||||
color: isSelected ? "primary.contrastText" : "text.primary",
|
||||
"&:hover": { bgcolor: isSelected ? "primary.dark" : "action.hover" },
|
||||
}}
|
||||
>
|
||||
{year}
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const renderMonthView = () => (
|
||||
<>
|
||||
<Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", mb: 2 }}>
|
||||
<Box
|
||||
onClick={() => setViewMode("year")}
|
||||
sx={{ fontWeight: 600, fontSize: "14px", cursor: "pointer" }}
|
||||
>
|
||||
{displayDate.jYear()}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0.5 }}>
|
||||
{MONTHS.map((monthName, idx) => {
|
||||
const isSelected =
|
||||
selectedDate &&
|
||||
selectedDate.jYear() === displayDate.jYear() &&
|
||||
selectedDate.jMonth() === idx;
|
||||
return (
|
||||
<Box
|
||||
key={idx}
|
||||
onClick={() => handleMonthSelect(idx)}
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
py: 1.5,
|
||||
cursor: "pointer",
|
||||
borderRadius: "4px",
|
||||
fontSize: "14px",
|
||||
bgcolor: isSelected ? "primary.main" : "transparent",
|
||||
color: isSelected ? "primary.contrastText" : "text.primary",
|
||||
"&:hover": { bgcolor: isSelected ? "primary.dark" : "action.hover" },
|
||||
}}
|
||||
>
|
||||
{monthName}
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
|
||||
const renderDayView = () => {
|
||||
const days = getDaysInMonth();
|
||||
return (
|
||||
<>
|
||||
{/* Header */}
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }}>
|
||||
{nextIcon ? (
|
||||
<Box ref={nextIconRef} onClick={handleNextMonth} sx={{ cursor: "pointer" }}>
|
||||
{nextIcon}
|
||||
</Box>
|
||||
) : (
|
||||
<IconButton onClick={handleNextMonth} size="small">
|
||||
<ChevronLeftIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
|
||||
<Box
|
||||
onClick={stepwise ? () => setViewMode("month") : undefined}
|
||||
sx={{ fontWeight: 600, fontSize: "14px", cursor: stepwise ? "pointer" : "default" }}
|
||||
>
|
||||
{MONTHS[displayDate.jMonth()]} {displayDate.jYear()}
|
||||
</Box>
|
||||
|
||||
{prevIcon ? (
|
||||
<Box ref={prevIconRef} onClick={handlePrevMonth} sx={{ cursor: "pointer" }}>
|
||||
{prevIcon}
|
||||
</Box>
|
||||
) : (
|
||||
<IconButton onClick={handlePrevMonth} size="small">
|
||||
<ChevronRightIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Weekday labels */}
|
||||
<Box sx={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 0.5, mb: 1 }}>
|
||||
{dayLabelRender ? (
|
||||
dayLabelRender()
|
||||
) : (
|
||||
<>
|
||||
{WEEKDAYS.map((day, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
fontSize: "12px",
|
||||
fontWeight: 600,
|
||||
color: "text.secondary",
|
||||
py: 0.5,
|
||||
}}
|
||||
>
|
||||
{day}
|
||||
</Box>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Days grid */}
|
||||
<Box sx={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 0.5 }}>
|
||||
{days.map((day, index) => {
|
||||
if (!day) {
|
||||
return <Box key={index} />;
|
||||
}
|
||||
|
||||
const dayDate = moment(displayDate)
|
||||
.jDate(day)
|
||||
.jMonth(displayDate.jMonth())
|
||||
.jYear(displayDate.jYear());
|
||||
|
||||
const isSelected =
|
||||
selectedDate &&
|
||||
dayDate.jYear() === selectedDate.jYear() &&
|
||||
dayDate.jMonth() === selectedDate.jMonth() &&
|
||||
dayDate.jDate() === selectedDate.jDate();
|
||||
|
||||
const isToday =
|
||||
dayDate.jYear() === moment().jYear() &&
|
||||
dayDate.jMonth() === moment().jMonth() &&
|
||||
dayDate.jDate() === moment().jDate();
|
||||
|
||||
const isDisabled = disabledDates && disabledDates(dayDate);
|
||||
|
||||
return (
|
||||
<Box
|
||||
key={index}
|
||||
onClick={() => !isDisabled && handleDateClick(day)}
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
py: 1,
|
||||
cursor: isDisabled ? "not-allowed" : "pointer",
|
||||
borderRadius: "4px",
|
||||
fontSize: "14px",
|
||||
bgcolor: isSelected ? "primary.main" : "transparent",
|
||||
color: isSelected
|
||||
? "primary.contrastText"
|
||||
: isDisabled
|
||||
? "text.disabled"
|
||||
: "text.primary",
|
||||
border: isToday && !isSelected ? "1px solid" : "none",
|
||||
borderColor: "primary.main",
|
||||
opacity: isDisabled ? 0.3 : 1,
|
||||
"&:hover": {
|
||||
bgcolor: isDisabled
|
||||
? "transparent"
|
||||
: isSelected
|
||||
? "primary.dark"
|
||||
: "action.hover",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{day}
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
@@ -158,150 +390,12 @@ function JalaliDatePicker({
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: 320,
|
||||
p: 2,
|
||||
bgcolor: "background.paper",
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
{nextIcon ? (
|
||||
<Box
|
||||
ref={nextIconRef}
|
||||
onClick={handleNextMonth}
|
||||
sx={{ cursor: "pointer" }}
|
||||
>
|
||||
{nextIcon}
|
||||
</Box>
|
||||
) : (
|
||||
<IconButton onClick={handleNextMonth} size="small">
|
||||
<ChevronLeftIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
|
||||
<Box sx={{ fontWeight: 600, fontSize: "14px" }}>
|
||||
{MONTHS[displayDate.jMonth()]} {displayDate.jYear()}
|
||||
</Box>
|
||||
|
||||
{prevIcon ? (
|
||||
<Box
|
||||
ref={prevIconRef}
|
||||
onClick={handlePrevMonth}
|
||||
sx={{ cursor: "pointer" }}
|
||||
>
|
||||
{prevIcon}
|
||||
</Box>
|
||||
) : (
|
||||
<IconButton onClick={handlePrevMonth} size="small">
|
||||
<ChevronRightIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Weekday labels */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(7, 1fr)",
|
||||
gap: 0.5,
|
||||
mb: 1,
|
||||
}}
|
||||
>
|
||||
{dayLabelRender ? (
|
||||
dayLabelRender()
|
||||
) : (
|
||||
<>
|
||||
{WEEKDAYS.map((day, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
fontSize: "12px",
|
||||
fontWeight: 600,
|
||||
color: "text.secondary",
|
||||
py: 0.5,
|
||||
}}
|
||||
>
|
||||
{day}
|
||||
</Box>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Days grid */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(7, 1fr)",
|
||||
gap: 0.5,
|
||||
}}
|
||||
>
|
||||
{days.map((day, index) => {
|
||||
if (!day) {
|
||||
return <Box key={index} />;
|
||||
}
|
||||
|
||||
const dayDate = moment(displayDate)
|
||||
.jDate(day)
|
||||
.jMonth(displayDate.jMonth())
|
||||
.jYear(displayDate.jYear());
|
||||
|
||||
const isSelected =
|
||||
selectedDate &&
|
||||
dayDate.jYear() === selectedDate.jYear() &&
|
||||
dayDate.jMonth() === selectedDate.jMonth() &&
|
||||
dayDate.jDate() === selectedDate.jDate();
|
||||
|
||||
const isToday =
|
||||
dayDate.jYear() === moment().jYear() &&
|
||||
dayDate.jMonth() === moment().jMonth() &&
|
||||
dayDate.jDate() === moment().jDate();
|
||||
|
||||
const isDisabled = disabledDates && disabledDates(dayDate);
|
||||
|
||||
return (
|
||||
<Box
|
||||
key={index}
|
||||
onClick={() => !isDisabled && handleDateClick(day)}
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
py: 1,
|
||||
cursor: isDisabled ? "not-allowed" : "pointer",
|
||||
borderRadius: "4px",
|
||||
fontSize: "14px",
|
||||
bgcolor: isSelected ? "primary.main" : "transparent",
|
||||
color: isSelected
|
||||
? "primary.contrastText"
|
||||
: isDisabled
|
||||
? "text.disabled"
|
||||
: "text.primary",
|
||||
border: isToday && !isSelected ? "1px solid" : "none",
|
||||
borderColor: "primary.main",
|
||||
opacity: isDisabled ? 0.3 : 1,
|
||||
"&:hover": {
|
||||
bgcolor: isDisabled
|
||||
? "transparent"
|
||||
: isSelected
|
||||
? "primary.dark"
|
||||
: "action.hover",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{day}
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
<Box sx={{ width: 320, p: 2, bgcolor: "background.paper" }}>
|
||||
{stepwise && viewMode === "year"
|
||||
? renderYearView()
|
||||
: stepwise && viewMode === "month"
|
||||
? renderMonthView()
|
||||
: renderDayView()}
|
||||
</Box>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user