Question

我的HTML中包含以下代码，并使用Angular v 1.6.3以及来自https://github.com/indrimuska/angular-moment-picker的角度选择器。我想使用格式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>

我有两个问题

当我在页面加载时从JS代码设置member.memberSince时，日期是显示正常01-04-2017。但是当我选择日期时日历，它以不需要的格式显示日期，例如Sat Apr 01 2017 00:00:00 GMT+0530。

如果我没有设置member.memberSince，那么我在页面上看不到任何控件来选择日历。

我该如何解决这个问题？

Plunker

Answer 1

这里有很多问题。

让我们先看一下docs | angular-moment-picker#options，

moment-picker：双向可绑定属性为格式化日期时间字符串。

ng-model：双向可绑定属性为 Moment.js对象。

现在，出于显而易见的原因，我们不应该同时设置相同的属性。如果您为ng-model提供了相同的属性，它似乎优先于该属性并将该属性设置为Moment.js对象。

接下来，当您{{memberSince | date : 'dd-MM-yyyy' || "Select a date"}}（其中memberSince设置为ng-model）时，最初有一个string / Date对象。但是当你选择一个日期时，它会再次变成不明显符合date:'<my-dateformat>'的Moment.js对象。

解决您的问题（如果您还没想到），将删除设置为指令的ng-model。您可以从memberSince免费访问moment-picker="memberSince"，因为它是您提供的格式的格式化字符串，即DD-MM-YYYY。

在HTML中，您可以使用{{ memberSince || "Select a date" }}而无需使用Angular的date过滤器，因为memberSince只是一个字符串，其中包含您提供格式的所选日期。

working plunker

Answer 2

AngularJS的两个绑定（ng-modal）无法在div上运行。所以尝试这样的事情：

<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”格式为“ DD-MM-YYYY hh：mm a”，这样就可以了

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

3 个答案: