Angular Moment Picker庫中的日期格式問題

我在我的HTML中使用了以下代碼，並使用了Angular v 1.6.3以及來自https://github.com/indrimuska/angular-moment-picker的角矩選擇器。我想使用格式DD-MM-YYYY來顯示日曆。Angular Moment Picker庫中的日期格式問題

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

我有兩個問題

當我設置member.memberSince從JS代碼在頁面加載，日期是顯示精細例如01-04-2017。但是，當我從日曆中選擇日期時，它會以不期望的格式顯示日期，例如Sat Apr 01 2017 00:00:00 GMT+0530。

如果我不設置member.memberSince，然後我不能看到網頁上的任何控件選擇日曆。

我應該如何解決這個問題？

Plunker

來源

2017-04-22 Aakash

創建plunker再現問題的可能？ – tanmay

@tanmay Plunker補充說。 – Aakash

有多種問題在這裏。

讓我們來看看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對象。但是當你選擇一個日期時，它又會變成Moment.js對象，顯然不符合date:'<my-dateformat>'。

解決您的問題（如果您還沒有弄清楚），將刪除設置爲指令的ng-model。您可以從moment-picker="memberSince"免費訪問memberSince，因爲它將是您提供的格式的格式化字符串，即DD-MM-YYYY。

而在HTML中，您可以使用{{ memberSince || "Select a date" }}，而無需使用Angular的date篩選器，因爲memberSince只是包含所選日期的字符串，並以提供的格式顯示。

working plunker

來源

2017-04-23 04:10:59 tanmay

謝謝@tanmay。我已經開始使用角度2周，並瞭解它的許多事情。你的解決方案工作，雖然我不能設置日期，因爲你設置在你的蹲點。這個值來自後端，作爲大對象的一部分，所以我不得不在服務器端自身格式化值。但它的工作！再次感謝。 – Aakash

@Aakash我很高興這有一點幫助！ :) – tanmay

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>

來源

2017-04-22 17:17:20 ShivamRajput

Angular Moment Picker庫中的日期格式問題

回答

相關問題