I'm working on React and I have to do a countdown for an event that start at a precised time at a specific timezone (say 2022/04/20 20:00:00 Paris timezone).
The date is stored in a constant in the front like so :
event:{
start: new Date('2022-04-20T20:00:00'),
end: new Date('2022-04-23T00:00:00')
}
Because the date is stored in front, it will correspond to the user local timezone.
I don't know how to do so that the date stays in paris timezone, whatever the user timezone is.
The date has to stay in a Date type because I do calculations in my Timer for the countdown.
I tried to use formatInTimeZone(date, 'Europe/Paris', 'yyyy-MM-dd HH:mm:ss zzz') from the fns-tz package but when I add the "zzz" at the end it returns an invalid date format.
Also, I noticed that some Dates format are not supported on mobile browsers (the countdown did not display on mobile because of that).
if I changed the date for '2022-04-20T19:00:00Z' would it be the job ?
I know that the Z stands for UTC, but in this case is it UTC+0 ?
I'm really not confortable with the timezones and any help would be appreciated.
I tried :
import { formatInTimeZone } from "date-fns-tz";
const start = new Date("2022-04-20T20:00:00");
const end = new Date("2022-04-23T00:00:00");
const startdate = formatInTimeZone(start,"Europe/Paris","yyyy-MM-dd HH:mm:ss");
const enddate = formatInTimeZone(end,"Europe/Paris","yyyy-MM-dd HH:mm:ss zzz");
export const dropDate = {
start: new Date(startdate),
end: new Date(enddate),
};
It seems to work but not on mobile browser.
The date format is not valid.
If you change the date to '2022-04-20T19:00:00Z', it will just factor in the GMT difference. In my case, My GMT is +0530(IST). So, it will just add 5hrs 30 mins to 19:00:00 which results in 00:30:00 of 21st April.
You can make use of dayjs library instead.
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import relativeTime from "dayjs/plugin/relativeTime";
import timezonePlugin from "dayjs/plugin/timezone";
dayjs.extend(utc);
dayjs.extend(relativeTime);
dayjs.extend(timezonePlugin);
event:{
start: dayjs("2022-04-20T23:30:00").tz('Europe/Paris'),//This will set the start time to 2022/04/20 20:00:00 Paris timezone
end: dayjs("2022-04-23T03:30:00").tz('Europe/Paris') // This will set the end time to 2022/04/23 00:00:00 Paris timezone.
}
Related
I'm trying to set up the current time of a process but I just want to set up the day not the time/seconds like Tue, 28 Sep 2021.
I know 2 ways of doing dates and that would be:
new Date().toTimezoneString() and firebase.firestore.FieldValue.serverTimestamp() both of them includes time though.
and I know that if I set up Date() alone it store the data as a date format instead of a string.
Extra: can it be set up in other languages as well ?
Use Intl ( Internationalization API ) to format your dates. It's supported by all browsers and provides a comprehensive api to suit your date and time formatting needs.
Here is the doc for the method you need:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
For your use-case where you dont want to show time, you simply do not pass timeStype in the options parameter to the Intl formatter. Example would be
const date = new Date();
const formattedDate = new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }).format(date)
I'm new with React. I was looking for information for several days to no avail. So I decided to ask you my stupid question.
I have problem with transforming date from DatePicker to date format which than I can use in get request.
I use DatePicker from this https://www.npmjs.com/package/react-datepicker
Sample correct api call:
localhost:8080/api/measurement/12374?date=2020-12-13 12:00
but date from DatePicker look like:
Sun Dec 13 2020 12:00:00 GMT+0100 (Central European Standard Time)
I play with date for example:
let x = new Date();
let x1 = x.toLocaleDateString() + " " + x.toLocaleTimeString();
output: 23/12/2020 09:29:16
but still I have problem with date format and I also don't know how to pass this date correclty to get method, because http request have % instead "space"
http://localhost:8080/api/measurement/12120?date=23/12/2020%2009:48:15
but when I use string as date it work fine and download data:
let value = "12374";
let date = "2020-12-13 12:00";
const request = "http://localhost:8080/api/measurement/" + value + "?date=" + date;
Can someone explain me how can I convert date from DatePicker to format like this 2020-12-13 12:00 and then use it in get method?
I will be very grateful for any answer!
Thank you ;)
you can use momentjs for this task to format date.
https://www.npmjs.com/package/moment
import moment from 'moment'
let date = new Date();
let result = moment(date).format('DD/MM/YYYY hh:mm')
output: 23/12/2020 02:23
I am using moment.js and getting this error:
Deprecation warning: value provided is not in a recognized RFC2822 or
ISO format. moment construction falls back to js Date(), which is not
reliable across all browsers and versions. Non RFC2822/ISO date
formats are discouraged and will be removed in an upcoming major
release. Please refer to
http://momentjs.com/guides/#/warnings/js-date/ for more info.
Arguments: [0] _isAMomentObject: true, _isUTC: false, _useU
In my react component I have:
const sortTasks = (first, second) => moment(first.endDate).diff(second.endDate);
The first.enddate=‘20 dec 2018’
How can I avoid this warning in the console?
One alternative is to inform moment.js about the date format used, by providing a second parameter to the moment function.
The format of "20 dec 2018" is DD MMM YYYY".
If you have both dates in the same format, you should write
const sortTasks = (first, second) =>
moment(first.endDate, "DD MMM YYYY").diff(moment(second.endDate, "DD MMM YYYY"));
Note that the other date is also explicitly transformed to a moment, since it is expressed in a non-standard format.
You can check the details in the moment.js documentation about parsing.
If you want to find out the difference expressed in days, or in e.g. years / months / days, you can use moment.duration. Check the moment.js documentation about this feature.
E.g. to obtain the number of years, months and days between two dates, say date1 and date2, we could proceed as follows (assuming date1 is before date2):
const theDuration = moment.duration(date2, date1);
const yearsElapsed = theDuration.years();
const monthsElapsed = theDuration.months();
const daysElapsed = theDuration.days();
Hope it helps - Carlos
I have an application where I need to show the date in UI like DD-MM-YYYY hh:mm:ss and again this date to timestamp.
What I have tried:
$scope.dateForUI = moment().format("DD-MM-YYYY hh:mm:ss");
Here I am getting the expected result. But I need timestamp of $scope.dateForUI as well. So I have tried
$scope.dateInTimestamp = moment().unix($scope.get_date_line);
But the console output shows the 1970 date in $scope.dateInTimestamp
My question is how I format my current date and assign it to a variable and again how to get the timestamp for this particular time.
Another thing is it possible to store the time of any timezone in to my $scope.dateForUI variable using moment.js? I need to show the IST time in every browser location.
Very new to moment.js, any help would be appreciated. Thanks in advance.
Try this:
$scope.dateInTimeStamp = moment().unix();
You can use moment-timezone to get values in fixed timezone. For example:
moment.tz("Asia/Kolkata")
Use moment.unix(Number) to get moment object from seconds since the Unix Epoch
Moreover you can use valueOf() to get milliseconds since the Unix Epoch from moment object and .unix() to get seconds.
Here a snippet to show how moment-timezone works and how you can use unix():
// basic angular mock
var $scope = {};
// Current time in India (moment object)
var momNow = moment.tz("Asia/Kolkata");
// Current time in India formatted (string)
$scope.dateForUI = momNow.format("DD-MM-YYYY HH:mm:ss");
// Current time in India as seconds from 1970 (number)
$scope.dateInTimestamp = momNow.unix();
console.log($scope.dateForUI);
console.log($scope.dateInTimestamp);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.7/moment-timezone-with-data-2010-2020.min.js"></script>
I'm using a datepicker and a timepicker to have a user choose a specific date and time. In my controller, I intend to combine the selected date and the selected time.
I'm using the most current production versions of AngularJS, Bootstrap, Angular UI-Boostrap, and MomentJS. I have the latest Angular-Moment added too, but not sure if/how it might help address the issues noted below.
I'd use a datetimepicker, but there's too many to choose from and not
a lot of time to figure out which one does everything I need
(validation, masking, bootstrap v3, dependency on other datetimepickers, etc.).
In my app I have included and successfully used MomentJS for other purposes, but in this case, I'm having an issue where the datepicker and the timepicker are each returning the correct value, but MomentJS is returning the wrong value when I load those dates/times into a moment() object.
Here's some examples of what I'm running into... First BeginDate, and EndDate values are coming from the Angular UI-Bootstrap DatePicker. BeginTime and EndTime are coming from the TimePicker of the same library.
DatePicker and TimePicker examples
<!-- datepicker nearly mirrors the example on the ui-bootstrap docs -->
<uib-timepicker ng-model="task.BeginTime" ng-change="TimeChanged()" hour-step="hourSteps" minute-step="minuteSteps" show-meridian="true" required></uib-timepicker>
JS console output examples
// returns correct value: Wed Nov 04 2015 00:00:00 GMT-0800 (Pacific Standard Time)
console.log("$scope.task.BeginDate = " + $scope.task.BeginDate.toString());
// 11/04/2015 selected
// returns correct value: Sat Oct 31 2015 08:00:52 GMT-0700 (Pacific Daylight Time)
console.log("$scope.task.BeginTime = " + $scope.task.BeginTime.toString());
// 08:00 PM selected
// returns correct value: Wed Nov 04 2015 00:00:00 GMT-0800 (Pacific Standard Time)
console.log("$scope.task.EndDate = " + $scope.task.EndDate.toString());
// 11/04/2015 selected
// returns correct value: Sat Oct 31 2015 09:00:52 GMT-0700 (Pacific Daylight Time)
console.log("$scope.task.EndTime = " + $scope.task.EndTime.toString());
// 09:00 PM selected
This situation gets worse when I involve MomentJS to help me parse and concatenate the dates and times. (I've tried with and without .toString(). The next lines in my test are as follows:
// returns: 04/20/2015
var beginDate = moment($scope.task.BeginDate.toString(), "MM/DD/YYYY");
console.log("beginDate = " + beginDate.format("MM/DD/YYYY"));
// returns: Invalid date
var beginTime = moment($scope.task.BeginTime.toString(), "HH:mm A");
console.log("beginTime = " + beginTime.format("HH:mm A"));
// returns: 04/20/2015
var endDate = moment($scope.task.EndDate.toString(), "MM/DD/YYYY");
console.log("endDate = " + endDate.format("MM/DD/YYYY"));
// returns: Invalid date
var endTime = moment($scope.task.EndTime.toString(), "HH:mm A");
console.log("endTime = " + endTime.format("HH:mm A"));
If I combine the dates and times right now, I'll of course get 04/20/2015 00:00 AM returned.
Why are the dates being changed to be 8 months earlier?
Why are the times an invalid date after being loaded into MomentJS?
How do you proposed I fix this?
Why in the world does JavaScript make dates and times so difficult to work with? (I can Google that one later - just venting.)
I think perhaps the Moment syntax is off a bit. Try something like this:
var beginDate = moment($scope.task.BeginDate.toString()).format("MM/DD/YYYY");