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

Question

我的 HTML 中有以下代码，并使用 Angular v 1.6.3 以及来自 https://github.com/indrimuska/angular-moment-picker 的 angular 时刻选择器。我想使用 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。但是当我 select 日期从日历，它以不需要的格式显示日期，例如Sat Apr 01 2017 00:00:00 GMT+0530。

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

我该如何解决这个问题？

Plunker

Answer 1

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 2

这里有多个问题。

先来看看docs | angular-moment-picker#options，

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

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

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

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

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

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

working plunker

Answer 3

你可以使用 locale="en" 和 format="DD-MM-YYYY hh:mm a" ，这样就可以了

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

Date format issue in Angular Moment Picker library

javascript

date

angularjs

momentjs

angular-moment