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
Related
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!
I am using react datepicker in my react component. I have to show dates highlighted which are coming from api. I am getting the array of dates from api like below:
["2019-01-03T18:30:00.000Z","2019-01-03T18:30:00.000Z"]
I am mapping above array and using subDays function inside the map function to create the array of dates and pass it to highlightDates property inside datepicker. But it is giving me subDays is undefined error.
Can anyone please tell me, How can i highlight the dates coming from api in react datepicker?
Just need to make a new array of dates coming from the api and pass that array to the highlighDates array like below:
<DatePicker
className="form-control"
selected={this.state.dateFilter}
onChange={this.handleDateFilterChange}
dateFormat="dd-MMMM-yyyy"
highlightDates={this.state.highlightWithRanges}
/>
this.state.highlighWithRanges is my new array and i passed it to highlightDates property
I am creating a detail page where I want to display an editable deadline and for that, I am using <DatePicker> component of Ant Design. The problem is when I set defaultValue={moment(deadline)} it's not showing the date deadline variable is holding but instead, it is showing the current date.
<DatePicker
showTime
format="YYYY-MM-DD HH:mm:ss"
placeholder="Set Deadline"
defaultValue={moment(deadline)} //moment(deadline) returns valid moment date objcect
onOk={(value, dateString) => {
newDeadline = value._d;
updateDeadline(newDeadline);
}}
/>
I don't know where I am doing wrong please help me to find it out...
UPDATE
When I console the value of deadline, typeof deadline, moment(deadline).toString() all are returning data as expected.
When I use value={moment(deadline)} instead of defaultValue={moment(deadline)}, It's also working fine.
One interesting thing, when I pass date string instead of deadline variable to defaultValue, It's working smoothly.
I'm having trouble generating events for react big calendar. When making a new event object (in another component), I set the id, event name, just fine, and then I wonder if I'm setting start and end correctly. I'll have a moment like this (created with moment.js) date = 05/15/2018 11:00 AM, and when setting the start/end fields of an event I will set them as new Date(date). For now I am saving this value in local storage, but it eventually will go to a database. I checked, and when I create a constant at the top of my component with my moments, and the new Date() syntax explicitly in the code it works fine, but my pre-made saved dates are not working. I am getting the following error.
index.js:209 Uncaught TypeError: date[("get" + method)] is not a function
at Object.hours (index.js:209)
at Object.isJustDate (dates.js:91)
at TimeGrid.js:237
My question is how should I go about saving my moment so that it can be correctly interpreted by react big calendar?
I answered my own question, Store `new Date ()` in JSON object
You can't store a Date as a Date in JSON, you have to convert it, so I will do so.
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.