WJM WJM - 6 months ago 488
AngularJS Question

How to format ng-model string to date for angular material datepicker

I have a mongoose connection to a database containing Date objects in a collection. I want to view these Date objects using Angular Material's

DatePicker
control. The Date object follow the ISO string format.

Here is a code snippet:

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


I get the following error:

The
ng-model
for
md-datepicker
must be a Date instance.

When researching, I found that you can use filters to create a Date instance but this did not work for me -> I got an error message saying that the model value is non-assignable when using a simple filters. The filter simply returned a new Date object based on the string input.

How can I format the strings to Date objects while still allowing for
ng-model
changes?

EDIT: schema for mongoose
var Schema = mongoose.Schema;

var Schema = mongoose.Schema;

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


here is the express routing which populates the 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

Here is an example:

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:

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