angularjs – 如何将角度材料datepicker的ng-model字符串格式格式化

前端之家收集整理的这篇文章主要介绍了angularjs – 如何将角度材料datepicker的ng-model字符串格式格式化前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个与集合中包含Date对象的数据库的mongoose连接.我想使用角度材料的DatePicker控件查看这些Date对象. Date对象遵循ISO字符串格式.

以下是代码段:

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

我收到以下错误

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

在研究时,我发现您可以使用过滤器来创建一个Date实例,但这对我来说无效 – >我收到一条错误消息,指出在使用简单过滤器时,模型值不可分配.该过滤器根据字符串输入返回一个新的Date对象.

如何将字符串格式化为Date对象,同时仍然允许ng模式更改?

编辑:mongoose的模式
var Schema = mongoose.Schema;

  1. var Schema = mongoose.Schema;
  2.  
  3. var modelschema = new Schema({
  4. name : String,licensetype : String,activationcount : Number,expirationdate: Date,key : String
  5. })

这是填充模式的快速路由

  1. app.post('/licenses',function (req,res) {
  2.  
  3. console.log(req.body.expirationDate);
  4. License.create({
  5.  
  6. name: req.body.licenseName,licensetype: req.body.licenseType,activationcount: 0,expirationdate: req.body.expirationDate,key: "123456"
  7. },function (err,license) {
  8.  
  9. if (err) {
  10. res.send(err);
  11. console.log(err);
  12. }
  13.  
  14. //Send user back to main page
  15. res.writeHead(301,{
  16. 'Location': '/','Content-Type': 'text/plain'
  17. });
  18. res.end();
  19. }
  20. )
  21.  
  22. });
这是一个例子:

标记

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

JavaScript的:

  1. app.controller('MyCtrl',function($scope) {
  2.  
  3. $scope.license = {
  4. expirationdate: '2015-12-15T23:00:00.000Z'
  5. };
  6.  
  7. $scope.dt = new Date($scope.license.expirationdate);
  8.  
  9. });

小提琴:http://jsfiddle.net/masa671/jm6y12un/

更新:

使用ng重复:

标记

  1. <div ng-controller="MyCtrl">
  2. <div ng-repeat="d in data">
  3. <md-datepicker
  4. ng-model="dataMod[$index].dt"
  5. md-placeholder="Enter date"
  6. ng-change="d.license.expirationdate = dataMod[$index].dt.toISOString()">
  7. </md-datepicker>
  8. {{d.license.expirationdate}}
  9. </div>
  10. </div>

JavaScript的:

  1. app.controller('MyCtrl',function($scope) {
  2. var i;
  3.  
  4. $scope.data = [
  5. { license:
  6. { expirationdate: '2015-12-15T23:00:00.000Z' }
  7. },{ license:
  8. { expirationdate: '2015-12-20T23:00:00.000Z' }
  9. },{ license:
  10. { expirationdate: '2015-12-25T23:00:00.000Z' }
  11. }
  12. ];
  13.  
  14. $scope.dataMod = [];
  15. for (i = 0; i < $scope.data.length; i += 1) {
  16. $scope.dataMod.push({
  17. dt: new Date($scope.data[i].license.expirationdate)
  18. });
  19. }
  20. });

小提琴:http://jsfiddle.net/masa671/bmqpyu8g/

猜你在找的Angularjs相关文章