2017-06-26 2 views
0

Je ne peux pas afficher datetime à partir du sélecteur DateTime. Ceci est mon code HTML:Angularjs Lier des valeurs à partir de Datetime Picker

<body ng-app="app" ng-controller="mtCtrl"> 
<div class="col-sm-6"> 
<label style="font-size:12px" for="" class="">Reporting Time</label> 
<div class="input-group date form_datetime" data-date-format="HH:ii P" data-link-field="dtp_reporting_time"> 
<input ng-model="reportingtime" name="reportingtime" id="reportingtime" class="form-control" size="16" type="text"> 
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span> 
</div> 
<input type="hidden" id="dtp_reporting_time" /><br/>  
</div> 

Time : {{reporting_time}} 

<script> 
var app = angular.module("app", []); 
app.controller("mtCtrl", function ($scope) { 
$('.form_datetime').datetimepicker({ 
    weekStart: 1, 
    todayBtn: 1, 
    autoclose: 1, 
    todayHighlight: 1, 
    startView: 2, 
    forceParse: 0, 
    showMeridian: 1, 
onSelect: function(date){ 
    angular.element($('#reportingtime')).triggerHandler('input'); 
} 
}); 
$scope.reporting_time = $scope.reportingtime 
}); 
</body> 

Si je tape des valeurs dans cette entrée montrant que sa valeur, mais quand je me ramassais la date du sélecteur de datetime ne pas montrer cette date ou l'heure.
Je veux montrer l'heure dans {{reporting_time}} ... S'il vous plaît aidez-moi .. Merci

+0

Pouvez-vous mettre un plunker? ou donnez le lien au module sélecteur d'heure de date que vous utilisez. Avoir à regarder le module que vous utilisez, car à partir de cela, il n'est pas possible de déboguer ou de comprendre ce qui se passe. Et si vous n'avez pas besoin d'utiliser un module externe pour le sélecteur de date et heure. Je vous recommande d'utiliser input type = date uniquement car cela fonctionne bien avec angularjs –

+0

im en utilisant ce datetimepicker 'http: // www.malot.fr/bootstrap-datetimepicker /' J'ai essayé 'type = date' mais ne fonctionne pas .. . –

Répondre

1

Cette fonction devrait vous permettre de continuer, comme le module est en jquery, il peut travailler en dehors du champ angulaire vous ne pouvez pas être trouvé c'est valeur dans le contrôleur, donc vous devez le mettre manuellement à l'aide de jquery

$('.form_datetime') 
.datetimepicker() 
.on('changeDate', function(ev){ 
    $scope.reporting_time = ev.date.valueOf(); 
    console.log($scope.reporting_time); 
}); 

type date d'entrée également fonctionne parfaitement pour moi dans ce plunker

https://plnkr.co/edit/LhF4PBSsQoFOctc0Q5g5?p=preview

0

Vous devez initialiser votre entrée datetime comme un sélecteur de date-heure. Je suggère de remplacer ce

$('.form_datetime').datetimepicker({ 
    weekStart: 1, 
    todayBtn: 1, 
    autoclose: 1, 
    todayHighlight: 1, 
    startView: 2, 
    forceParse: 0, 
    showMeridian: 1, 
    onSelect: function(date){ 
     angular.element($('#reportingtime')).triggerHandler('input'); 
    } 
}); 

avec

$('#reportingtime').datetimepicker({ 
    weekStart: 1, 
    todayBtn: 1, 
    autoclose: 1, 
    todayHighlight: 1, 
    startView: 2, 
    forceParse: 0, 
    showMeridian: 1, 
    onSelect: function(date){ 
     angular.element($('#reportingtime')).triggerHandler('input'); 
    } 
}); 
0
function(date){ 
    $scope.date = date; 
    $scope.formatteddate = ...//format your date as string here 
    $scope.$apply(); 
} 

Et lier votre ng-modèle à la date formated.

Pourquoi le $ apply()? Parce que l'angulaire regarde et réagit seulement pour les événements qu'il gère et ainsi rafraîchira les valeurs liées, puisque votre datepicker n'est pas géré par angulaire, la valeur d'entrée ne sera pas synchronisée. Vous devez lui dire que quelque chose a changé et qu'il doit faire son travail, ce qui est le but de $ apply.