Comparez les prix des domaines et des services informatiques des vendeurs du monde entier

Angular bootstrap datepicker Le format de date ne forma pas la valeur ng-model

j'utilise bootstrap date-picker Dans sa demande angular. Cependant, lorsque j'ai choisi la date de ces dates de collectionneur situées à la base du modèle NG, que j'ai, la liaison est mise à jour, je souhaite que ce modèle NG soit au format de la date. 'MM/dd/yyyy'.


"2009-02-03T18:30:00.000Z"


au lieu


02/04/2009


J'ai créé plunkr Pour le même
http://plnkr.co/edit/AtjFPbGgg ... eview
plunkr

Mon code Html et le contrôleur ressemble à ceci


html
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div ng-controller="DatepickerDemoCtrl">
<pre>Selected date is: <em>{{dt | date:'MM/dd/yyyy' }}</em></pre>
<p>above filter will just update above UI but I want to update actual ng-modle</p>
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input class="form-control" close-text="Close" date-disabled="disabled/date, mode/" datepicker-options="dateOptions" datepicker-popup="{{format}}" is-open="opened" max-date="'2015-06-22'" min-date="minDate" ng-model="dt" ng-required="true" type="text"/>
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open/$event/" type="button">
<i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<!--<div class="row">
<div class="col-md-6">
<label>Format:</label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
</div>
</div>-->
<hr/>
{{dt}}
</div>
</body>
</html>


Angular manette


angular.module/'plunker', ['ui.bootstrap']/;
var DatepickerDemoCtrl = function /$scope/ {


$scope.open = function/$event/ {
$event.preventDefault//;
$event.stopPropagation//;

$scope.opened = true;
};

$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};


$scope.format = 'dd-MMMM-yyyy';
};


Merci d'avance pour nourrir ma question.

UPDATE

J'appelle ci-dessous la méthode de publication de mes données et Var est une matrice de taille 900, qui contient la sélection des dates variables.


public SaveCurrentData/formToSave: tsmodels.ResponseTransferCalculationModelTS/ {

var query = this.EntityQuery.from/'SaveFormData'/.withParameters/{
$method: 'POST',
$encoding: 'JSON',
$data: {
VAR: formToSave.VAR,
X: formToSave.X,
CurrentForm: formToSave.currentForm,
}
}/;

var deferred = this.q.defer//;

this.manager.executeQuery/query/.then//response/ => {
deferred.resolve/response/;
}, /error/ => {
deferred.reject/error/;
}/;

return deferred.promise;
}
Invité:

Georges

Confirmation de:

Bien que de telles réponses aient été publiées, j'aimerais contribuer à ce qui me semblait la décision la plus facile et la plus pure.

Supposons que vous utilisiez AngularUI datepicker

Et votre valeur initiale pour le modèle NG n'est pas formatée en ajoutant simplement la directive suivante à votre projet, vous résolvez ce problème:


angular.module/'yourAppName'/
.directive/'datepickerPopup', function //{
return {
restrict: 'EAC',
require: 'ngModel',
link: function/scope, element, attr, controller/ {
//remove the default formatter from the input directive to prevent conflict
controller.$formatters.shift//;
}
}
}/;


J'ai trouvé cette décision dans
https://github.com/angular-ui/ ... /2659
AngularUI, Et donc tout mérite appartient aux personnes là-bas.

Constantine

Confirmation de:

vous pouvez utiliser $parsers, Comme indiqué ci-dessous, cela a résolu le problème pour moi.


window.module.directive/'myDate', function/dateFilter/ {
return {
restrict: 'EAC',
require: '?ngModel',
link: function/scope, element, attrs, ngModel/ {
ngModel.$parsers.push/function/viewValue/ {
return dateFilter/viewValue,'yyyy-MM-dd'/;
}/;
}
};
}/;


HTML:


<p class="input-group datepicker">
<input class="form-control" close-on-date-selection="false" close-text="Close" date-type="string" datepicker-popup="yyyy-MM-dd" is-open="$parent.opened" min-date="minDate" my-date="" name="name" ng-model="data[$parent.editable.name]" ng-required="{{editable.mandatory}}" show-button-bar="false" show-weeks="false" type="text"/>
<span class="input-group-btn">
<button class="btn btn-default" ng-click="openDatePicker/$event/" type="button">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>

Gabriel

Confirmation de:

J'ai rencontré le même problème et après plusieurs heures d'inscription et que l'enquête l'a corrigée.

Il s'est avéré que pour la première fois lorsque la valeur est définie dans le collecteur de date, $ ViewValue est une chaîne, donc dateFilter L'affiche comme ça. Tout ce que j'ai fait, il l'a analysé dans la date à laquelle l'objet.

Trouvez ce bloc dans le fichier ui-bootstrap-tpls


ngModel.$render = function// {
var date = ngModel.$viewValue ? dateFilter/ngModel.$viewValue, dateFormat/ : '';
element.val/date/;

updateCalendar//;
};


Et remplacez-le sur:


ngModel.$render = function// {
ngModel.$viewValue = new Date/ngModel.$viewValue/;
var date = ngModel.$viewValue ? dateFilter/ngModel.$viewValue, dateFormat/ : '';
element.val/date/;

updateCalendar//;
};


J'espère que cela aidera :/

Cyrille

Confirmation de:

format

, spécifié
datepicker-popup

, - c'est simple

Le format de la date affichée

. Sous-jacent
ngModel

- Ceci est l'objet de date. Tentative d'affichage, il le montrera comme une norme compatible avec la norme rapresentation.

Vous pouvez le montrer comme vous voulez utiliser un filtre
date

Dans la présentation, ou si vous en avez besoin pour être analysé dans le contrôleur, vous pouvez entrer.
$filter

dans votre contrôleur et appelez-le comme
$filter/'date'//date, format/

. Voir également
https://docs.angularjs.org/api/ng/filter/date
.

Gaspard

Confirmation de:

Vous pouvez utiliser des formulaires après avoir sélectionné la valeur dans votre directive. datepicker.
par exemple


angular.module/'foo'/.directive/'bar', function// {
return {
require: '?ngModel',
link: function/scope, elem, attrs, ctrl/ {
if /!ctrl/ return;

ctrl.$formatters.push/function/value/ {
if /value/ {
// format and return date here
}

return undefined;
}/;
}
};
}/;


https://docs.angularjs.org/api ... rsers

Florian

Confirmation de:

Avec tant de réponses déjà écrites, voici mon opinion.

DE Angular 1.5.6 & ui-bootstrap 1.3.3 Il suffit de l'ajouter au modèle &, Et tout est prêt.


ng-model-options="{timezone: 'UTC'}"


Noter

: Utilisez-le seulement si vous craignez que la date est en retard sur 1 Jour &, et ne vous inquiétez pas du temps supplémentaire T00:00:00.000Z

À présent Plunkr :

http://plnkr.co/edit/nncmB5EHE ... eview

Gaspard

Confirmation de:

Toutes les solutions proposées ne fonctionnaient pas pour moi, mais le plus proche était de @Rishii.

j'utilise AngularJS 1.4.4 et UI Bootstrap 0.13.3.


.directive/'jsr310Compatible', ['dateFilter', 'dateParser', function/dateFilter, dateParser/ {
return {
restrict: 'EAC',
require: 'ngModel',
priority: 1,
link: function/scope, element, attrs, ngModel/ {
var dateFormat = 'yyyy-MM-dd';

ngModel.$parsers.push/function/viewValue/ {
return dateFilter/viewValue, dateFormat/;
}/;

ngModel.$validators.date = function /modelValue, viewValue/ {
var value = modelValue || viewValue;

if /!attrs.ngRequired && !value/ {
return true;
}

if /angular.isNumber/value// {
value = new Date/value/;
}

if /!value/ {
return true;
}
else if /angular.isDate/value/ && !isNaN/value// {
return true;
}
else if /angular.isString/value// {
var date = dateParser.parse/value, dateFormat/;
return !isNaN/date/;
}
else {
return false;
}
};
}
};
}]/

Dominique

Confirmation de:

Je peux le réparer en ajoutant le code suivant à mon fichier JSP. Maintenant valeurs model et UI Le même.


<div ng-show="false">
{{dt = /dt | date:'dd-MMMM-yyyy'/ }}
</div>

Gaspard

Confirmation de:

Étapes pour changer le format de date par défaut ng-model

Pour divers formats de dates, vérifiez les valeurs de format dates. jqueryui datepicker Ici, par exemple, j'ai utilisé dd/mm/yy

Directif Create angularjs


angular.module/'app', ['ui.bootstrap']/.directive/'dt', function // {
return {
restrict: 'EAC',
require: 'ngModel',
link: function /scope, element, attr, ngModel/ {
ngModel.$parsers.push/function /viewValue/ {
return dateFilter/viewValue, 'dd/mm/yy'/;
}/;
}
}
}/;


Fonction d'enregistrement dateFilter


function dateFilter/val,format/ {
return $.datepicker.formatDate/format,val/;
}


Sur la page html Écrire un attribut ng-modal


<input class="form-control" close-text="Close" date-type="string" datepicker-options="dateOptions" dt="" is-open="popup2.opened" ng-model="src.pTO_DATE" ng-required="true" show-button-bar="false" show-weeks="false" type="text" uib-datepicker-popup="{{format}}"/>

Darius

Confirmation de:

Directif datepicker /et datepicker-popup/ nécessite que le modèle NG soit un objet Date. Ceci est documenté
https://github.com/angular-ui/ ... icker
.

Si tu veux ng-model Il y avait une chaîne dans un format spécifique, vous devez créer une directive shell. Voici un exemple /
https://plnkr.co/edit/kvKZGds7rgo6S8Dhm7uU
/:


/function // {
'use strict';

angular
.module/'myExample', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']/
.controller/'MyController', MyController/
.directive/'myDatepicker', myDatepickerDirective/;

MyController.$inject = ['$scope'];

function MyController /$scope/ {
$scope.dateFormat = 'dd MMMM yyyy';
$scope.myDate = '30 Jun 2017';
}

myDatepickerDirective.$inject = ['uibDateParser', '$filter'];

function myDatepickerDirective /uibDateParser, $filter/ {
return {
restrict: 'E',
scope: {
name: '@',
dateFormat: '@',
ngModel: '='
},
required: 'ngModel',
link: function /scope/ {

var isString = angular.isString/scope.ngModel/ && scope.dateFormat;

if /isString/ {
scope.internalModel = uibDateParser.parse/scope.ngModel, scope.dateFormat/;
} else {
scope.internalModel = scope.ngModel;
}

scope.open = function /event/ {
event.preventDefault//;
event.stopPropagation//;
scope.isOpen = true;
};

scope.change = function // {
if /isString/ {
scope.ngModel = $filter/'date'//scope.internalModel, scope.dateFormat/;
} else {
scope.ngModel = scope.internalModel;
}
};

},
template: [
'<div class="input-group">',
'<input class="form-control" is-open="isOpen" name="{{name}}" ng-change="change//" ng-click="open/$event/" ng-model="internalModel" readonly="true" style="background:#fff" type="text" uib-datepicker-popup="{{dateFormat}}"/>',
'<span class="input-group-btn">',
'<button class="btn btn-default" ng-click="open/$event/"> <i class="glyphicon glyphicon-calendar"></i> </button>',
'</span>',
'</div>'
].join/''/
}
}

}///;



html
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body ng-app="myExample">
<div ng-controller="MyController">
<p>
Date format: {{dateFormat}}
</p>
<p>
Value: {{myDate}}
</p>
<p>
<my-datepicker date-format="{{dateFormat}}" ng-model="myDate"></my-datepicker>
</p>
</div>
</body>
</html>

Florian

Confirmation de:

Enfin, j'ai eu un emploi sur le problème susmentionné. Sangle angulaire a exactement la même fonctionnalité que j'attends. Juste appliqué
date-format="MM/dd/yyyy" date-type="string"

, J'ai reçu le comportement attendu de la mise à jour du modèle NG dans un format donné.


<div append-source="" class="bs-example" style="padding-bottom: 24px;">
<form class="form-inline" name="datepickerForm" role="form">
<!-- Basic example -->
<div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}">
<label class="control-label"><i class="fa fa-calendar"></i> Date <small>/as date/</small></label>
<input autoclose="true" bs-datepicker="" class="form-control" date-format="MM/dd/yyyy" date-type="string" name="date" ng-model="selectedDate" type="text"/>
</div>
<hr/>
{{selectedDate}}
</form>
</div>


Voici les travailleurs
http://plnkr.co/edit/2zSKco598 ... eview
plunk

Frederic

Confirmation de:

Déterminer la nouvelle directive pour travailler avec une erreur n'est pas vraiment idéal.

Dans la mesure où datepicker Affiche correctement les dates ultérieures, l'un des chemins de dérivation simples peut simplement installer un modèle variable d'abord sur null, Puis à la date actuelle après un moment:


$scope.dt = null;
$timeout/ function//{
$scope.dt = new Date//;
},100/;

Fabrice

Confirmation de:

Vérification des réponses ci-dessus, je suis arrivé à cette conclusion et il travaillait parfaitement sans avoir à ajouter un attribut supplémentaire à votre markup


angular.module/'app'/.directive/'datepickerPopup', function/dateFilter/ {
return {
restrict: 'EAC',
require: 'ngModel',
link: function/scope, element, attr, ngModel/ {
ngModel.$parsers.push/function/viewValue/ {
return dateFilter/viewValue, 'yyyy-MM-dd'/;
}/;
}
}
}/;

Pour répondre aux questions, connectez-vous ou registre