Close Datepicker

[KholiqA24]

On datepicker, we can close datepicker after add properties shouldcloseonselect, can i close date after click button on sides area JSX?

In this condition, i make shortcut button to select date such a today, yesterday, this month on sides JSX. I want to close calendar after click the button

this is the code :

<DatePicker
weekDaysType="single"
shouldCloseOnSelect
value={rangeDate}
setValue={handleSetValue}
type="range"
primaryColor="#b91c1c"
calendarRightAreaJSX={() => {
const hariIni = dayjs().format("YYYY-MM-DD");
const kemarin = dayjs()
.subtract(1, "day")
.format("YYYY-MM-DD");
const sevenDaysAgo = ${dayjs() .subtract(6, "day") .startOf("day") .format("YYYY-MM-DD")} - ${dayjs() .endOf("day") .format("YYYY-MM-DD")};
const thirtyDaysAgo = ${dayjs() .subtract(29, "day") .startOf("day") .format("YYYY-MM-DD")} - ${dayjs() .endOf("day") .format("YYYY-MM-DD")};
const thisMonth = ${dayjs() .startOf("month") .format("YYYY-MM-DD")} - ${dayjs() .endOf("month") .format("YYYY-MM-DD")};
const beforeThisMonth = ${dayjs() .subtract(1, "month") .startOf("month") .format("YYYY-MM-DD")} - ${dayjs() .subtract(1, "month") .endOf("month") .format("YYYY-MM-DD")};
return (

<Button
size="small"
color="default"
class={cn(
"hover:bg-[#b91c1c] hover:text-white",
getValue(form, "start_date") === hariIni
? "bg-[#b91c1c] text-white"
: ""
)}
onClick={() => {
setRangeDate({
label: hariIni,
value: {
start: dayjs().startOf("day").toString(),
end: dayjs().endOf("day").toString(),
},
});
setValue(form, "start_date", hariIni);
}}
>
Hari ini

<Button
size="small"
color="default"
class={cn(
"hover:bg-[#b91c1c] hover:text-white",
getValue(form, "start_date") === kemarin
? "bg-[#b91c1c] text-white"
: ""
)}
onClick={() => {
setRangeDate({
label: kemarin,
value: {
start: dayjs()
.subtract(1, "day")
.startOf("day")
.toString(),
end: dayjs()
.subtract(1, "day")
.endOf("day")
.toString(),
},
});
setValue(form, "start_date", kemarin);
}}
>
Kemarin

<Button
size="small"
color="default"
class={cn(
"hover:bg-[#b91c1c] hover:text-white",
getValue(form, "start_date") === sevenDaysAgo
? "bg-[#b91c1c] text-white"
: ""
)}
onClick={() => {
setRangeDate({
label: sevenDaysAgo,
value: {
start: dayjs()
.subtract(6, "day")
.startOf("day")
.toString(),
end: dayjs().endOf("day").toString(),
},
});
setValue(form, "start_date", sevenDaysAgo);
}}
>
7 Hari Terakhir

<Button
size="small"
color="default"
class={cn(
"hover:bg-[#b91c1c] hover:text-white",
getValue(form, "start_date") === thirtyDaysAgo
? "bg-[#b91c1c] text-white"
: ""
)}
onClick={() => {
setRangeDate({
label: thirtyDaysAgo,
value: {
start: dayjs()
.subtract(29, "day")
.startOf("day")
.toString(),
end: dayjs().endOf("day").toString(),
},
});
setValue(form, "start_date", thirtyDaysAgo);
}}
>
30 Hari Terakhir

<Button
size="small"
color="default"
class={cn(
"hover:bg-[#b91c1c] hover:text-white",
getValue(form, "start_date") === thisMonth
? "bg-[#b91c1c] text-white"
: ""
)}
onClick={() => {
setRangeDate({
label: thisMonth,
value: {
start: dayjs()
.startOf("month")
.toString(),
end: dayjs().endOf("month").toString(),
},
});
setValue(form, "start_date", thisMonth);
}}
>
Bulan Ini

<Button
size="small"
color="default"
class={cn(
"hover:bg-[#b91c1c] hover:text-white",
getValue(form, "start_date") ===
beforeThisMonth
? "bg-[#b91c1c] text-white"
: ""
)}
onClick={() => {
setRangeDate({
label: beforeThisMonth,
value: {
start: dayjs()
.subtract(1, "month")
.startOf("month")
.format("YYYY-MM-DD")
.toString(),
end: dayjs()
.subtract(1, "month")
.endOf("month")
.format("YYYY-MM-DD")
.toString(),
},
});
setValue(form, "start_date", beforeThisMonth);
}}
>
Bulan Kemarin

);
}}
renderInput={({ value, showDate }) => {
return (
<InputDate
{...props}
showDate={showDate}
value={value}
type="text"
placeholder="Pilih Tanggal"
rightIcon={}
/>
);
}}
/>

[rnwonder]

Sorry can't read this code, please put in a code block next time. But I think I get the idea so upgrade to the latest version you should have a close function you can call on the JSX like so

calendarLeftAreaJSX={({ close }) => (
    <div>
      <button onClick={close}>Close Picker</button>
    </div>
  )}

Please do star the repo if you haven't yet

[KholiqA24]

Thanks, that's solving my problem