I'm trying to display Firebase timestamps with toDate() method, but I keep getting this
timestamp error
Error: Objects are not valid as a React child (found: Thu Feb 13 2020 12:00:00 GMT-0800 (Pacific Standard Time)). If you meant to render a collection of children, use an array instead.
However, when I throw a debugger I can get it through the console using note.createdAt.toDate()
How can I display it nicely on web?
try :
note.createdAt.toDate().toString()
Thanks!
Related
I'm trying to make my own calendar with momentjs, I have been following the docs on momentjs but it keeps giving me this error: Uncaught Error: Objects are not valid as a React child
this is the line that gives the error: moment([2010, 0, 31]).add(1, 'months');
I have console.log'ed it and I get an object instead of a string which gives the error, but it's supposed to give a string.
I have made a codeSandBox here
You need to convert your moment date object to a string before display using format().
In your codesandbox, I can't see the error (I guess you removed the problem by not rendering it), but wherever you put this date object in your react render JSX, use format before display:
moment([2010, 0, 31]).add(1, 'months').format()
format accepts an argument that describes the output format if you want to manually define this.
This is tangential, but you should be aware moment is a bit outdated despite its legacy popularity. See https://momentjs.com/docs/ under "Project Status".
You might consider using something slimmer and more modern whilst you still can.
I am using Mobiscroll Datepicker for my react application. I have to select multiple dates for scheduling classes. Everything is working fine except that the dates that are being dispatched to redux is one less than the date being selected.
Here is the code
My date picker component
<Datepicker
controls={['calendar']}
display="inline"
selectMultiple={true}
value={Course.dayOfWeek}
onChange={handleDayChange}
/>
The onChange function:
const handleDayChange=(e)=>{
console.log(e.value)
dispatch(setDayofWeek(e.value))
}
The values being consoled:
ScreenShot of console
0: Tue Jul 05 2022 00:00:00 GMT+0500 (Pakistan Standard Time) {}
1: Tue Jul 12 2022 00:00:00 GMT+0500 (Pakistan Standard Time) {}
2: Tue Jul 19 2022 00:00:00 GMT+0500 (Pakistan Standard Time) {}
The values being dispatched to redux
redux screenshot
0(pin):"2022-07-04T19:00:00.000Z"
1(pin):"2022-07-11T19:00:00.000Z"
2(pin):"2022-07-18T19:00:00.000Z"
The redux should store 5,12,19 but is storing one day less. What is being done wrong here?
It's because the values being displayed in console are in GMT+5. While the values being dispatched to redux are in ISO format. Maybe the timezone difference is what is causing the issue. Try dispatching it in the same GMT+5 format.
I am using antd. I have a form that i want to send instead of DatePicker Object i want only the string but i don't know how to get the string from the Object.
I don't have any state or value to change.
Object:
_d: Date Mon Oct 26 2020 13:03:25 GMT+0200 (Eastern European Standard Time)
_isAMomentObject: true
I find this but i am not sure if is the best way to do.
console.log(date._d.toISOString())
Results: (and just take only the date)
2020-01-01T11:26:21.765Z
Do you know if is a better solution for this just to take 2020-01-01.
Use Moment Js.
moment(date).format("YYYY-MM-DD")
I am using a bootstrap datepicker.
While sending the values from datepicker to server my format is mm/dd/yyyy For example: 06/24/2015
When I get the values back from the server ("06/24/2015"), I am trying to fill the datepicker input with 06/24/2015.
For this I am trying to do something like this:
$scope.startDate = ($scope.startDate == null) ? null : new Date($scope.startDate);
Now the $scope.startDate is Wed Jun 24 2015 00:00:00 GMT-0500 (Central Standard Time)
Then I am formatting it to display the date in the datepicker input like this:
$scope.startDate = $filter('date')($scope.startDate,'MM/dd/yyyy');
Now the value is 06/24/2015
Everything works fine but I see a script error saying:
TypeError: Cannot read property 'split' of undefined
at createParser (ui-bootstrap-tpls-0.11.0.min.js:8)
at parse (ui-bootstrap-tpls-0.11.0.min.js:8)
at m (ui-bootstrap-tpls-0.11.0.min.js:8)
at link.k.$render (ui-bootstrap-tpls-0.11.0.min.js:8)
at Object.<anonymous> (angular.js:23295)
at l.$digest (angular.js:14235)
at l.$apply (angular.js:14506)
at l (angular.js:9659)
at S (angular.js:9849)
at XMLHttpRequest.D.onload (angular.js:9790)
I searched a lot of questions and most of them say that this is a bug in datepicker and is available on github master and not yet released.
I wanted to make sure the way I am parsing the dates is correct? Is there a better way to handle this problem and avoid getting the script error?
Normally server data would take a while after your app is initialized. In the mean time datepicker is trying to process a null in ng-model.
While you can certainly wait for a fix from bootstrap, but I think you can consider initialize a date before server data is available, like today's date, or any appropriate date.
$scope.startDate = ($scope.startDate == null) ? new Date() : new Date($scope.startDate);
Edit: I've written a simple datepicker in jsbin but can't seem to get your error in console. Maybe you can update it and reproduce?
I'm not quite sure how to set the timezone in angularjs for the date filter, which converts 1970-01-01 to 1969-12-31. I've seen this post, which explains the same problem in Java, but not sure how to approach it in AngularJs - any clues?
The JavaScript date is based on a time value that is milliseconds since midnight 01 January, 1970 UTC. A day holds 86,400,000 milliseconds. The JavaScript Date object range is -100,000,000 days to 100,000,000 days relative to 01 January, 1970 UTC.
source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
JavaScript Date type does not have timezone support* you need to use either ISO 8601 format or send timestamp in UTC.
You can also use a library like timezone-js or moment.js
The angular developer guide says this about timezones:
The Angular datetime filter uses the time zone settings of the browser. The same application will show different time information depending on the time zone settings of the computer that the application is running on. Neither JavaScript nor Angular currently supports displaying the date with a timezone specified by the developer.
You can make your own filter to use a specific timezone. Here is a simple one using moment.js to parse 19700101 with the GMT timezone:
app.filter('GMT', function() {
return function(input) {
return moment(input + ' +0000', "YYYYMMDD").format('MMM DD, YYYY');
};
});
Here is a demo: http://plnkr.co/l5zd9Z1tli2NLmgPTWhJ
Thanks everyone for participating.
After quite a bit of time trying to find an easy way to resolve the problem I've found the solution - by simply using Date and one of it's methods:
new Date(date).toISOString();
That does the job and is super short :)