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

Question

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

我有两个问题

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

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

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

普朗克

Answer 1

这里有多个问题。

让我们看一下文档 | angular-moment-picker#选项优先，

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

ng-model: Moment.js 对象的双向绑定属性。

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

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

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

在 HTML 中，您可以使用{{ 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" 一起使用，那么它将起作用