On server side DateTime is saved as per UTC (2016-03-24 17:45:12) and to client it is always returned DateTime as UTC. There are different users from world.
What is the best way to do date-time display management with i18n and l10n in angular?
Also i want that it should display date-time as per timezone of the user.
There are lots of feeds shown from all over the world like StackOverflow Posts. From server side always DateTime are passed in UTC time zone. On client side, date time can be displayed in two formats like below.
Showing date time of post as per time zone
Showing time-ago facility like (Just Now, Minute Ago, Hour Ago, Day Ago, Month Ago, Year Ago, 2 Years ago, 3 Years ago, etc)
This type of date times displayed across system multiple times for posts. So what is best way to use angular to have very less code for managing this.
How/When/Why to use Filters, Directives, Expressions for this?
(P.S. I am new to angular.)
Update:
More explanation:
Post object can be single page or array of objects.
And post date time will be like UTC: (2016-03-24 17:45:12)
So there are two cases which can be displayed like:
5 Months Ago
2016-03-24 11:15 PM (IST time)
You can trust the users' browsers. To display a date, you can use myDate.toLocaleString(). It will display the date using user's locale settings.
For "time-ago" format, you can use AngularJS version of moment.js: https://github.com/urish/angular-moment#am-time-ago-directive
Related
I’m trying to work with date-fns-tz in my react-based webpage and couldn’t make the following use-case to work.
I have a date input in a form that should be submitted to the backend that stores the data in local timezone.
A user in GMT+2 timezone selects 14:00 on 1/Feb/2021 in the UI, which correlates to 1612180800 timestamp (as the UI was opened in GMT+2), but it should eventually get sent to the backend as 14:00 in GMT-8, which is actually 1612216800 timestamp.
What’s the right way to get this conversion (from 1612180800 --> 1612216800 ) to work?
I tried to work with various date-fns functions, but hadn’t found the right one.
You'll need two things to make this work correctly:
An IANA time zone identifier for the intended target time zone, such as 'America/Los_Angeles', rather than just an offset from UTC.
See "Time Zone != Offset" in the timezone tag wiki.
A library that supports providing input in a specific time zone.
Since you asked about date-fns, you should consider using the date-fns-tz add-on library.
Alternatively you could use Luxon for this.
In the past I might have recommended Moment with Moment-TimeZone, but you should review Moment's project status page before choosing this option.
Sticking with date-fns and date-fns-tz, the use case you gave is the very one described in the docs for the zonedTimeToUtc function, which I'll copy here:
Say a user is asked to input the date/time and time zone of an event. A date/time picker will typically return a Date instance with the chosen date, in the user's local time zone, and a select input might provide the actual IANA time zone name.
In order to work with this info effectively it is necessary to find the equivalent UTC time:
import { zonedTimeToUtc } from 'date-fns-tz'
const date = getDatePickerValue() // e.g. 2014-06-25 10:00:00 (picked in any time zone)
const timeZone = getTimeZoneValue() // e.g. America/Los_Angeles
const utcDate = zonedTimeToUtc(date, timeZone) // In June 10am in Los Angeles is 5pm UTC
postToServer(utcDate.toISOString(), timeZone) // post 2014-06-25T17:00:00.000Z, America/Los_Angeles
In your case, the only change is that at the very end instead of calling utcDate.toISOString() you'll call utcDate.getTime().
Note that you'll still want to divide by 1000 if you intend to pass timestamps in seconds rather than the milliseconds precision offered by the Date object.
You can use 'moment' to convert timezone.
1.Create a moment with your date time, specifying that this is expressed as utc, with moment.utc()
2.convert it to your timezone with moment.tz()
For example
moment.utc(t, 'YYYY-MM-DD HH:mm:ss')
.tz("America/Chicago")
.format('l');
I'm working on a project that was used only in one country but now is in using in several countries.
So I'm working in some DateTime issues, as you can image.
I'm using angular js for my frontend, python for my backend and Postgres as my database in this project.
To avoid any problem with DateTime and try to make more easy to work with the timezones I'm saving the DateTime in the database as UTC.
from DateTime import DateTime
# inside a class of my entity
self.start_date = datetime.utcnow()
This is working fine, the problem is when I try to convert the date back.
For example.
If my application is running in a country with GMT -1, when the user
asks to save the entity and it's 2016-07-13 15:00:00, in the database
(using the UTC now()) the DateTime will become 2016-07-13 16:00:00.
But when I try to get back the value I have two scenarios:
If I don't do anything, I'll receive the DateTime like it's on the database, "2016-07-13 14:00:00"
If I try to convert to the local timezone, I'm getting like 2016-07-13 17:00:00. The time was increased by 1 and not decrease was I expected.
I'm trying to use the momentjs library to work with dates, but nothing seems to work.
I'm wondering if what I supposed to do is get the GMT, like (-01:00) then do some math with the DateTime that comes from the database, like sub or sum the GMT hours difference.
Solution:
My solution for this was, store everything as UTC in my database.
Retrieve the datetime as UTC and covert to browsers timezone using momentjs library.
Doing like this.
moment.tz(moment.utc(datetime), moment.tz.guess());
I have an Angular application that takes dates (date only not time) and posts them to a Web API 2 REST service. We are running into an issue when someone from India uses the application due to timezone issues.
Currently the Angular app is converting the date into ISO8601 format in UTC timezone and sending them to Web API. When the data is received on the Web API side, the date ends up being incorrect. If 6/21/2016 was put into the form, the date ends up coming over as 6/20/2016. The desired solution is to have the actual date value entered in the form be the date value received by the API.
One proposed solution is to treat the dates as strings instead of Dates and then just pass the date portion. This just seems like a hack to me and doesn't seem like the "correct" way of doing it.
What is the correct way of handling this situation?
Given the fact that the application has a lot of date field inputs is there an easy way to implement the solution across all Date input values?
The date format yyyy-MM-dd will be accepted in US / India so you can pass it so to your WebAPI. In JavaScript before posting you can alter the date like this.
$scope.MyDate = $filter('date')($scope.MyDate, 'yyyy-MM-dd', timezone);
If you want time too, the format will be yyyy-MM-ddTHH:mmZ
How do I get last years same week data?
I used fq=trans_date:[NOW-1YEAR/DAY-7DAY TO NOW-1YEAR/DAY] on date field which will give me last 7 days data for last year. But that approach doesn't take into account calender weeks.
It's probably easier to calculate the boundaries for your week number last year in the frontend and then query Solr with the date interval. That way you can get the behavior you want regarding sundays/mondays as well.
Solr does not provide a nice way to do this.
It would be really cool if you could do fq=trans_date:[NOW-1YEAR/WEEK TO NOW-1YEAR/WEEK] but this is not supported.
Nevertheless, you could create a quick function using php or javascript using each language's native Date operators and get the Week number from today to produce start and end points to feed solr in a query like [1995-12-31T23:59:59.999Z TO 2007-03-06T00:00:00Z].
new Date(moment().year(), moment().month(), moment().day(), vm.newHearing().HearingTime().split(":")[0], vm.newHearing().HearingTime().split(":")[1]).toLocaleString()
The client side value for a date column is 11/5/2013 10:15:00 AM. The time is selected from HTML5 time input control.
When I check in database after saving the entity, it shows me incorrect time value:
11/5/2013 3:15:00 PM
It appears that you are using moment.js, which is fine except you aren't using it properly
Try this instead:
moment(vm.newHearing().HearingTime(), "HH:mm").toISOString()
That will pass the selected time, on the current day, from the user's local time zone, converted to UTC time and in ISO format.
Now that might not be exactly what you want to do. Depending on your requirements, you might instead want this:
moment.utc(vm.newHearing().HearingTime(), "HH:mm").toISOString()
Which is almost the same thing except that it assumes the input time is already in UTC.
Or you might want this:
moment(vm.newHearing().HearingTime(), "HH:mm").format("YYYY-MM-DDTHH:mm:ss")
This one doesn't try to convert to UTC at all.
For all choices, I emit the date string in ISO8601 format. Since you are sending it back to the server, this is the best choice. When you used toLocaleString, that generates a format that is appropriat for display only.