Question

我写了这个自定义组件：

<datetime value="vm.woComplete.CompleteDate" max="2016-10-25"></datetime>

max 属性在html5验证日期输入中无法正常工作。

为什么？

// DateTimeComponent is used for date/time input with 2-way binding and UTC correction

namespace AppDomain {
    "use strict";

    class DateTimeController {

        value: Date;
        displayValue: Date;
        max: string;

        static $inject = ["$scope"];

        // West from UTC - TimezoneOffset is positive , East from UTC - TimezoneOffset is negative

        constructor($scope: ng.IScope) {
            $scope.$watch(
                "$ctrl.displayValue",
                (newValue: Date, oldValue: Date) => {
                    this.value = newValue;
                    var offset = this.displayValue.getTimezoneOffset() / 60;  // getTimezoneOffset returns minutes, we need hours
                    this.value.setHours(this.value.getHours() + offset); // LOCAL to UTC = UTC + Offset

                }
            );
        }

        $onInit() {
            this.displayValue = this.value;
            var offset = this.displayValue.getTimezoneOffset() / 60; // getTimezoneOffset returns minutes, we need hours
            this.displayValue.setHours(this.displayValue.getHours() - offset); // UTC to LOCAL = UTC - Offset
        }
    }

    const DateTimeComponent: ng.IComponentOptions = {

        //template: "<p><input type='date' class='form-control' ng-model='$ctrl.displayValue'></p><p><input type='time' class='form-control' ng-model='$ctrl.displayValue'></p>",
        template: "<p><input type='datetime-local' class='form-control' ng-model='$ctrl.displayValue' max='{{$ctrl.max}}'></p>",
        bindings: {
            value: "=",
            max: "@"
        },
        controller: DateTimeController

    };

    angular.module("app").component("datetime", DateTimeComponent);
}

Plunker：http://plnkr.co/edit/iYt0sS?p=preview

Answer 1

max 属性应采用格式 yyyy-mm-dd ，因此您的组件应为（此示例的最大值设置为10月28日））：
```
<datetime value="app.dateTime" max="2016-10-28"></datetime>
```
getHours()函数返回本地（不像getUTCHours()那样通用），因此您不需要添加和减去偏移小时数，它由JS Date对象计算。

，您不需要$ watch和$ init，只需将 value 的绑定设置为displayValue: '=value'：

namespace myApp {
  const dateTimeComponent = {
    templateUrl: 'app/datetime.component.html',
    bindings: {
      displayValue: '=value',
      max: '@'
    }
  };

  angular.module('app').component('datetime', dateTimeComponent);
}

plunker：http://plnkr.co/edit/fFNY9C?p=preview

https://angular-ui.github.io/bootstrap/#/datepicker

https://angular-ui.github.io/bootstrap/#/timepicker

如何使自定义角度1.5组件中的日期输入max属性工作？

1 个答案: