fix date picker on all filter and field using date
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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 */}
|
||||
|
||||
Reference in New Issue
Block a user