角:如何将选择包含日期与角引导日历绑定？

Question

我用一个数组填充下拉列表，该数组包含带有日期属性的对象。列表绑定在日期变量上。一个角度引导日历被绑定在这个变量上。

<select id="installFullDate"
    name="installFullDate" 
    class="form-control"
    ng-options="installationSlot.displayDate as installationSlot.displayDate for installationSlot in installationSlots"
    ng-model="user.installation.date"
    required>
</select>
<img class="calendar-datepicker"
    src="images/calendar.png"
    datepicker-popup="mm/dd/yyyy"
    ng-model="user.installation.date"
    is-open="opened"
    datepicker-options="dateOptions"
    date-disabled="disabledDate(date, mode)"
    min-date="minDate"
    max-date="maxDate"
    ng-required="true"
    close-text="X"
    ng-click="open($event)">
<span class="field-description">mm/dd/yyyy</span>

当我在select中选择一个元素时，绑定工作，元素在角引导日历中被选中。

当我在日历中选择元素时，在下拉列表中没有选择日期。

我认为角不能根据日期在下拉列表中找到匹配的对象。角引导日历可以绑定在字符串上吗？

Answer 1

我猜您的installationSlots数组项displayDate是一个字符串。要使绑定开始工作，您需要解决几个问题。

• 如果初始日期包含时间，则日期选择器控件包括一个时间(因此，单击Nov 30将为您提供一个用于11月30日的date+time )
  • 您可以通过在您的日期上调用setHours(0, 0, 0, 0)来解决此问题，然后再使用它来插入日期选择器。

​

• 两个日期相同的Date对象不相等：(new Date(2014, 0, 1) == new Date(2014, 0, 1))返回false

基于这些问题，使用Date对象看起来是行不通的。

一种解决方案是使用字符串比较，但是如何使字符串与user.installation.date属性保持同步？

如果使用使用与displayDate属性相同格式的getter/setter设置新属性，则可以对选择列表使用字符串匹配，将其绑定到自定义属性(在封面下使用实际日期)，并将日期选择器绑定到实际日期，例如：

HTML

<datepicker ng-model="user.installation.date"></datepicker>
<select ng-model="formattedDate" ng-model-options="{ getterSetter: true }"
  ng-options="slot.displayDate as slot.displayDate for slot in installationSlots">
</select>

注意：ng-model-options="{ getterSetter: true }"是非常重要的！

JavaScript

$scope.formattedDate = function(value) {
  if (angular.isDefined(value)) {
    // set
    $scope.user.installation.date = new Date(Date.parse(value));
  }
  return $scope.user.installation.date.toLocaleDateString();
};

注意:为了方便起见，我在这里使用了toLocaleDateString()，但是您需要确保格式与displayDate相同。矩JS库很适合进行日期操作和格式化。

上面的返回语句如下所示：

// default to empty string
var result = '';
// moment will use todays date if passed a null or undefined value, don't want that
if (angular.isDefined($scope.user.installation.date)) {
    // format output like "November 30th 2014"
    result = moment($scope.user.installation.date).format('MMMM Do YYYY');
}
return result;

只需调整format()语句以满足您的需要。