i using material-ui datepicker component with redux form. It looks amazing by i have a little issue here. When i change the date it appears in my input field as yyyy-mm-dd. I want to change it so as to appear as dd-mm-yyyy. The datepicker has a property called formatDate which takes a function as an input. So i wrote:
<Field
name="dateFrom"
component={DatePicker}
hintText="Ημερομηνία από"
autoOk
formatDate={() => moment().format(DD-MM-YYYY)}
/>
but it does not seem to work. Do you have any ideas?
For both the DatePicker and TimePicker components in Material-UI v5, you need to set the renderInput prop. When using the TextField component as a rendering component, you can then use the fullWidth prop to expand to the width of its parent.
inside the jQuery script code just paste the code. $( ". selector" ). datepicker({ dateFormat: 'yy-mm-dd' });
Date pickers use a dialog window or an inline popover to select a single date. The selected day is indicated by a filled circle. The current day is indicated by a different color and type weight.
As per DOC:
formatDate ====> function ====> This function is called to format the date displayed in the input field, and should return a string.
Signature: function(date: object) => any date: Date object to be formatted. returns (any): The formatted date.
Receive the selected date as an argument of formatDate function, change the format of the date and return the formatter value as a string.
Another change is:
format(DD-MM-YYYY)
DD-MM-YYYY
should be a string like this:
format('DD-MM-YYYY')
Write it like this:
<Field
name="dateFrom"
component={DatePicker}
hintText="Ημερομηνία από"
autoOk
formatDate={(date) => moment(date).format('DD-MM-YYYY')}
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With