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库中的日期格式问题

回答

相关问题