This week as part of my project work, I was trying to display a date in format MMM dd, yyyy. The default Service Portal format is yyyy-MM-dd HH:mm:ss.
It took me an entire day to figure out to how to do it in Service Portal. I knew I can use filters in Service Portals to set to a format, but it was just not working.
I searched entire community and didn't find anything.
Finally I came across this documentation on angularjs filters and I followed few examples in there, which helped me achieve this.
I am sharing this code, so that it can be useful for you and will save few hours of yours.
You need changes to your server script and HTML template script.
Server Script with today's date:
When you want the current date time to be displayed in your format, get the current date as shown below and convert it to integer using function getNumericValue().
This data object is then used in HTML script.
(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
var mydate = new GlideDateTime();
data.mydate = mydate.getNumericValue();
})();
Server Script with date field value:
If you want to display a field in a table or current record in a particular format, you can use below script and modify according to your need.
(function() {
var gr= $sp.getRecord(); // Get current record
var mydate = new GlideDateTime(gr.getValue('due_date'));
data.mydate = mydate.getNumericValue();
})();
HTML Template:
And then in HTML, you need to format your date using filters and display it. The syntax is {{ your_date_object | date: your desired format}}.
You can either use the date elements to build the format or you can use the predefined formats available in AngularJS such as medium, fullDate etc.
Check AngularJS for more options.
<div>
<b><u>Formatting using date elements</u></b>
<br><b>Date in MMM d, yyyy:</b> {{data.mydate | date:'MMM d, yyyy'}}
<br><b>Date in yyyy-MM-dd HH:mm:ss Z:</b> {{data.mydate | date:'yyyy-MM-dd HH:mm:ss Z'}}
<br><b>Date in MM/dd/yyyy @ h:mma:</b> {{data.mydate | date:'MM/dd/yyyy @ h:mma'}}
<br><b>Date in "MM/dd/yyyy 'at' h:mma":</b> {{data.mydate | date:"MM/dd/yyyy 'at' h:mma"}}
<br><b>Time in "h:mma":</b> {{data.mydate | date:"h:mma"}}
<br><br>
<b><u>Formatting using Predefined format</u></b>
<br><b>Date in medium:</b> {{data.mydate | date:'medium'}}
<br><b>Date in fullDate:</b> {{data.mydate | date:'fullDate'}}
<br><b>Date in longDate:</b> {{data.mydate | date:'longDate'}}
<br><b>Date in mediumDate:</b> {{data.mydate | date:'mediumDate'}}
<br><b>Time in mediumTime:</b> {{data.mydate | date:'mediumTime'}}
<br><b>Time in shortTime:</b> {{data.mydate | date:'shortTime'}}
</div>
Result:
And bingo!!!!!!!
7 Comments
