CODEWITHSUNDEEP
javascriptangularjsdatemomentjsangular-moment
Aakash
Aakash

Reputation: 2119

Date format issue in Angular Moment Picker library

I have below code in my HTML and using Angular v 1.6.3 along with angular moment picker from https://github.com/indrimuska/angular-moment-picker. I want to display calendar using format DD-MM-YYYY.

<div moment-picker="member.memberSince"
    format="DD-MM-YYYY"
    max-view="month"
    start-view="month"
    autoclose="true"
    today="true"
    ng-model="member.memberSince"
    start-date="member.memberSince | date : 'dd-MM-yyyy'">
    {{ member.memberSince | date : 'dd-MM-yyyy' || "Select a date" }}
</div>

I have two problems

  1. When I set member.memberSince from JS code on page load, date is displayed fine e.g. 01-04-2017. But when I select the date from calendar, it shows the date in undesired format e.g. Sat Apr 01 2017 00:00:00 GMT+0530.

enter image description here

enter image description here

  1. If I don't set member.memberSince, then I can't see any control on page to select calendar.

enter image description here

How should I solve this problem?

Plunker

Upvotes: 1

Views: 4431

Answers (3)

Baljeet Singh Khalsa
Baljeet Singh Khalsa

Reputation: 36

you can use locale="en" with format="DD-MM-YYYY hh:mm a" , then it will be work

Upvotes: 0

tanmay
tanmay

Reputation: 7911

There are multiple issues here.

Let's have a look at docs | angular-moment-picker#options first,

moment-picker: Two-way bindable property as formatted datetime string.

ng-model: Two-way bindable property as Moment.js object.

Now, we should not have both set to same property for obvious reasons. If you have provided ng-model with same property, it seem to give precendence to that and sets the property to Moment.js object.

Next, when you have {{memberSince | date : 'dd-MM-yyyy' || "Select a date"}} (where memberSince is set to ng-model), which initially had a string/Date object. But when you select a date, it again becomes Moment.js object which doesn't comply to date:'<my-dateformat>' obviously.

Solution to your problem (if you haven't figured out yet), would be to remove ng-model set to the directive. And you can freely access memberSince from moment-picker="memberSince" since it would be a formatted string in your provided format i.e. DD-MM-YYYY.

And in HTML, you can use {{ memberSince || "Select a date" }} without needing to use Angular's date filter since memberSince is just a string containing your selected date in provided format.

working plunker

Upvotes: 3

ShivamRajput
ShivamRajput

Reputation: 166

The two bindings (ng-modal) of AngularJS are not working on div. So try something like this:

<div ng-app="myApp" ng-controller="myCtrl">
<div
    moment-picker="member.datepicker"
    max-view="month"
    start-view="month"
    format="DD-MM-YYYY"
    autoclose="true"
    today="true"
   >Member Sience
  {{ member.datepicker | date:'dd-MM-yyyy' || 'Select a date' }}
</div>    

<script>
var app = angular.module('myApp', ['moment-picker']);
app.controller('myCtrl', function($scope) {
     $scope.member ={
        datepicker:new Date()
     }
});
</script>

Upvotes: 0

Related Questions