How to Exclude Hours, Minutes and Seconds in AngularJS Date?

Question

I'm receiving data from JSON file via $http.get request. In my JSON file this is the format I receive:

"date": "2016-10-24 15:14:53"

I want to format it to be like this: October 10 2016 (without hh-mm-ss)

My code:

<body data-ng-app="myApp">

<div data-ng-controller="alfaCtrl1" class="blogwrapper" id="blogFirst">
<span>{{date}}</span><span></span>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get('jsonfile.json').success(function(data) {
        $scope.date = data.posts[0].date;
    });
});
</script>
</body>

This question is different from the one proposed as "duplicate", since it expands the process to Angular way of formatting date.

Possible duplicate of [How to format a JavaScript date](http://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date) — JJJ, Oct 27 '16 at 11:55
use moment.js. [Here is a plunkr](http://plnkr.co/edit/pxxo5LZsdZQk14PBWf9O?p=preview). — Mahesh, Oct 27 '16 at 12:02

Beslinda N. · Accepted Answer · 2016-10-27T12:07:11.617

3

var formateDate = new Date(data.posts[0].date)
$scope.date = $filter('date')(formateDate, 'longDate');

edited Oct 27 '16 at 12:07

answered Oct 27 '16 at 11:58

Beslinda N.

4,808
5
27
33

Thanks. I'm getting an error saying: $filter is not defined. – stormec56 Oct 27 '16 at 12:00
Add the $filter in the controller as a dependency – Beslinda N. Oct 27 '16 at 12:01
It outputs now: 2016-10-24 15:14:53... just like with my example. – stormec56 Oct 27 '16 at 12:06
1

new Date() -> creates a new Javascript date Object. And the angular $filter changes the format of the date. You can read here more about the date $filter: https://docs.angularjs.org/api/ng/filter/date – Beslinda N. Oct 27 '16 at 12:55

Jigar7521 · Answer 2 · 2016-10-27T12:46:05.610

** This is not relevant to your question but, might be prove helpful for others in future.

Here are all doc with example you can utilize from it in case of you want to apply it in vie.

The date filter allows us to format a date based upon a requested format style. The date formatter provides us several built-in options. If no date format is passed, then it defaults to showing mediumDate (as you can see below).

Here are the built-in localizable formats:

{{ today | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM -->
{{ today | date:'short' }} <!-- 8/9/13 12:09 PM -->
{{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 -->
{{ today | date:'longDate' }} <!-- August 09, 2013 -->
{{ today | date:'mediumDate' }} <!-- Aug 09, 2013 -->
{{ today | date:'shortDate' }} <!-- 8/9/13 -->
{{ today | date:'mediumTime' }} <!-- 12:09:02 PM -->
{{ today | date:'shortTime' }} <!-- 12:09 PM -->

The date formatter also enables us to customize your date format to our own liking. We can combine and chain together these format options to create one single date format, as well:

Year Formatting

Four-digit year: {{ today | date:'yyyy' }} <!-- 2013 -->
Two-digit padded year: {{ today | date:'yy' }} <!-- 13 -->
One-digit year: {{ today | date:'y' }} <!-- 2013 -->

Month Formatting

Month in year: {{ today | date:'MMMM' }} <!-- August -->
Short month in year: {{ today | date:'MMM' }} <!-- Aug -->
Padded month in year: {{ today | date:'MM' }} <!-- 08 -->
Month in year: {{ today | date:'M' }} <!-- 8 -->

Day Formatting

Padded day in month: {{ today | date:'dd' }} <!-- 09 -->
Day in month: {{ today | date:'d' }} <!-- 9 -->
Day in week: {{ today | date:'EEEE' }} <!-- Thursday -->
Short day in week: {{ today | date:'EEE' }} <!-- Thu -->

Hour Formatting

Padded hour in day: {{ today | date:'HH' }} <!-- 00 -->
Hour in day: {{ today | date:'H' }} <!-- 0 -->
Padded hour in am/pm: {{ today | date:'hh' }} <!-- 12 -->
Hour in am/pm: {{ today | date:'h' }} <!-- 12 -->

Minute Formatting

Padded minute in hour: {{ today | date:'mm' }} <!-- 09 -->
Minute in hour: {{ today | date:'m' }} <!-- 9 -->

Second Formatting

Padded second in minute: {{ today | date:'ss' }} <!-- 02 -->
Second in minute: {{ today | date:'s' }} <!-- 2 -->
Padded millisecond in second: {{ today | date:'.sss' }} <!-- .995 -->

String Formatting

am/pm character: {{ today | date:'a' }} <!-- AM -->
4-digit representation of time zone offset: {{ today | date:'Z' }} <!-- -0700 -->

Some examples of custom date formatting:

{{ today | date:'MMM d, y' }} <!-- Aug 09, 2013 -->
{{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8 -->
{{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 -->

How to Exclude Hours, Minutes and Seconds in AngularJS Date?

2 Answers2

Here are all doc with example you can utilize from it in case of you want to apply it in vie.