I am trying to display initial values on my redux form when it first load. Every fields work except the date input field. I tried to use moment to format string (YYYYMMDD) to MM/DD/YYYY and it's not working. No matter how I formatted, the field fail to display and instead showing the default place holder character mm/dd/yyyy until I selected a date. I am using the default redux-form input component date type. How should I do this right? Appreciate for any help.
When you are setting the initial date in your state, you need to provide it as per ISO-8601 standards, so YYYY-MM-DD, i.e. 2018-08-22 for 22nd August 2018.
I have never used redux-form library before, but I found a codesandbox example in their guide, and managed to get it to work here by just relying on them having followed the ISO standard. Feel free to play around with it.
Related
i wish to get the date in the format yyyy/MM/dd
but it doesn't seem to work when i console.log the value
<DatePicker dateFormat='dd/MM/yyyy' selected={startDate} onChange={(date)=>{
setStartDate(date)
console.log(startDate)
}}/>
i get the following format
Fri Dec 31 2021 18:10:31 GMT+0530 (India Standard Time)
i will want in the form yyyy-mm-dd to finally insert the date into a sql table
i can see that format in the date-picker component but when console.log then it shows a different format or it will be useful even if it possible to get the value shown directly like e.target.value
The dateFormat prop controls how the date is displayed in the input field next to the date picker.
The actual value of the date picker will still be a Date object.
There are various ways of getting only the date (in a specific format) form this date.
I would suggest applying one of these for example (.toLocaleDateString()) before you send it to your api/server.
Keep in mind that .toLocaleDateString() also allows you to pass the locales, and or any options like a timezone, or a format which you might want to specify. See the documentation here for more examples.
I would like to make a react floating date filter that works exactly like the default filter. The default filter has equals, greater than, less than, not equal and in range. I would like to preserve the behavior of these filters. The only things that I would like to change is the input format. The input format of the date is for the default is mm/dd/yy and I would like to change is that I can input a date like this 09 Mar 2019. Is there an easy way to change the date format? If not will I have to create a custom filter? And if I do have a make a custom one, where can I find the implementation of the default one as reference.
what I would like to modify
you can't (currently) do it with the current datefilter because it internally uses <input type="date" /> (if using chrome, otherwise just a text field) which always takes the browsers locale as described in https://stackoverflow.com/a/9519493/885338
also described in https://github.com/ag-grid/ag-grid/issues/1029 (has also a vue.js example)
so you will either have to
follow the steps outline here https://github.com/ag-grid/ag-grid/issues/2233
which modifies the prototype of the DateFilter and is a rather hacky solution
because it will overwrite every DateFilter and modifies (via prototype) ag-grid code. It worked for our cases, but might not in yours.
create a custom filter
and use the default filter https://github.com/ag-grid/ag-grid/blob/master/packages/ag-grid-community/src/ts/filter/dateFilter.ts as a reference.
if you create a custom filter you could supply additional params like the desired date format via FilterParams
The method init(params) takes a params object with the items listed below. If the user provides params via the colDef.filterParams attribute, these will be additionally added to the params object, overriding items of the same name if a name clash exists.
taken from: https://www.ag-grid.com/javascript-grid-filter-component/#ifilter-params
with that you could write a date filter that can work with different date formats (for example with using moment.js) by supplying the format via colDef.filterParams
Ag-Grid has some nice examples for Dates -> https://www.ag-grid.com/javascript-grid-date-component/
also see https://github.com/ag-grid/ag-grid/issues/1029#issuecomment-393546876 for this exact, still unresolved, issue and an example for vue.js which you may use as a starting point for your react based filter
I use Redux Form and react-datepicker
It works very nice, and I would like to get it work ideally according to my needs.
I need to show the date in localized format (let's say DD/MM/YYYY), and in the same time save value attribute of the input in static format ("YYYY-MM-DD").
I could add a hidden input with such value format, but if it's possible to avoid it using datepicker customization, it would be great!
Thanks for your advice in advance.
UPD:
Take a look on screenshots:
This is how it works now (nothing has to be changed here).
And value is synchronized with the locale. I want to keep the locale to present my date in the locale format for the user, and keep the format unchanged ("YYYY-MM-DD" forever) for the back end.
Here is the link to codesandbox.
You can use state and moment.js package to have date in several formats.
EDIT: the key thing is redux form. Datepicker is just view that can show exactly what you need. So, what you can do is: change redux form field value (or what you are using) and just have another state field (let's say 'dateForDatepicker') which value you'll pass to datepicker.
GOOD SOLUTION: https://stackoverflow.com/a/42726079/7479959
I'm trying to implement a feature for a form where:
1. I display a date string in the format mm-dd-yyyy
2. User is allowed to edit the form, and the date string would remain in the format mm-dd-yyyy
3. When the user submits the form, the date string must be in the format yyyy-mm-dd.
3. The original format of the date string is yyyy-mm-dd.
I would prefer to achieve this somehow by means of a directive rather than calling a function everytime a user submits a form, was wondering if there were any thoughts on a good way to do this?
I've given angular-ui-mask a look but am not sure if this would help me so much for this case.
Thanks!
I need to set the kendo angular datepicker input field to a date value with a particular date format when my angular model is holding a string date value like "2014-08-21T11:27:04". can anyone please help?
You can use a date filter to change the model with defined date/time format in JavaScript or in HTML templates.
There is a lot of elements which can be used to compose a date string, so visit the official docs, where everything is well described.