如何使日期输入最大属性在自定义角度 1.5 组件中工作？答案

【问题标题】：How to make date input max attribute work in custom angular 1.5 component?如何使日期输入最大属性在自定义角度 1.5 组件中工作？
【发布时间】：2016-10-26 07:05:13
【问题描述】：

我编写了这个自定义组件：

<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

【问题讨论】：

标签： angularjs html typescript

【解决方案1】：

日期输入的
max 属性应采用 yyyy-mm-dd 格式，因此您的组件应为（本示例中 max 设置为 10 月 28 日）：
```
<datetime value="app.dateTime" max="2016-10-28"></datetime>
```
getHours()函数返回本地（不像getUTCHours()那样通用），所以不需要加减offset小时，由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

顺便说一句，日期类型输入在不同的浏览器中具有不同的行为，在某些浏览器（MAC Firfox，> IE10）中根本不显示日历。样式和错误消息是不同的，所以，我建议您使用一些第三方小部件，例如引导 UI 日期选择器 - https://angular-ui.github.io/bootstrap/#/datepicker（可能连同时间选择器 - https://angular-ui.github.io/bootstrap/#/timepicker）

【讨论】：