ratty-blush
ratty-blush2y ago

date picker not working in edit form

<Form.Item><DatePicker placeholder="Date of Birth" style={{ padding: "8px", width: "100%", borderColor: "#bfd2f3", }} format="YYYY-MM-DD " disabledDate={disabledDate} /> </Form.Item>
12 Replies
ratty-blush
ratty-blushOP2y ago
able to create but while edit page is not getting open
foreign-sapphire
foreign-sapphire2y ago
Hi @rehan1, i couldn't reproduce the issue. https://stackblitz.com/edit/refinedev-refine-hc6j1x?file=src/pages/posts/create.tsx can you tell us more detail ? what error do you get? if you reproduce on stackblitz. it would be great
ratty-blush
ratty-blushOP2y ago
<Form.Item name={"date_of_birth"} getValueProps={value => ({ value: value?.dayjs(value), })} rules={[ { required: true, message: "Please Enter DOB", }, ]}> <DatePicker placeholder="Date of Birth" style={{ padding: "8px", width: "100%", borderColor: "#bfd2f3", }} format={(val: any) => dayjs(val).format("YYYY/MM/DD")}/> in this u dont have date picker in edit.tsx
foreign-sapphire
foreign-sapphire2y ago
@rehan1 Hi rehan, you are getting this error because Uncaught TypeError: value.dayjs is not a function because value don't have dayjs property.
getValueProps={value => ({
value: value?.dayjs(value),
})}
getValueProps={value => ({
value: value?.dayjs(value),
})}
ratty-blush
ratty-blushOP2y ago
can u please do edit in datepicker in same stackbiz
ratty-blush
ratty-blushOP2y ago
this way
foreign-sapphire
foreign-sapphire2y ago
ofc. https://stackblitz.com/edit/refinedev-refine-k1d1fq?file=src/pages/posts/edit.tsx but this is not a issue. if you open chrome devtools you will see error. in getValueProps typeof value === dayjs object and you are trying to dayjs()function from value. this property is not available. you can try this.
getValueProps={(value) => {
return {
value: value ? dayjs(value) : undefined,
};
}}
getValueProps={(value) => {
return {
value: value ? dayjs(value) : undefined,
};
}}
ratty-blush
ratty-blushOP2y ago
it worked But i am not able to pass disableDate prop in datePicker
foreign-sapphire
foreign-sapphire2y ago
<DatePicker> is a antd component. you can check antd documentation. as you can see, disableDate not available in props. https://4x.ant.design/components/date-picker/#API you can try disabled
ratty-blush
ratty-blushOP2y ago
yeah now if i edit it its showing previous date for example if i select today date its showing yesterdays
foreign-sapphire
foreign-sapphire2y ago
it might be timezone diffrence. but it's seems not a refine issue. you can ask on stack overflow. but first, comparing response and request payloads might be good.
adverse-sapphire
adverse-sapphire2y ago
Hey @rehan1 this is an example of a date picker in an edit that works <Form.Item label="Is new until" name="isNewProductUntil" getValueProps={(value) => ({ value: value ? dayjs(value) : "", })} > <DatePicker /> </Form.Item> Hope this helps. another thing you could do @rehan1 is set the format like this if you need to re-use it elsewhere in your component .. const dateFormat = "DD/MM/YYYY"; <Form.Item label="Is new until" name="isNewProductUntil" getValueProps={(value) => ({ value: value ? dayjs(value) : "", })} > <DatePicker format={dateFormat} /> </Form.Item>