我在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


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

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


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


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

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

Plunker

最佳答案

这里有多个问题。

让我们先来看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

09-16 15:29