Comment formater la chaîne ng-model à ce jour pour le datpicker matériel angulaire

J'ai un mangouste connexion à une base de données contenant la Date d'objets dans une collection. Je veux voir ces Date d'objets à l'aide Angulaire du Matériau DatePicker de contrôle. L'objet Date, suivez les ISO format de la chaîne de.

Voici un extrait de code:

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

J'obtiens l'erreur suivante:

La ng-model pour md-datepicker doit être une instance de Date.

Lors de mes recherches, j'ai trouvé que vous pouvez utiliser des filtres pour créer une instance de Date mais cela ne fonctionne pas pour moi -> j'ai un message d'erreur disant que la valeur de modèle est non cessible lors de l'utilisation d'un simple filtre. Le filtre simplement renvoyé un nouvel objet Date basée sur la chaîne d'entrée.

Comment puis-je formater les chaînes à la Date d'objets tout en conservant ng-model changements?

EDIT: schéma de la mangouste
var Schéma = mangouste.Schéma;

var Schema = mongoose.Schema;

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

voici l'express de routage qui remplit le schéma

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

});

source d'informationauteur WJM

Voici un exemple:

Balisage:

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

});

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

Mise à JOUR:

Avec ng-repeat:

Balisage:

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

Violon: http://jsfiddle.net/masa671/bmqpyu8g/

9

Vous pouvez utiliser ng-init, un filtre personnalisé, et ng-changer et accomplir ceci dans le balisage.

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>
```
Avec cette approche, vous n'avez pas besoin d'encombrer votre Contrôleur de code avec Vue logique. L'inconvénient est que tous les changements dans le programme de licence.expirationdate dans le Contrôleur ne sera pas reflété dans l'Affichage automatiquement.

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])(([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+(?!:))?)?([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);
        }
    }
}

Cela va automatiquement convertir toutes les chaînes d'un serveur de réponses JSON à la date

Je voudrais faire comme ceci:

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>

Dans votre contrôleur

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

1

J'ai dû faire une date par défaut de 6 mois à partir de la journée de retour...

Après de longues expériences avec la date de conversion de format ISO et à l'arrière, j'ai créé une solution simple que je n'ai pas trouvé ici.

L'idée générale: Prenez le temps aujourd'hui et ajouter /soustraire le temps en millisecondes avant la date requise.

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>
```
contrôleur:
```
vm.sixMonthBeforeNow = new Date((+new Date) - 15778800000); //today - 6 month in ISO format (native for Angular Material Datepicker)
```
résultat:

Il sera peut-être utile pour quelqu'un...

J'ai créé un custom directive de gérer cela pour moi. J'ai utilisé la classe Date de Sugarjs.com pour travailler comme je l'ai mis en œuvre. Cette méthode assure la date de toujours affiché comme une date et ne saute pas partout avec décalage UTC impliqués. Vous pouvez modifier le formateur à return new Date(input) si vous ne voulez pas vous limiter à l'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

Vous ensuite l'utiliser dans votre balisage HTML comme

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

Vous devez vous connecter pour publier un commentaire.