correct-apricot•2y 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

correct-apricot•2y ago

able to create but while edit page is not getting open

flat-fuchsia•2y 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

correct-apricot•2y 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

flat-fuchsia•2y 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),
  })}

correct-apricot•2y ago

can u please do edit in datepicker in same stackbiz

correct-apricot•2y ago

this way

flat-fuchsia•2y 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,
            };
}}

correct-apricot•2y ago

it worked But i am not able to pass disableDate prop in datePicker

flat-fuchsia•2y 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

correct-apricot•2y ago

yeah now if i edit it its showing previous date for example if i select today date its showing yesterdays

flat-fuchsia•2y 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.

fair-rose•2y 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>