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

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>

我有两个问题

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

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

我应该如何解决这个问题？

普朗克

Answer 1

这里有多个问题。

让我们看看文档 | angular-moment-picker #options首先，

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

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

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

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

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

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

工作笨蛋

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" 和 format="DD-MM-YYYY hh:mm a" ，然后它将起作用