comment lier L'élément Bootstrap-datepicker avec angularjs ng-model?

je suis en utilisant bootstrap 3 datepicker https://eonasdan.github.io/bootstrap-datetimepicker/ et angularjs, j'ai eu le même problème avec ng-model, alors je suis entrée date de valeur à l'aide de bootstrap, jquery fonction, ci-dessous est le code dans mon contrôleur, il a travaillé pour moi.

Html

<input class="form-control" name="date" id="datetimepicker" placeholder="select date">

Controller

$(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'utilise Angular JS 1.5.0 et Bootstrap 3 Datetimepicker de https://eonasdan.github.io/bootstrap-datetimepicker/

après un certain temps et des difficultés, j'ai finalement trouvé une solution comment 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:

simplement un controller paramétrant les modèles de vue Birtdate attribut:

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 en écoutant le dp.événement de changement.

quand modifié - 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 deuxième directive surveille le ngModel, et déclenche l'événement input onChange lorsqu'il est modifié. Ceci mettra également à jour le datetimepicker voir la valeur.

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

j'ai le même problème et à le résoudre comme ceci

ajouté dans la partie html

<input class="someting" id="datepicker" type="text" placeholder="Dae" ng-model=""/>

et simple dans le Contrôleur d'appel

$scope.btnPost = function () {

          var dateFromHTML = $('#datepicker').val();

avez-vous essayé AngularUI bootstrap? Il a tous les modules bootstrap réécrits en angular (y compris datepicker):http://angular-ui.github.io/bootstrap/

je viens de trouver une solution moi-même. Je viens de passer le nom du modèle à la directive (que j'ai trouvé la plupart du temps 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
    }
});

une des solutions: définir le champ id à l'entrée, puis appeler document.getElementById ('input_name').valeur pour obtenir la valeur du champ de saisie.

en utilisant datepicker j'ai eu le même problème. Je l'ai résolu avec un petit truc.

dans la balise inputs 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" />
...

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:

set

ng-model="date"

    $scope.date = '';

    $('#check-out').datepicker().on('changeDate', function (ev) {
        $scope.date= $('#check-out').val();
        $scope.$digest();
        $scope.$watch('date', function (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 sur la portée ait été changé.

im en utilisant 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, j'ai mon code HTML comme 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 ng-model ne serait pas de mise à jour, j'ai donc utilisé cette solution:

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