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

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

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