Question

我是Angular的新手，需要有关Custom Directive的帮助。我有一个日期选择器指令，用户从下拉列表中选择日期，月份和年份，然后在文本框中以格式显示：YYYY-MM-DD

 $scope.$watch('model', function ( newDate ) {
        $scope.dateFields.day = new Date(newDate).getUTCDate();
        $scope.dateFields.month = new Date(newDate).getUTCMonth();
        $scope.dateFields.year = new Date(newDate).getUTCFullYear();
      });

使用以下方式显示下拉列表：

<select required name="dateFields.month" data-ng-model="dateFields.month" p ng-options="month.value as month.name for month in months" value="{{dateField.month}}" ng-change="checkDate()" ng-disabled="disableFields"></select>

<select required ng-if="!yearText" name="dateFields.year" data-ng-model="dateFields.year"  ng-options="year for year in years" ng-change="checkDate()" ng-disabled="disableFields"></select>

当选择了上述所有下拉列表时，输入文本框仅显示我想以格式显示完整日期的年份：YYYY-MM-DD

该守则是：

<input required ng-if="yearText" type="text" name="dateFields.year" data-ng-model="dateFields.year" placeholder="Year" class="form-control" ng-disabled="disableFields">

在上面的代码中有data-ng-model="dateFields.year"。有什么方法我可以自定义这个来显示dateFields.year-dateFields.month-dateFields.date

Answer 1

最简单的解决方案是使用专用模型来完成日期。我可以看到你正在使用ngChange指令。在这种情况下，您可以在此函数中设置正确的模型值：

$scope.checkDate = function() {
    // checking date ...
    // all is fine set full date model
    $scope.dateFields.fullDate = $scope.dateFields.year + '-' + $scope.dateFields.month + '-' + $scope.dateFields.day;
}

并在HTML中使用：

<input data-ng-model="dateFields.fullDate" required ng-if="yearText" type="text" name="dateFields.year" placeholder="Year" class="form-control" ng-disabled="disableFields">

我认为它适用于你的情况。

日期选择器的角度自定义指令中的ng-Model格式日期

1 个答案:

演示：http://plnkr.co/edit/SKCbABDifkbnIT2FTV6X?p=preview