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.
Related
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'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!
I have a UTC date that needs to display the local time. The result of the code below shows the time as 9:30 PM UTC but this isn't what I want. If I add the prop: tz="America/New_York" the time converts properly, but it needs to change based on where the user is. I checked the docs but didn't see a way to add the tz prop without setting an exact location.
<Moment
format="M/D/YYYY- h:mm A z"
utc
>
2018-12-06T21:30
</Moment>
I can also not see any documented support for determining the user's location/timezone in the react-moment library. You will likely need another library to determine that, perhaps one such as https://www.npmjs.com/package/jstz.
You have to add the local attribute
<Moment
format="M/D/YYYY- h:mm A z"
utc
local
>
2018-12-06T21:30
</Moment>
Documentation in the library:
https://momentjs.com/docs/#/manipulating/local/
And in the react-moment
https://www.npmjs.com/package/react-moment#local
In the react-moment documentation I can't see the utc attribute.
When you put the 'utc' you are saying that the date is utc and with the attribute 'local' you call the function local of the library and that transforms the date in a local date in the timezone of the browser
For default the date is in the timezone of the browser, for that reason you have to say that the date is 'utc'. If you call 'local' without the utc it returns the same date.
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 :)