How to change the date format on display using angularjs

Question

I have a datetime value in "YYYY-MM-DD HH:mm:ss" format e.g. "2017-04-03 05:00:07". I don't want to change the value but need to display the value as "MMM DD, YYYY" format e.g. "Apr 03, 2017".

Is there anyway to display the value in different format using html?

Possible duplicate of [How to format a JavaScript date](http://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date) — Dalin Huang, Apr 25 '17 at 05:05
moment("2017-04-03 05:00:07").format('MMM DD, YYYY') would give "Apr 03, 2017" — user93, Apr 25 '17 at 05:07
Possible duplicate of [Is there any way to change input type="date" format?](http://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format) — lin, Apr 25 '17 at 05:11
This kind of question is solved more than once. Please search before asking. — lin, Apr 25 '17 at 05:12

score 0 · Answer 1 · answered Apr 25 '17 at 05:14

Simple way to achieve your requirement is by using Moment.js

var TodayDate = moment().format('MMM DD, YYYY');
var selectedDate = moment('2017-04-03 05:00:07').format('MMM DD, YYYY');
console.log("today = "+TodayDate);
console.log("selected = "+selectedDate);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

Vishnu Dhanakotti · Answer 2 · 2017-04-25T05:23:39.617

0

refer the angular filter in the below link.

use this 'MMM' format in default date filter available in the angular js to obtain the month and use the formats in the required order

{{1288323623006 | date:'MMM-dd-yyyy'}} try this

https://docs.angularjs.org/api/ng/filter/date

edited Apr 25 '17 at 05:23

answered Apr 25 '17 at 05:17

Vishnu Dhanakotti

113
8

I want to convert from "2017-04-03 05:00:07" to "2017/04/03" in html. – sudarsan Apr 25 '17 at 05:43

score 0 · Answer 3 · answered Apr 25 '17 at 05:20

Create directive as below and use in HTML:

Directive:

var app = angular.module("MyApp", []);

var datefrmt = "yyyy-MM-dd";

app.directive('dateFormateModel', function (dateFilter) {
    return {
        require: 'ngModel',
        link:function (scope, elm, attrs, ctrl) {            
            var dateFormat = datefrmt;           
            ctrl.$formatters.unshift(function (modelValue) {
                return dateFilter(modelValue, dateFormat);
            });
        }
    };
});

HTML:

<div class="propertyValue"><input type="text" ng-model="gc.tempApplicationSettingModel.CreatedDate" date-formate-model class="form-control"  /></div>

How to change the date format on display using angularjs

3 Answers3

https://docs.angularjs.org/api/ng/filter/date