57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import { Form, FormInstance, Input } from "antd";
|
|
import DatePickerBottomSheet from "components/CustomBottomSheet/DatePickerBottomSheet";
|
|
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
|
|
import { selectCart, updateScheduledDate } from "features/order/orderSlice";
|
|
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useAppDispatch, useAppSelector } from "redux/hooks";
|
|
|
|
export default function DateCard({ form }: { form: FormInstance }) {
|
|
const dispatch = useAppDispatch();
|
|
const { t } = useTranslation();
|
|
const { scheduledDate } = useAppSelector(selectCart);
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<ProInputCard
|
|
title={t("cart.scheduledDate")}
|
|
dividerStyle={{ margin: "5px 0 0 0" }}
|
|
>
|
|
<Form.Item
|
|
label={t("cart.scheduledDate")}
|
|
name="date"
|
|
required
|
|
rules={[{ required: true }]}
|
|
style={{position:"relative", top: -5}}
|
|
>
|
|
<Input
|
|
placeholder={t("cart.scheduledDate")}
|
|
size="large"
|
|
onClick={() => setIsOpen(true)}
|
|
readOnly
|
|
value={scheduledDate}
|
|
style={{
|
|
cursor: "pointer",
|
|
height: 50,
|
|
fontSize: 14,
|
|
borderRadius: 888,
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
</ProInputCard>
|
|
|
|
<DatePickerBottomSheet
|
|
isOpen={isOpen}
|
|
onClose={() => setIsOpen(false)}
|
|
onDateSelect={(date) => {
|
|
const formattedDate = `${date.month}/${date.day}/${date.year}`;
|
|
dispatch(updateScheduledDate(formattedDate));
|
|
form.setFieldValue("date", formattedDate);
|
|
}}
|
|
initialDate={new Date(1990, 0, 1)}
|
|
/>
|
|
</>
|
|
);
|
|
}
|