arifal/setrip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix date picker on all filter and field using date

Browse Source
This commit is contained in:
arifal
2026-05-20 13:33:29 +07:00
parent 57f7764bf5
commit b836d08b10
8 changed files with 404 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
features/admin/components/admin-filter-bar.tsx
+8 -8
View File
@@ -1,3 +1,5 @@
import { DateField } from "@/components/shared/date-picker";
interface AdminFilterBarProps {
/** URL base (mis. `/admin/refunds`) yang menerima query params. */
action: string;
@@ -45,12 +47,11 @@ export function AdminFilterBar({
>
Dari tanggal
</label>
<input
<DateField
id="filter-dateFrom"
name="dateFrom"
type="date"
defaultValue={values.dateFrom ?? ""}
className="w-full rounded-lg border border-neutral-200 bg-neutral-50 px-2 py-1.5 text-sm text-neutral-800 focus:border-primary-400 focus:bg-white"
defaultValueYmd={values.dateFrom}
placeholder="Dari tanggal"
/>
</div>
@@ -61,12 +62,11 @@ export function AdminFilterBar({
>
Sampai tanggal
</label>
<input
<DateField
id="filter-dateTo"
name="dateTo"
type="date"
defaultValue={values.dateTo ?? ""}
className="w-full rounded-lg border border-neutral-200 bg-neutral-50 px-2 py-1.5 text-sm text-neutral-800 focus:border-primary-400 focus:bg-white"
defaultValueYmd={values.dateTo}
placeholder="Sampai tanggal"
/>
</div>
features/organizer/components/verify-form.tsx
+27 -12
View File
@@ -3,6 +3,7 @@
import { useState } from "react";
import { useRouter } from "next/navigation";
import { submitVerificationAction } from "@/features/organizer/actions";
import { DateField } from "@/components/shared/date-picker";
type Initial = {
fullName: string;
@@ -21,23 +22,31 @@ type UploadKind = "ktp" | "liveness";
const ACCEPT_MIME = "image/jpeg,image/png,image/webp";
const MAX_BYTES = 5 * 1024 * 1024;
function toYmd(d: Date): string {
const y = d.getUTCFullYear();
const m = String(d.getUTCMonth() + 1).padStart(2, "0");
const day = String(d.getUTCDate()).padStart(2, "0");
return `${y}-${m}-${day}`;
}
export function VerifyForm({ initial }: { initial: Initial }) {
const router = useRouter();
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const [ktpKey, setKtpKey] = useState(initial?.ktpImageKey ?? "");
const [livenessKey, setLivenessKey] = useState(initial?.livenessKey ?? "");
// `birthDate` dari DB tersimpan sebagai tengah malam UTC — baca pakai getter
// UTC supaya hari kalender yang tampil di picker tidak bergeser.
const [birthDate, setBirthDate] = useState<Date | null>(
initial
? new Date(
initial.birthDate.getUTCFullYear(),
initial.birthDate.getUTCMonth(),
initial.birthDate.getUTCDate()
)
: null
);
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
setError("");
if (!birthDate) {
setError("Tanggal lahir wajib diisi");
return;
}
if (!ktpKey || !livenessKey) {
setError("Foto KTP dan foto memegang kertas SETRIP wajib diunggah");
return;
@@ -102,15 +111,21 @@ export function VerifyForm({ initial }: { initial: Initial }) {
/>
</div>
<div>
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
<label
htmlFor="birthDate"
className="mb-1.5 block text-sm font-semibold text-neutral-700"
>
Tanggal Lahir
</label>
<input
<DateField
id="birthDate"
name="birthDate"
type="date"
value={birthDate}
onChange={setBirthDate}
maxDate={new Date()}
withMonthYearDropdown
required
defaultValue={initial ? toYmd(new Date(initial.birthDate)) : ""}
className={inputCls}
placeholder="Pilih tanggal lahir"
/>
</div>
<div className="sm:col-span-2">
features/trip/components/create-trip-form.tsx
+26 -56
View File
@@ -2,8 +2,7 @@
import { useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { DateRangeField, TimeField } from "@/components/shared/date-picker";
import { createTripAction } from "@/features/trip/actions";
import { ImageUrlInput } from "@/features/trip/components/image-url-input";
import { formatLocalCalendarYmd } from "@/lib/trip-dates";
@@ -885,40 +884,35 @@ function ItineraryBuilder({
>
<div className="flex flex-col gap-2 sm:flex-row sm:items-start">
<div className="flex shrink-0 gap-2">
<div>
<label className="mb-0.5 block text-[10px] font-semibold uppercase tracking-wide text-neutral-500">
<div className="w-32">
<label
htmlFor={`itin-${dayIdx}-${itemIdx}-start`}
className="mb-0.5 block text-[10px] font-semibold uppercase tracking-wide text-neutral-500"
>
Mulai
</label>
<input
type="time"
<TimeField
id={`itin-${dayIdx}-${itemIdx}-start`}
value={item.startTime}
onChange={(e) =>
updateItem(
dayIdx,
itemIdx,
"startTime",
e.target.value
)
onChange={(v) =>
updateItem(dayIdx, itemIdx, "startTime", v)
}
className="w-30 rounded-lg border border-neutral-200 bg-white px-2 py-1.5 text-sm text-neutral-800 focus:border-primary-400"
/>
</div>
<div>
<label className="mb-0.5 block text-[10px] font-semibold uppercase tracking-wide text-neutral-500">
<div className="w-32">
<label
htmlFor={`itin-${dayIdx}-${itemIdx}-end`}
className="mb-0.5 block text-[10px] font-semibold uppercase tracking-wide text-neutral-500"
>
Selesai
</label>
<input
type="time"
<TimeField
id={`itin-${dayIdx}-${itemIdx}-end`}
value={item.endTime}
onChange={(e) =>
updateItem(
dayIdx,
itemIdx,
"endTime",
e.target.value
)
onChange={(v) =>
updateItem(dayIdx, itemIdx, "endTime", v)
}
className="w-30 rounded-lg border border-neutral-200 bg-white px-2 py-1.5 text-sm text-neutral-800 focus:border-primary-400"
clearable
/>
</div>
</div>
@@ -1021,36 +1015,12 @@ function StepSchedule({
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
Tanggal berangkat — pulang
</label>
<div className="relative">
<span className="absolute left-3 top-1/2 z-10 -translate-y-1/2 text-neutral-400">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="h-4 w-4"
>
<path
fillRule="evenodd"
d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z"
clipRule="evenodd"
/>
</svg>
</span>
<DatePicker
selectsRange
startDate={startDate}
endDate={endDate}
onChange={(dates) => {
const [s, e] = dates as [Date | null, Date | null];
onDateChange(s, e);
}}
minDate={new Date()}
placeholderText="Pilih tanggal..."
dateFormat="dd MMM yyyy"
isClearable
className="w-full rounded-xl border border-neutral-200 bg-neutral-50 py-2.5 pl-9 pr-3 text-sm text-neutral-800 placeholder:text-neutral-400 focus:border-primary-500 focus:bg-white"
/>
</div>
<DateRangeField
startDate={startDate}
endDate={endDate}
onChange={(s, e) => onDateChange(s, e)}
minDate={new Date()}
/>
</div>
<div>
features/trip/components/trip-filter.tsx
+19 -36
View File
@@ -2,9 +2,11 @@
import { useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { formatLocalCalendarYmd } from "@/lib/trip-dates";
import { DateRangeField } from "@/components/shared/date-picker";
import {
formatLocalCalendarYmd,
localCalendarDateFromYmd,
} from "@/lib/trip-dates";
import {
ACTIVITY_CATEGORIES,
categoryMeta,
@@ -43,12 +45,14 @@ export function TripFilter() {
isGroupSize(initialGroup) ? initialGroup : null
);
const [query, setQuery] = useState(searchParams.get("q") ?? "");
const [startDate, setStartDate] = useState<Date | null>(
searchParams.get("from") ? new Date(searchParams.get("from")!) : null
);
const [endDate, setEndDate] = useState<Date | null>(
searchParams.get("to") ? new Date(searchParams.get("to")!) : null
);
const [startDate, setStartDate] = useState<Date | null>(() => {
const from = searchParams.get("from");
return from ? localCalendarDateFromYmd(from) : null;
});
const [endDate, setEndDate] = useState<Date | null>(() => {
const to = searchParams.get("to");
return to ? localCalendarDateFromYmd(to) : null;
});
function buildParams(overrides?: {
category?: ActivityCategory | null;
@@ -287,33 +291,12 @@ export function TripFilter() {
<label className="mb-1.5 block text-xs font-medium text-neutral-500">
Tanggal
</label>
<div className="relative">
<span className="absolute left-3 top-1/2 z-10 -translate-y-1/2 text-neutral-400">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="h-4 w-4"
>
<path
fillRule="evenodd"
d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z"
clipRule="evenodd"
/>
</svg>
</span>
<DatePicker
selectsRange
startDate={startDate}
endDate={endDate}
onChange={handleDateChange}
minDate={new Date()}
placeholderText="Pilih tanggal..."
dateFormat="dd MMM yyyy"
isClearable
className="w-full rounded-xl border border-neutral-200 bg-neutral-50 py-2.5 pl-9 pr-3 text-sm text-neutral-800 placeholder:text-neutral-400 focus:border-primary-500 focus:bg-white"
/>
</div>
<DateRangeField
startDate={startDate}
endDate={endDate}
onChange={(start, end) => handleDateChange([start, end])}
minDate={new Date()}
/>
</div>
{/* Buttons */}