カスタムアングル1.5コンポーネントで日付入力max属性を動作させる方法は？

Question

私はこのカスタムコンポーネント書いた：それはHTML5の検証日付入力に必要として

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

最大属性doesntの仕事を。

なぜ？

// 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

1. あなたのコンポーネントが（maxは10月28日に設定されているべきであるように、日付入力の最大属性は、形式YYYY-MM-DDにする必要がありますこの例）：

   <datetime value="app.dateTime" max="2016-10-28"></datetime> 
   

2. getHours()機能は、ローカル（getUTCHours()のような普遍的ではない）を返しますので、あなたはそれがJSのDateオブジェクトで計算され、時間をオフセット加算および減算する必要はありません。あなたは$ウォッチを必要とし、$ INITはありません、あなたのコンポーネントで

3. 、ちょうど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）