角度：如何将包含日期的选择与角度引导日历绑定？答案

【问题标题】：angular : how can i bind select containing date with angular bootstrap calendar?角度：如何将包含日期的选择与角度引导日历绑定？
【发布时间】：2014-11-30 05:27:21
【问题描述】：

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

<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 中选择一个元素时绑定起作用，该元素是在 angular boostrap 日历中选择的。

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

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

【问题讨论】：

标签： javascript angularjs angular-ui-bootstrap

【解决方案1】：

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

如果初始日期包含时间，则日期选择器控件包含时间（因此单击 11 月 30 日将为您提供 11 月 30 日的日期+时间）
- 您可以在使用日期选择器之前调用 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 相同。 moment JS library 非常适合进行日期操作和格式化。

上面的 return 语句会变成这样：

// 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() 语句以满足您的需要。

【讨论】：