如何将 ng-model 字符串格式化为角度材料日期选择器的日期答案

【问题标题】：How to format ng-model string to date for angular material datepicker如何将 ng-model 字符串格式化为角度材料日期选择器的日期
【发布时间】：2016-03-20 08:33:33
【问题描述】：

我有一个 mongoose 连接到包含集合中 Date 对象的数据库。我想使用 Angular Material 的 DatePicker 控件查看这些 Date 对象。 Date 对象遵循 ISO 字符串格式。

这是一个代码sn-p：

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

我收到以下错误：

md-datepicker 的 ng-model 必须是 Date 实例。

在研究时，我发现您可以使用过滤器创建 Date 实例，但这对我不起作用 -> 我收到一条错误消息，指出使用简单过滤器时模型值不可分配。过滤器只是根据字符串输入返回一个新的 Date 对象。

如何将字符串格式化为 Date 对象，同时仍允许 ng-model 更改？

编辑：猫鼬的架构 var Schema = mongoose.Schema;

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

});

【问题讨论】：

license.expirationdate 长什么样子？
使用相同的 DatePicker 控件设置并给出以下结果：2015-12-15T23:00:00.000Z
好的，您能在license.expirationdate 或者只是licsense 的位置显示代码吗？您希望模型以何种方式更改 - 例如新日期将进入并且您希望它重新填充日期选择器？您要更改日期并将其发送回去还是什么？
expirationdate 是通过简单地将 DatePicker 的输出发送到 mongoose 模式来填充的，expirationdate 类型为 Date。我希望 DatePicker 能够正确查看存储在数据库中的日期，并且当我更改 DatePicker 上的日期时，我想使用 ng-changed 事件来更新数据库。

标签： angularjs date mongoose angular-material

【解决方案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/

更新：

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

【讨论】：

感谢您的示例。这说明了很多。如果我使用 ng-repeat 和集合填充表格，我将如何创建日期实例？

【解决方案2】：

您可以使用 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 的任何编程更改都不会自动反映在视图中。

【讨论】：

非常感谢，我们试图避免弄乱控制器代码。

【解决方案3】：

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 响应中的所有字符串转换为日期

【讨论】：

这太棒了。省去了在响应数据中循环的很多麻烦。

【解决方案4】：

我会这样做：

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

【讨论】：

【解决方案5】：

我必须将默认日期设置为从当天起 6 个月...

在将日期转换为 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)

结果：

也许它对某人有用......

【讨论】：

【解决方案6】：

我创建了一个自定义指令来为我处理这个问题。我已经使用了来自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

然后像这样在 HTML 标记中使用它

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

【讨论】：