CODEWITHSUNDEEP
angular-material
davids
davids

Reputation: 5577

Format date value in material design to remove time

I have the following input on my form:

<md-input-container class="md-block" flex>
    <label>Install Date</label>
    <input type="text" date="yyyy-MM-dd" ng-model="selectedCompanyDetail.InstallDate" disabled>
</md-input-container>

As you can probably tell, I want the date displayed with this format yyyy-MM-dd. However, what I am getting is this: 1993-01-01T00:00:00.

It looks correct if I do this:

<md-input-container class="md-block" flex>
    <label>Install Date</label>
    <input type="text" ng-model="selectedCompanyDetail.InstallDate | date:'yyyy-MM-dd':'UTC'" disabled>
</md-input-container>

But, I get this error in the developer tools:

angular.js:13307 Error: [ngModel:nonassign] http://errors.angularjs.org/1.5.0-rc.2/ngModel/nonassign?p0=selectedCompanyDetail.InstallDate%20%7CNaNate%3A'yyyy-MM-dd'%3A'UTC'&p1=%3Cinput%20type%3D%22text%22%20date%3D%22yyyy-MM-dd%22%20ng-model%3D%selectedCompanyDetail.InstallDate%20%7C%date%3A'yyyy-MM-dd'%3A'UTC'%22%20disabled%3D%22%22%class%3D%22ng-pristine%20ng-untouched%20ng-valid%22%3E at Error (native) at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.min.js:6:421

I can still use the view, but every date field has this same error.

I have many date fields and don't want to add a filter to each one as suggested here: AngularJS get formatted date in ng-model

There has to be a native way to format a date input like a date without the time.

Suggestions or ideas?

Upvotes: 2

Views: 1950

Answers (1)

nextt1
nextt1

Reputation: 3988

You can use this package to handle any kind of date and time manipulation. https://github.com/urish/angular-moment

I use it like this.

selectedCompanyDetail.InstallDateNewFormat = moment(selectedCompanyDetail.InstallDate).format('YYYY-MM-DD');

You must another model to store this new date since md-datepicker only allows data javascript object. while this format returns plain text(string).

Upvotes: 1

Related Questions