admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

In Create Project popup change the noraml date selection to DatePicker.

Browse Source
This commit is contained in:
Kartik Sharma 2025-09-05 11:12:31 +05:30
parent f3913c2824
commit f56fd23cbf
2 changed files with 39 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/Project/ManageProjectInfo.jsx
View File

@ -3,6 +3,7 @@ import { useForm, Controller } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod"; import { z } from "zod";
import Label from "../common/Label"; import Label from "../common/Label";
import DatePicker from "../common/DatePicker";
const currentDate = new Date().toLocaleDateString('en-CA'); const currentDate = new Date().toLocaleDateString('en-CA');
const formatDate = (date) => { const formatDate = (date) => {
@ -214,42 +215,42 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
<label className="form-label" htmlFor="startDate"> <label className="form-label" htmlFor="startDate">
Start Date Start Date
</label> </label>
<input
className="form-control form-control-sm" <DatePicker
type="date"
name="startDate" name="startDate"
{...register("startDate")} control={control}
id="startDate" placeholder="DD-MM-YYYY"
maxDate={new Date()} // optional: restrict future dates
className="w-100"
/> />
{errors.startDate && ( {errors.startDate && (
<div <div className="danger-text text-start" style={{ fontSize: "12px" }}>
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.startDate.message} {errors.startDate.message}
</div> </div>
)} )}
</div> </div>
<div className="col-12 col-md-6"> <div className="col-12 col-md-6">
<label className="form-label" htmlFor="endDate"> <label className="form-label" htmlFor="endDate">
End Date End Date
</label> </label>
<input
className="form-control form-control-sm" <DatePicker
type="date"
name="endDate" name="endDate"
{...register("endDate")} control={control}
id="endDate" placeholder="DD-MM-YYYY"
minDate={getValues("startDate")} // optional: restrict future dates
className="w-100"
/> />
{errors.endDate && ( {errors.endDate && (
<div <div className="danger-text text-start" style={{ fontSize: "12px" }}>
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.endDate.message} {errors.endDate.message}
</div> </div>
)} )}
</div> </div>
<div className="col-12 col-md-6"> <div className="col-12 col-md-6">
<label className="form-label" htmlFor="modalEditUserStatus"> <label className="form-label" htmlFor="modalEditUserStatus">
Status Status

27
src/components/common/DatePicker.jsx
View File

@ -8,7 +8,7 @@ const DatePicker = ({
placeholder = "DD-MM-YYYY", placeholder = "DD-MM-YYYY",
className = "", className = "",
allowText = false, allowText = false,
maxDate=new Date(), maxDate, // removed default new Date()
minDate, minDate,
...rest ...rest
}) => { }) => {
@ -29,15 +29,21 @@ const DatePicker = ({
defaultDate: value defaultDate: value
? flatpickr.parseDate(value, "Y-m-d") ? flatpickr.parseDate(value, "Y-m-d")
: null, : null,
maxDate:maxDate, maxDate: maxDate ?? undefined, // only applied if passed
minDate:new Date(minDate?.split("T")[0]) ?? undefined, minDate: minDate ? new Date(minDate.split("T")[0]) : undefined,
onChange: function (selectedDates, dateStr) { onChange: function (selectedDates) {
onChange(dateStr); if (selectedDates.length > 0) {
// store in YYYY-MM-DD
const formatted = flatpickr.formatDate(selectedDates[0], "Y-m-d");
onChange(formatted);
} else {
onChange("");
}
}, },
...rest ...rest
}); });
} }
}, [inputRef]); }, [inputRef, value, allowText, maxDate, minDate, rest, onChange]);
return ( return (
<div className={` position-relative ${className}`}> <div className={` position-relative ${className}`}>
@ -45,8 +51,13 @@ const DatePicker = ({
type="text" type="text"
className="form-control form-control-sm " className="form-control form-control-sm "
placeholder={placeholder} placeholder={placeholder}
defaultValue={ defaultValue={
value ? flatpickr.formatDate(flatpickr.parseDate(value, "Y-m-d"), "d-m-Y") : "" value
? flatpickr.formatDate(
flatpickr.parseDate(value, "Y-m-d"),
"d-m-Y"
)
: ""
} }
ref={(el) => { ref={(el) => {
inputRef.current = el; inputRef.current = el;