Angular Moment Picker 库中的日期格式问题

Question

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 eg 01-04-2017 . But when I select the date from calendar, it shows the date in undesired format eg Sat Apr 01 2017 00:00:00 GMT+0530 .

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

How should I solve this problem?

Plunker

Answer 1

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"}} {{memberSince | date : 'dd-MM-yyyy' || "Select a date"}} {{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 ie DD-MM-YYYY .

And in HTML, you can use {{ memberSince || "Select a date" }} {{ 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

Answer 2

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>

Answer 3

您可以使用 locale="en" 和 format="DD-MM-YYYY hh:mm a" ，然后它将起作用