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
quickest-silverOP•3y ago
able to create but while edit page is not getting open
foreign-sapphire•3y 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
quickest-silverOP•3y 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•3y 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.
quickest-silverOP•3y ago
can u please do edit in datepicker in same stackbiz
quickest-silverOP•3y ago
this way
foreign-sapphire•3y 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.
quickest-silverOP•3y ago
it worked But i am not able to pass disableDate prop in datePicker
foreign-sapphire•3y 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
quickest-silverOP•3y ago
yeah now if i edit it its showing previous date for example if i select today date its showing yesterdays
foreign-sapphire•3y 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.
stormy-gold•3y 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>