Develop Reference

how to automatically get date in specific format from DatePicker?

I'm using the component DatePicker from antd.
I have currently a Form from antd, in which there's a Form.Item, in which I put the DatePicker.
I want the Form.Item to be given the date in a specific format, lets say YYYY-MM-DD, is there a way to do that?
by giving it the prop format I can choose how it will look like in the UI but I'm trying to make it send back the value by the same format.
I've tried giving it a dateFormat prop with the function
function dateFormat(date) {
return moment(date).format("YYYY/MM/DD");
}
but it doesn't work.
is there a way to do this manipulating the data in the onChange function?

so apparently there's no way to do it in the props,
I've checked and so has #MoaazBhnas.
If anyone somehow finds a way, I'll be looking forward to hear!

How to add date value in a JSON form? [Snippet attached]

I am making a react app which has the form that consists of basic details and employment details section.
The form is almost done and also I am able to form a JSON structure for different sections.
Complete working example here: https://codesandbox.io/s/nextjs-css-only-carousel-forked-v7gg0
Now for employment details section, I am in the need to include start date and end date as an input field.
So I have made a custom month and year picker and included the same inside the components as monthpicker.js .
And from employment details section I have called the component using the code,
<MonthPicker
value={month}
name="startDate"
label="Start Date"
onChange={setMonth}
/>
Using the following code, the selected value is updated,
const [month, setMonth] = useState(
`${`0${new Date().getMonth() + 1}`.slice(-2)}/${new Date().getFullYear()}`
);
But I can understand this is the place where things needs to be changed but I am not sure of handling it.
File where the monthpicker component included .
Requirement: So if user selects the month and year from the picker, then that particular value needs to get updated in the JSON structure which doesn't happen now.
Eg:
If user selects the month as Jun and year as 2016 then the JSON format will be like,
{
"basicDetails": {
"firstName": "...",
"lastName": "..."
},
"companyDetails": [
{
"companyName": "...",
"designation": "...",
"startDate": "06/2016"
}
]
}
As it is possible to add additional rows, the selected value needs to get added to the respective inputs.
Really stuck for long and need some good help..

#Undefined I'll be using the same code from my answer here and will add the feature you're trying to implement on this post.
The reason why the changes of your MonthPicker component's value is not reflecting to the formValue is because you are passing the setMonth as onChange instead of handleInputChange — basically the changes are stored only on the month state.
Ideally we should be able to use the MonthPicker like below, where we accept an event from the onChange prop that we can use to extract the target.name and target.value properties.
<MonthPicker
label="Start Date"
name="startDate"
onChange={(event) => handleInputChange(index, event)}
/>
I fixed and refactored your MonthPicker component, so that everytime its value change like incrementing/decrementing the year and selecting a month we'll call the onChange prop passing its new value.
Please check the demo below and if you have questions just let me know.

You are calling setMonth on change, but not passing a value:
onChange={(e) => setMonth(e.target.value)}

vue datepicker returns "1969" value

I have implemented the vue datepicker component as shown in the link below:
https://github.com/ReproNim/reproschema-ui/blob/master/src/components/Inputs/YearInput/YearInput.vue
when this component is answered and i move to a different page and revisit this page where the datepicker is, the value gets modified to "1969".
in the mounted method (line 53 in above link), i check for any initialized value. if present, it is assigned to data "input". i checked the init value and it is correct (it has the previously answered value) but on screen the component shows "1969".
can someone help as to why this happens?

The code looks correct for the most part.
Perhaps the input value is not formatted correcty so the default of 'epoch' is used.
Or your typos are causing the problem...
lang=selected_language and :initialView=inputType and :minimumView=inputType
<datepicker placeholder="Select Date" v-model="input" :lang='selected_language'
:disabledDates="dateParam.disabledDates" :format="customFormatter"
:minimumView='inputType' :maximumView="'year'" :initialView='inputType'
></datepicker>

I finally was able to solve this question!
when the answered value is "year", eg. 1990, in the mounted lifecycle hook, before assigning it to the data variable, I need to convert the 'year' value to a date object.

How to render Date Object in React Redux?

I am working on a booking app in learning purposes. I'm using React, Redux and React DatePicker.
Basically, everything works well, except for passing the Date object as a prop. It throws an error message:
Error: Objects are not valid as a React child (found: Sat Nov 09 2019 16:09:32 GMT+0500 (Yekaterinburg Standard Time)). If you meant to render a collection of children, use an array instead.
I know that React can't render objects, so I tried to use "toString()" method in reducer but it didn't help. I guess I should use this method in DatePicker but I don't know how.
<DatePicker
selected={this.props.date}
dateFormat="LLL"
onChange={(day) => {this.props.setDate(day)}}
locale="ru"
inline
/>
Tell me, please, where do I need to add toString() method, so that when I select a date in the calendar, the Date object is a string and my application works fine.

The best way to turn your date object into a string is going to depend on what information you want to display. Try .toLocaleDateString() to get a string that's formatted to the way dates are commonly written in the user's custom.
Check out MDN's Date documentation for more options (you'll probably want one listed under the 'conversion getter' section)
For how to integrate this into React, you don't need to do the conversion in your reducer. Redux can store date objects just fine, then you can call the conversion method of choice inside your component.
Imagine, for instance, a todo item component which takes in a Date object as a prop. This object, in your case, would come from redux.
const TodoItem = ({ task, dueDate }) => (
<div>
<h2>{task}</h2>
<span>{dueDate.toLocaleDateString()}</span>
</div>
);
The other option would be to call .toLocaleDateString() inside of your mapStateToProps function

Ember.js - ember-pikaday not allowing preset date

I am trying to create a datepicker in ember.js using the ember-pikaday addon. The datepicker should have a date in it when it is displayed. So, I added the following code to my template:
{{pikaday-input value=rental.date format="MMMM Do YYYY" yearRange="2016" useUtc=true}}
However, even though I specify the value as rental.date, the input is blank. I know that the value of rental.date is not null because when I set the placeholder to rental.date, the placeholder's date is correct.

The problem with your case is due to the fact that you are passing a momentjs object to ember-pikaday directly. Instead of passing the momentjs object directly just create a computed property called as follows on your owner component:
rentalDate:Ember.computed('rental.date', function() {
return this.get('rental.date').toDate();
}),
and perform binding to rentalDate. ember-pikaday does not handle momentjs object passed in by itself, just extract the actual javascript date object via toDate() as shown in code snippet above. Just for clarification you can also pass formatted string to ember-pikaday such as "25/05/2016", "2016.05.25", etc. It will also handle such string values properly.