Cách định dạng chuỗi mô hình ng đến nay cho datepicker vật liệu góc

Question

Tôi có một số mongoose kết nối với cơ sở dữ liệu chứa đối tượng Ngày trong bộ sưu tập. Tôi muốn xem các đối tượng Date này sử dụng điều khiển DatePicker của Angular Material. Đối tượng Ngày theo định dạng chuỗi ISO.

Đây là một đoạn mã:

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

tôi nhận được lỗi sau:

Các ng-model cho md-datepicker phải là một ví dụ ngày.

Khi nghiên cứu, tôi thấy rằng bạn có thể sử dụng bộ lọc để tạo phiên bản Date nhưng điều này không hiệu quả đối với tôi -> Tôi nhận được thông báo lỗi cho biết giá trị mô hình không thể gán được khi sử dụng bộ lọc đơn giản. Bộ lọc chỉ đơn giản trả về một đối tượng Date mới dựa trên đầu vào chuỗi.

Tôi làm cách nào để định dạng chuỗi thành Đối tượng ngày trong khi vẫn cho phép thay đổi ng-model?

EDIT: lược đồ cho mongoose var Schema = mongoose.Lược đồ;

var Schema = mongoose.Schema; 

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

đây là tuyến cao tốc mà populates schema

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

Dưới đây là một ví dụ:

Markup:

<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); 

}); 

Fiddle: http://jsfiddle.net/masa671/jm6y12un/

UPDATE:

Với ng-repeat:

Markup:

<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) 
     }); 
    } 
}); 

Fiddle: 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); 
     } 
    } 
} 

này sẽ tự động chuyển đổi tất cả các chuỗi trong phản ứng máy chủ JSON đến nay

Answer 3

tôi sẽ làm điều đó như thế này:

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> 

Trong bộ điều khiển của bạn

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

Answer 4

Bạn có thể sử dụng ng-init, bộ lọc tùy chỉnh và thay đổi ng và thực hiện việc này trong đánh dấu.

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> 

Với phương pháp này, bạn không cần phải lộn xộn đang điều khiển của bạn có tầm nhìn logic. Nhược điểm là bất kỳ thay đổi có lập trình nào đối với license.expirationdate trong Controller sẽ không được phản ánh trong View một cách tự động.

Answer 5

Tôi đã tạo một chỉ thị tùy chỉnh để xử lý điều này cho tôi. Tôi đã sử dụng lớp Date từ Sugarjs.com để nó hoạt động như tôi đã triển khai nó. Phương pháp này đảm bảo ngày luôn được hiển thị như một ngày và không nhảy xung quanh với bù đắp UTC có liên quan. Bạn có thể thay đổi trình định dạng thành return new Date(input) nếu bạn không muốn giam giữ UTC.

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 

Sau đó, bạn sử dụng nó trong mã HTML của bạn như vậy

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

Answer 6

tôi đã phải làm một ngày mặc định là 6 tháng kể từ ngày hiện tại trở lại ...

Sau khi thử nghiệm khá dài với chuyển đổi ngày sang định dạng ISO và ngược lại, tôi đã tạo một giải pháp đơn giản mà tôi không tìm thấy ở đây.

Ý tưởng chung: Dành thời gian hôm nay và cộng/trừ thời gian bằng mili giây cho đến ngày bắt buộc.

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> 

điều khiển:

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

kết quả:

Có lẽ nó sẽ có ích cho ai đó ...