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

标签 javascript angularjs date momentjs angular-moment

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

我有两个问题

  1. 当我在页面加载时从 JS 代码设置 member.memberSince 时,日期是 显示良好,例如01-04-2017。但是当我选择日期时 日历,它以不需要的格式显示日期,例如2017 年 4 月 1 日星期六 00:00:00 GMT+0530

enter image description here

enter image description here

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

enter image description here

我该如何解决这个问题?

Plunker

最佳答案

这里有多个问题。

我们来看看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目的。但是当你选择一个日期时,它又变成了不符合 date:'<my-dateformat>' 的 Moment.js 对象。显然。

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

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

working plunker

关于javascript - Angular Moment Picker 库中的日期格式问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43558005/

相关文章:

asp.net - 将 Angular SpaTemplate Core 转换为 Core .Net Framework

arrays - 从解析到数组 Swift 查询多种日期格式

javascript - Google Calendar API 日期输出的正则表达式

javascript - 从库中返回一个对象?

javascript - 为什么 php 函数 str_word_count() 返回与等效的 js 不同的计数?

javascript - 当 ngAnnotate 说 "Cannot create property ' $methodName' 时,这是什么意思...”

javascript - Angular 日期过滤器不适用于双向数据绑定(bind)

javascript - AngularJS - 包装指令

javascript - 从 angularjs Controller 访问 html 小部件

php - 获取当前日期,给定 PHP 中的时区?