Datetimepicker renvoie une chaîne vide en tant que valeur

J'utilise bootstrap datetimepicker pour la plage de dates. J'essaye d'obtenir la valeur de date dans le contrôleur angularjs comme montré ci-dessous. J'ai également essayé d'autres méthodes à partir des messages de stackoverflow. Mais quoi que je fasse, j'obtiens la valeur de la date en tant que 'chaîne vide' dans le journal de la console.Datetimepicker renvoie une chaîne vide en tant que valeur

J'ai ajouté des ressources dans cet ordre

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/locale/en-gb.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>

code HTML minimal lié à émettre.

<div class="container"> 
    <div class='col-md-3'> 
    <div class="form-group"> 
     <div ng-show="value == 'showSearch2'" class='input-group date' id='datetimepicker6'> 

     <input type='text' ng-model="startDate" class="form-control" /> 

     <span class="input-group-addon"> 
     <span class="glyphicon glyphicon-calendar"></span> 
     </span> 
     </div> 
    </div> 
    </div> 
</div>

Contrôleur

$(function() { 
     $('#datetimepicker6').datetimepicker({ 
      format : 'YYYY-MM-DD HH:mm:ss' 
     }); 
     $("#datetimepicker6").on("dp.change", function(e) { 
      $('#datetimepicker7').data("DateTimePicker").minDate(e.date); 

      $scope.startDate = $("#datetimepicker6").val(); 
      alert("selected date is " + $scope.startDate); 
     }); 
    });

Source

2016-11-15 user3844782

Votre utilisation angulaire js ??? – Aravind

Oui j'utilise angularjs – user3844782

où est la référence de script angular.js? Veuillez mettre à jour votre code angulaire avec les contrôleurs atleast. btw l'une des réponses ci-dessous a travaillé? – Aravind

Vous pouvez utiliser la valeur e.date dans l'événement dp.change. Je joins un petit extrait de code avec

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="http://ajax.googleapis.bootcss.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/locale/en-gb.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
<script> 
 
    var app = angular.module("myTestApp", []); 
 
    app.controller("myCtrl", function ($scope) { 
 
     $('#datetimepicker1').datetimepicker({ 
 
      format: "YYYY-MM-DD HH:mm:ss" 
 
     }); 
 
     $("#datetimepicker1").on("dp.change", function (e) { 
 
      $scope.startDate = e.date; 
 
    $scope.startDate = new Date($scope.startDate); 
 
    var year = $scope.startDate.getFullYear(); 
 
    var month = $scope.startDate.getMonth() + 1; 
 
    var date = $scope.startDate.getDate(); 
 
    var hour = $scope.startDate.getHours(); 
 
    var minute = $scope.startDate.getMinutes(); 
 
    var second = $scope.startDate.getSeconds(); 
 
    var DateString = year.toString() + "-" + 
 
          (((month.toString()).length ==1)? ("0" + month.toString()) : month.toString()) + "-" + 
 
          (((date.toString()).length ==1)? ("0" + date.toString()) : date.toString()) + " " + 
 
          (((hour.toString()).length ==1)? ("0" + hour.toString()) : hour.toString()) + ":" + 
 
          (((minute.toString()).length ==1)? ("0" + minute.toString()) : minute.toString()) + ":" + 
 
          (((second.toString()).length ==1)? ("0" + second.toString()) : second.toString()); 
 
          
 
           
 
      console.log("selected date is " + DateString); 
 
     }); 
 
    }); 
 
</script> 
 

 
<div ng-app="myTestApp" ng-controller="myCtrl"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class='col-sm-6'> 
 
       <div class="form-group"> 
 
        <div class='input-group date' id='datetimepicker1'> 
 
         <input type='text' class="form-control" /> 
 
         <span class="input-group-addon"> 
 
        <span class="glyphicon glyphicon-calendar"></span> 
 
         </span> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
</body> 
 

 
</html>

S'il vous plaît examiner cette question et laissez-moi savoir si cela correspond à vos besoins.

Source

2016-11-15 05:48:05 Nitheesh

Comment analyser la date? – user3844782

J'ai ajouté que aussi – Nitheesh

vous pouvez utiliser la nouvelle méthode Date ($ scope.startDate) pour le faire – Nitheesh

Utilisez une directive pour le datepicker.

Code HTML:

<input class="form-control input-sm ll-skin-melon" jqdatepicker placeholder="2015-06-15" id="duedate" name = "duedate" ng-model="duedate">

Code directive:

var drctv = angular.module('yourapp.directives', []); 

drctv.directive('jqdatepicker', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModelCtrl) { 
      console.log(element); 
      element.datepicker({ 
       dateFormat: 'yy-mm-dd', 
       minDate: 0 
      }); 

      element.on("dp.change", function(date) { 
        scope.$apply(function() { 
          ngModelCtrl.$setViewValue(date); 
         }); 
      }); 

      /*You can also try this code*/ 

      element.datepicker().on('changeDate', function (ev) { 
        scope.$apply(function() { 
          ngModelCtrl.$setViewValue(date); 
        }); 
      }); 

     } 
    }; 
});

J'espère que cela vous aidera à résoudre votre problème.

Source

2016-11-15 05:00:22

Je reçois erreur: option onSelect n'est pas reconnu – user3844782

@ user3844782, J'utilise un jpery datepicker et vous utilisez un bootstrap de sorte que vous devez mettre sur le site du bootstrap datepicker, laissez-moi changer mon code –

@ user3844782, Essayez mise à jour de réponse –

Datetimepicker renvoie une chaîne vide en tant que valeur

Répondre

Questions connexes