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" ，然后它將起作用