How to format the date string according to the country in angular? - angularjs

I had the following code where i get the data from JSON response. I want to change the date string format w.r.t to country locale. I'm using angular-translate for translations and added all the strings in respective locale json file. For example i want to add the date format (dd/mm/year) for es_ES(spanish) locale and (mm/dd/year) for en_US. Can i add the date format by any chance in the Json file or how can i add a filter to format in markup itself? Is it possible at all?
//Sample Html markup
<tr ng-repeat="data in data.list">
<td>{{data.originalDate}}</td>
<td>{{data.expiryDate}}</td>
</tr>
//sampleJsonResponse
{
"data": [
"{originalDate:\"09/30/2017\",expiryDate:\"10/30/2018\"}"
]
}
Thanks

You can use just javascript to transform date to different locale:
first you will need to create date object with (new Date(yourdate)):
let date = new Date('10/30/2018');
then set date to specific locale use dash instead of underscore
date.toLocaleString('es-ES')
for your purposes you can just do:
new Date(data[0].originalDate).toLocaleString('es-ES')
new Date(data[0].expiryDate).toLocaleString('es-ES')
or do a map on entire data like this:
data.map(value => {
return {
originalDate: new Date(value.originalDate).toLocaleString('es-ES'),
expiryDate: new Date(value.expiryDate).toLocaleString('es-ES')
}
});
More info here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
For all other advanced date manipulation I would suggest momentJS: https://momentjs.com/

I'm using sugar.js javascript library for date formatting and also it has other general functions such as number and string formatting which serves well in my code base.

Related

Get the Date from DateTime object String in JSON response from backend

I am working on a React JS project where my state is getting updated with date object string from the backend JSON response. I am getting a Date Time object in form of a string which looks like this:
createDateTime: "2022-02-08T14:17:44"
The "createDateTime" object is assigned to my react js state, but when I show that updated state in the Browser UI, I get this:
2022-02-08T14:17:44
I want to display just the date, not the time stamp that comes along with the JSON string response. Is there any method that I can use to display just the Date?
2022-02-08
I would create some helpers to show exactly what you need. How about something like this?
function DateTimeParser(date?: string) {
if (date === undefined) return date;
const dateTime = new Date(date);
const parsedDate = `${dateTime.getDate()} ${
dateTime.getMonth()
} ${dateTime.getFullYear()}`;
return parsedDate;
You can amend this to show exactly what you need.
Calling toLocaleDateString on your date value should get the result you want but first of all, you will need to parse the date you get from the server:
const parsedDate = new Date(responseDate)
const date = parsedDate.toLocaleDateString()
You can optionally pass to toLocaleDateString() the desired locale (in case you want to get the date in the format which differs from your local one)

Calendar 2 ionic

I have a calendar on my ionic app and there is an API that brings me events from database.
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://portalemme2.com.br/SaoJoseAPI/agenda', true);
this.http.get('http://portalemme2.com.br/SaoJoseAPI/agenda').map(res => res.json()).subscribe(vetor => {
this.eventos = vetor.eventos;
});
How can I change the date format to appear on calendar?
Every event has an date like '2018-01-01' and an hour like '01:00:00.0000000' (from database)
But the calendar from ionic only accepts date in this format '2017-12-16 01:00:00'
I need to transform all dates to push in "this.eventos" array.
You can use moment.js, an excellent and easy to use library to manipulate dates. You should use data returned from the server to construct a Moment object pasing them to the moment() function and then, use format method to convert date to the format required by Calendar. In your case, to convert to these format, you should pass to format method something like "YYYY-MM-DD HH:MM:SS".

Datatables/MomentJS - Change date format when locale changes

I'm trying to display a properly formatted date in a Datatable column. I'm using MomentJS to detect and format the cell properly, as it comes as a yyyyMMdd (i.e. 20051201) string from the database:
columns: [
{
data: "fechaPago",
"render": function(data){
return (moment(data).isValid()) ? moment(data).format("DD/MM/YYYY") : "-";
}
},
]
Which works exactly as expected:
Now, I'm struggling to implement a more flexible approach, and let the current locale determine the format. We have 3 available languages in our webapp, and I want the Datatable to detect the current language and change the format (from dd/MM/yyyy to MM/dd/yyyy, if it's in English).
I have tried to use 'LLLL' as the format, but it returns the whole date with letters, and I can't figure out how to modify it.
You can use moment locale(String) function to set locale for a moment oblect or moment.locale(String) to set moment locale globally.
To get localized day, month and year use L token in the format().
Your code will be like the following:
columns: [
{
data: "fechaPago",
"render": function(data){
var locale = // get current locale code
return (moment(data).isValid()) ? moment(data).locale(locale).format("L") : "-";
}
},
]
Remember to use moment-with-locales.js (or import required locales).

Angular filter for date in HTML

I am trying to filter the date using angular filter in HTML. But it is not working.
Here is my template code:
{{due_date | date:'MM/dd/yy'}}
The input is: {"due_date" : "2015-10-10 16:00:00.000+0000"}
The expected output is: 10/10/15
What mistake am I doing?
It happens becouse due_date is a String instead of a Date object.
You can "convert" it by doing (maybe you should put this into your controller):
var due_date_parsed = new Date(due_date);
parse your date like :
$scope.date = Date.parse(new Date());
in you code
Date.parse(jobDetails.trs_data.due_date)
if string is also in proper date format like '20140313T00:00:00' then this code will work perfectly fine. In other case you will have to convert/parse the string to date type.

Posting date values in REST service will not create date fields in the Domino back end

I'm creating an AngularJS HTML app using Domino in the back-end. The communication is 100% rest-based via DDS
When I send date values they don't get converted to date items on the Domino document. The values are always stored as strings
I have tried various formats on the date string with no luck
Does anyone know is this is even possible with the Domino Data Services ?
I'm using Angulars $http service with the PATCH method to update changed values only
It is possible to store/ update a data in a document using Domino Data Services.
To get it to work you need to send the date as a string in ISO 8601 Extended format. That's the format that the toISOString() function returns in JavaScript for a Date object. On the form that you're trying to create or update, you'll need to have that field added as a Date/Time field. Adding the computewithform parameter to the request isn't required.
Here's a sample JSON object that, when send as a POST or PATCH request to DDS, will create/ update the LastVisit field as a DateTime field (assuming that field is on the form).
{
"FirstName":"Barney",
"LastName":"Bloomberg",
"LastVisit" : "2013-12-21T12:18:18Z"
}
The field name in the json string must be EXACTLY as on the form.
I had the similar problem where I had a field called 'TTL' on the form but my json generated by API using a class the field was named 'ttl'.
This resulted in a String as value for the date field, not a date.
This works :-)
I have extended the sample that I used in my presentation in the following way:
Added a field "WakeupTime" on the form. Set it to Date/Time, and select to display date and time. The sample output is 08-01-2016 16:11:42.
So reading the sample data using this url:
.../json.nsf/api/data/documents/unid/33735D0BCE799E01C1257CC3007A7221
I get something like this back:
{
"#href": "/demo/json.nsf/api/data/documents/unid/33735D0BCE799E01C1257CC3007A7221",
"#unid": "33735D0BCE799E01C1257CC3007A7221",
"#noteid": "902",
"#created": "2014-04-23T22:17:26Z",
"#modified": "2016-01-08T15:09:57Z",
"#authors": [
"Anonymous",
"CN=John Dalsgaard/O=D-D"
],
"#form": "Person",
"Unid": "33735D0BCE799E01C1257CC3007A7221",
"Key": "33735D0BCE799E01C1257CC3007A7221",
"Name": "Peter Hansen",
"Email": "ph#mail.dk",
"YearBorn": 1955,
"WakeupTime": "2016-08-01T05:33:10Z"
}
Important! - this gives me the exact format that I need to use for the WakeupTime field!
So if I then post a PATCH back with select fields:
{
"Email":"peter.hansen#mail.dk",
"YearBorn":1953,
"WakeupTime":"2016-01-08T05:33:40Z"
}
... and re-read the data then the fields are updated. And if I check in the Notes client I can see that the field is a date/time field :-)
Same happens if I create a new entry/document - the field is still the right type.
You have to be very aware of how you handle timezones though! The data are transferred as GMT :-)

Resources