comment lier l'élément Bootstrap-datepicker avec angularjs ng-model?
Voici le html pour le champ date:
<div class='form-group'>
<label>Check out</label>
<input type='text' ng-model='checkOut' class='form-control' data-date-format="yyyy-mm-dd" placeholder="Check out" required id="check-out">
</div>
<script>
$('#check-out').datepicker();
</script>
Le sélecteur de date apparaît dans le champ de saisie. Cependant, si je le fais dans mon contrôleur:
console.log($scope.checkOut);
Je reçois undefined in the javascript console. Comment résoudre ça?
Existe-t-il une meilleure façon d'utiliser bootstrap-datepicker avec angularjs?
Je ne veux pas utiliser angular-ui/angular-strap puisque mon projet est gonflé de bibliothèques javascript.
Comme le suggère @lort, vous ne pouvez pas accéder au modèle de datepicker à partir de votre contrôleur car le datepicker a sa propre portée privée.
Si vous définissez: ng-model="parent.checkOut"
et définissez dans le contrôleur: $scope.parent = {checkOut:''};
vous pouvez accéder au sélecteur de dates en utilisant: $scope.parent.checkOut
J'utilise bootstrap 3 datepicker https://eonasdan.github.io/bootstrap-datetimepicker/ et angularjs, j'ai eu le même problème avec ng-model, donc J'obtiens une valeur de date d'entrée en utilisant bootstrap jquery, ci-dessous est le code dans mon contrôleur, cela a fonctionné pour moi.
Html
<input class="form-control" name="date" id="datetimepicker" placeholder="select date">
Manette
$(function() {
//for displaying datepicker
$('#datetimepicker').datetimepicker({
viewMode: 'years',
format: 'DD/MM/YYYY',
});
//for getting input value
$("#datetimepicker").on("dp.change", function() {
$scope.selecteddate = $("#datetimepicker").val();
alert("selected date is " + $scope.selecteddate);
});
});
J'ai le même problème et je résous comme ça
ajouté dans la partie html
<input class="someting" id="datepicker" type="text" placeholder="Dae" ng-model=""/>
et simple dans l'appel du contrôleur
$scope.btnPost = function () {
var dateFromHTML = $('#datepicker').val();
Je viens de trouver une solution à cela moi-même. Je passe juste le nom du modèle à la directive (que j'ai trouvée la plupart en ligne). Cela définira la valeur du modèle lorsque la date change.
<input data-ng-model="datepickertext" type="text" date-picker="datepickertext" />{{datepickertext}}
angular.module('app').directive('datePicker', function() {
var link = function(scope, element, attrs) {
var modelName = attrs['datePicker'];
$(element).datepicker(
{
onSelect: function(dateText) {
scope[modelName] = dateText;
scope.$apply();
}
});
};
return {
require: 'ngModel',
restrict: 'A',
link: link
}
});
J'utilise Angular JS 1.5.0 et Bootstrap 3 Datetimepicker from https://eonasdan.github.io/bootstrap-datetimepicker/
Après un certain temps et des difficultés, j'ai finalement trouvé une solution pour le faire fonctionner pour moi :)
JSFiddle: http://jsfiddle.net/aortega/k6ke9n2c/
Code HTML:
<div class="form-group col-sm-4" >
<label for="birthdate" class="col-sm-4">Birthday</label>
<div class="col-sm-8">
<div class="input-group date" id="birthdate" ng-model="vm.Birthdate" date-picker>
<input type="text" class="form-control netto-input" ng-model="vm.Birthdate" date-picker-input>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="form-group col-sm-4">
<label for="birthdateText" class="col-sm-4">Model:</label>
<div class="col-sm-8">
<input type="text" class="form-control netto-input" ng-model="vm.Birthdate">
</div>
</div>
</body>
App.js:
Un simple contrôleur définissant l'attribut viewmodels Birtdate:
var app = angular.module('exampleApp',[]);
app.controller('ExampleCtrl', ['$scope', function($scope) {
var vm = this;
vm.Birthdate = "1988-04-21T18:25:43-05:00";
}]);
La première directive initialise le datetimepicker et écoute l'événement dp.change.
En cas de modification - le ngModel est également mis à jour.
// DatePicker -> NgModel
app.directive('datePicker', function () {
return {
require: 'ngModel',
link: function (scope, element, attr, ngModel) {
$(element).datetimepicker({
locale: 'DE',
format: 'DD.MM.YYYY',
parseInputDate: function (data) {
if (data instanceof Date) {
return moment(data);
} else {
return moment(new Date(data));
}
},
maxDate: new Date()
});
$(element).on("dp.change", function (e) {
ngModel.$viewValue = e.date;
ngModel.$commitViewValue();
});
}
};
});
La seconde directive surveille le ngModel et déclenche l'événement d'entrée onChange lorsqu'il est modifié. Cela mettra également à jour la valeur de vue datetimepicker .
// DatePicker Input NgModel->DatePicker
app.directive('datePickerInput', function() {
return {
require: 'ngModel',
link: function (scope, element, attr, ngModel) {
// Trigger the Input Change Event, so the Datepicker gets refreshed
scope.$watch(attr.ngModel, function (value) {
if (value) {
element.trigger("change");
}
});
}
};
});
Avez-vous essayé le bootstrap AngularUI? Il a tous les modules bootstrap réécrits en angulaire (y compris datepicker): http://angular-ui.github.io/bootstrap/
En utilisant this datepicker, j'ai eu le même problème. Je l'ai résolu en utilisant une petite astuce.
Dans la balise d'entrées, j'ai ajouté un nouvel attribut (dp-model):
<input class="form-control dp" type="text" dp-model="0" />
<input class="form-control dp" type="text" dp-model="1" />
...
Et puis dans le fichier js, j'ai forcé la liaison de cette façon:
$scope.formData.dp = []; // arrays of yours datepicker models
$('.dp').datepicker().on('changeDate', function(ev){
$scope.formData.dp[$(ev.target).attr('dp-model')] = $(ev.target).val();
});
Cela a fonctionné pour moi:
ensemble
ng-model = "date"
sur votre angular:
$ scope.date = '';
$ ('# check-out'). datepicker (). on ('changeDate', fonction ( ev) {
$ scope.date = $ ('# check-out'). val ();
$ scope. $ digest ();
$ scope. $ watch ('date', fonction (newValue, oldValue) {
$ scope.date = newValue;
});
});
Mon problème réel était que la valeur du modèle n'était pas reflétée jusqu'à ce qu'un autre composant de la portée soit modifié.
im utilisant this , et mon code:
this.todayNow = function () {
var rightNow = new Date();
return rightNow.toISOString().slice(0,10);
};
$scope.selecteddate = this.todayNow();
$(function() {
//for displaying datepicker
$('.date').datepicker({
format: 'yyyy-mm-dd',
language:'fa'
});
//for getting input value
$('.date').on("changeDate", function() {
$scope.selecteddate = $(".date").val();
});
});
Pour résoudre ce problème, mon code HTML ressemble à ceci:
<div class='input-group date' id='datetimepicker1'>
<input type='text' ng-model="date.arrival" name="arrival" id="arrival"
class="form-control" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Mon modèle ng ne se mettait pas à jour, j'ai donc utilisé ceci pour le réparer:
$("#datetimepicker1").on("dp.change", function (e) {
$scope.date.arrival = $("#arrival").val(); // pure magic
$('#datetimepicker2').data("DateTimePicker").minDate(e.date); // this line is not relevant for this example
});
Pour contourner le problème, définissez le champ id sur l'entrée, puis appelez document.getElementById ('nom_entrée'). Value pour obtenir la valeur du champ d'entrée.