角度素材の日付ピッカーの日付にng-model文字列をフォーマットする方法

Question

私はmongooseコレクションにDateオブジェクトを含むデータベースに接続しています。私は、角度オブジェクトのDatePickerコントロールを使用して、これらのDateオブジェクトを表示したいと思います。 DateオブジェクトはISO文字列形式に従います。ここで

は、コードスニペットです：

<md-datepicker 
    ng-model="license.expirationdate" md-placeholder="Enter date"> 
</md-datepicker>  

私は次のエラーを取得する：

md-datepickerためng-modelは、Dateインスタンスでなければなりません。

調査すると、フィルタを使用してDateインスタンスを作成することができますが、これは私にとってはうまくいかないことがわかりました.-単純なフィルタを使用するとモデル値が割り当てられないというエラーメッセージが表示されます。フィルタは、文字列入力に基づいて新しいDateオブジェクトを返すだけでした。

ng-modelの変更を許可しながら、文字列をDateオブジェクトにフォーマットするにはどうすればよいですか？

EDIT：マングースのスキーマ var Schema = mongoose。スキーマ。ここで

var Schema = mongoose.Schema; 

var modelschema = new Schema({ 
    name : String, 
    licensetype : String, 
    activationcount : Number, 
    expirationdate: Date, 
    key : String 
}) 

スキーマここ

app.post('/licenses', function (req, res) { 

    console.log(req.body.expirationDate); 
    License.create({ 

     name: req.body.licenseName, 
     licensetype: req.body.licenseType, 
     activationcount: 0, 
     expirationdate: req.body.expirationDate, 
     key: "123456" 
    }, function (err, license) { 

     if (err) { 
      res.send(err); 
      console.log(err); 
     } 

     //Send user back to main page 
     res.writeHead(301, { 
      'Location': '/', 
      'Content-Type': 'text/plain' 
     }); 
     res.end(); 
    } 
    ) 

}); 

Answer 1

に移入エクスプレスルーティングが例である：

マークアップ：

<div ng-controller="MyCtrl"> 
    <md-datepicker ng-model="dt" md-placeholder="Enter date" ng-change="license.expirationdate = dt.toISOString()"> 
    </md-datepicker> 
    {{license.expirationdate}} 
</div> 

のJavaScript：

app.controller('MyCtrl', function($scope) { 

    $scope.license = { 
     expirationdate: '2015-12-15T23:00:00.000Z' 
    }; 

    $scope.dt = new Date($scope.license.expirationdate); 

}); 

フィドル：http://jsfiddle.net/masa671/jm6y12un/

UPDATE：

ng-repeat付：

マークアップ：

<div ng-controller="MyCtrl"> 
    <div ng-repeat="d in data"> 
     <md-datepicker 
      ng-model="dataMod[$index].dt" 
      md-placeholder="Enter date" 
      ng-change="d.license.expirationdate = dataMod[$index].dt.toISOString()"> 
     </md-datepicker> 
     {{d.license.expirationdate}} 
    </div> 
</div> 

はJavaScript：

app.controller('MyCtrl', function($scope) { 
    var i; 

    $scope.data = [ 
     { license: 
      { expirationdate: '2015-12-15T23:00:00.000Z' } 
     }, 
     { license: 
      { expirationdate: '2015-12-20T23:00:00.000Z' } 
     }, 
     { license: 
      { expirationdate: '2015-12-25T23:00:00.000Z' } 
     } 
    ]; 

    $scope.dataMod = []; 
    for (i = 0; i < $scope.data.length; i += 1) { 
     $scope.dataMod.push({ 
      dt: new Date($scope.data[i].license.expirationdate) 
     }); 
    } 
}); 

フィドル：http://jsfiddle.net/masa671/bmqpyu8g/

Answer 2

http://jsfiddle.net/katfby9L/1/

// Configure the $httpProvider by adding our date transformer 
app.config(["$httpProvider", function ($httpProvider) { 
    $httpProvider.defaults.transformResponse.push(function(responseData){ 
     convertDateStringsToDates(responseData); 
     return responseData; 
    }); 
}]); 

var regexIso8601 = /^([\+-]?\d{4}(?!\d{2}\b))((-?)((0[1-9]|1[0-2])(\3([12]\d|0[1-9]|3[01]))?|W([0-4]\d|5[0-2])(-?[1-7])?|(00[1-9]|0[1-9]\d|[12]\d{2}|3([0-5]\d|6[1-6])))([T\s]((([01]\d|2[0-3])((:?)[0-5]\d)?|24\:?00)([\.,]\d+(?!:))?)?(\17[0-5]\d([\.,]\d+)?)?([zZ]|([\+-])([01]\d|2[0-3]):?([0-5]\d)?)?)?)?$/; 

function convertDateStringsToDates(input) { 
    // Ignore things that aren't objects. 
    if (typeof input !== "object") return input; 

    for (var key in input) { 
     if (!input.hasOwnProperty(key)) continue; 

     var value = input[key]; 
     var match; 
     // Check for string properties which look like dates. 
     // TODO: Improve this regex to better match ISO 8601 date strings. 
     if (typeof value === "string" && (match = value.match(regexIso8601))) { 
      // Assume that Date.parse can parse ISO 8601 strings, or has been shimmed in older browsers to do so. 
      var milliseconds = Date.parse(match[0]); 
      if (!isNaN(milliseconds)) { 
       input[key] = new Date(milliseconds); 
      } 
     } else if (typeof value === "object") { 
      // Recurse into object 
      convertDateStringsToDates(value); 
     } 
    } 
} 

これは、自動的に日付にサーバーのJSONレスポンス内のすべての文字列を変換します

Answer 3

私はこのようにそれを行うだろう：

HTML：

<div ng-controller="MyCtrl"> 
    <div ng-repeat="d in data"> 
     <md-datepicker 
      ng-init="date = StrToDate(d.license.expirationdate);" 
      ng-model="date" 
      md-placeholder="Enter date" 
      ng-change="d.license.expirationdate = date.toISOString()"> 
     </md-datepicker> 
     {{d.license.expirationdate}} 
    </div> 
</div> 

であなたのコントローラ

$scope.StrToDate = function (str) { 
      return new Date(str); 
     } 

Answer 4

ng-init、カスタムフィルタ、およびng-changeを使用して、これをマークアップで実行できます。

はJavaScript：

app.filter('toDate', function() { 
    return function(input) { 
     return new Date(input); 
    } 
}) 

HTML：この方法で

<md-datepicker 
    ng-init="date = (license.expirationdate | toDate)" 
    ng-model="date" 
    ng-change="license.expirationdate = date.toISOString()" 
    md-placeholder="Enter date"> 
</md-datepicker> 

、[表示ロジックを使用してコントローラのコードを乱雑にする必要はありません。欠点は、コントローラのlicense.expirationdateに対するプログラム上の変更がViewに自動的に反映されないことです。

Answer 5

これを処理するカスタムディレクティブを作成しました。私はSugarjs.comのDateクラスを使って、実装したように動作します。このメソッドは、日付が常に日付のように表示されるようにし、UTCのオフセットに関連してジャンプしないようにします。 UTCに限定したくない場合は、フォーマッタをreturn new Date(input)に変更することができます。

angular.module 'app.components' 
.directive 'autoChangeStringDates', -> 
    directive = 
    restrict: 'A' 
    require: 'ngModel' 
    priority: 2000 
    link: (scope, el, attrs, ngModelController) -> 
     ngModelController.$formatters.push((input) -> 
     if typeof input == Date 
      return input 
     else 
      return Date.create(input, {fromUTC: true}) 
     ) 
    return 

あなたはその後、非常に長い実験の後...私は戻って、現在の日から6ヶ月のデフォルトの日付をしなければならなかったので、

<md-datepicker ng-model='myModel' auto-change-string-dates></md-datepicker> 

Answer 6

のようなあなたのHTMLマークアップに

をそれを使用しますISO形式に日付変換して戻ってきたので、ここでは見つけられなかったシンプルなソリューションを作成しました。

一般的な考え方：今日は時間をかけて、必要な日付までにミリ秒単位で時間を加算/減算します。

HTML：

<div flex-gt-xs> 
    <h4 class="md-title">Date From:</h4> 
     <md-datepicker ng-model="vm.sixMonthBeforeNow" md-placeholder="Date From:"></md-datepicker> 
     {{vm.sixMonthBeforeNow}} 
</div> 

コントローラ：

vm.sixMonthBeforeNow = new Date((+new Date) - 15778800000); // today - 6 month in ISO format (native for Angular Material Datepicker) 

結果： `license.expirationdate`を何

多分それが誰かのために有用であろう...