come associare l’elemento Bootstrap-datepicker con angularjs ng-model?

Ecco l’html per il campo della data:

$('#check-out').datepicker();

Il datepicker appare nel campo di input. Tuttavia se lo faccio nel mio controller:

 console.log($scope.checkOut); 

Mi viene undefined in the javascript console . Come risolvere questo?
C’è un modo migliore per usare bootstrap-datepicker con angularjs ?

Non voglio usare angular-ui/angular-strap poiché il mio progetto è gonfio di librerie javascript.

Come suggerisce @lort, non è ansible accedere al modello datepicker dal controller in quanto datapicker ha il proprio ambito privato.

Se imposti: ng-model="parent.checkOut"

e definire nel controller: $scope.parent = {checkOut:''};

puoi accedere a datepicker usando: $scope.parent.checkOut

Sto usando bootstrap 3 datepicker https://eonasdan.github.io/bootstrap-datetimepicker/ e angularjs, ho avuto lo stesso problema con ng-model, quindi ottengo il valore della data di input usando la funzione jquery di bootstrap, di seguito è riportato il codice in il mio controller, ha funzionato per me.

html

  

controllore

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

Sto usando Angular JS 1.5.0 e Bootstrap 3 Datetimepicker da https://eonasdan.github.io/bootstrap-datetimepicker/

Dopo un po ‘di tempo e faticando, ho finalmente trovato una soluzione su come farlo funzionare per me 🙂

JSFiddle: http://jsfiddle.net/aortega/k6ke9n2c/

Codice HTML:

  

App.js:

Semplicemente un controller che imposta l’attributo Birtdate viewmodels:

 var app = angular.module('exampleApp',[]); app.controller('ExampleCtrl', ['$scope', function($scope) { var vm = this; vm.Birthdate = "1988-04-21T18:25:43-05:00"; }]); 

La prima direttiva sta inizializzando il datimepicker e ascoltando l’evento dp.change.

Una volta modificato, anche ngModel viene aggiornato.

 // 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 seconda direttiva sta guardando il ngModel e triggers l’evento onChange quando modificato. Ciò aggiornerà anche il valore della vista 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"); } }); } }; }); 

Ho lo stesso problema e mi risolvo in questo modo

aggiunto nella parte html

  

e semplice nella chiamata Controller

 $scope.btnPost = function () { var dateFromHTML = $('#datepicker').val(); 

Hai provato il bootstrap AngularUI? Ha tutti i moduli di bootstrap riscritti in modo angular (incluso datepicker): http://angular-ui.github.io/bootstrap/

Ho appena trovato una soluzione a questo me stesso. Ho appena passato il nome del modello alla direttiva (che ho trovato più online). Questo imposterà il valore del modello quando la data cambia.

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

Uno di questi modi: imposta il campo id sull’input, quindi chiama document.getElementById (‘input_name’). Value per ottenere il valore del campo di input.

Usando questo datepicker ho avuto lo stesso problema. L’ho risolto usando un piccolo trucco.

Nel tag input ho aggiunto un nuovo attributo ( dp-model ):

   ... 

E poi nel file js ho forzato il binding in questo modo:

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

Questo ha funzionato per me:

impostato

  ng-model = "data" 

sul tuo controller angular:

     $ scope.date = '';

     $ ('# check-out'). datepicker (). on ('changeDate', function (ev) {
         $ scope.date = $ ('# check-out'). val ();
         $ Portata $ digest ().;
         $ scope. $ watch ('date', function (newValue, oldValue) {
              $ scope.date = newValue;
         });
     });

Il mio vero problema era che il valore del modello non veniva riflesso fino a quando non fu cambiato un altro componente sull’oscilloscopio.

sto usando questo e il mio codice:

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

Per risolvere questo, ho il mio HTML simile a questo:

 

Il mio ng-model non si aggiornava, quindi l’ho usato per sistemarlo:

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