Angularjs Bind Werte von Datetime Picker

Ich kann Datetime von DateTime Picker nicht anzeigen. Dies ist mein HTML-Code:Angularjs Bind Werte von 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>

Wenn ich seine zeigt einige Werte tippe in dieser Eingabe, die Werte, aber wenn ich bin Kommissionierung Datum von Datetime-Picker nicht das Datum oder die Uhrzeit nicht zeigt.
Ich möchte die Zeit in {{reporting_time}} anzeigen ... Bitte helfen Sie mir .. Danke

Quelle

2017-06-26 Ramachandran A

Können Sie einen Plünderer setzen? oder geben Sie den Link zu dem von Ihnen verwendeten Datum/Uhrzeit-Auswahlmodul an. Schauen Sie sich das Modul an, das Sie verwenden, da es keine Möglichkeit gibt, zu debuggen oder zu verstehen, was passiert. Und wenn Sie keine spezielle Anforderung haben, ein externes Modul für den Datetime-Picker zu verwenden. Ich empfehle Ihnen, Input-Typ = Datum nur zu verwenden, da es gut mit angularjs funktioniert –

im Verwenden dieses datetimepicker 'http: // www.malot.fr/bootstrap-datetimepicker /' Ich habe versucht, Typ = Datum, aber nicht funktioniert .. . –

Diese Funktion zu ersetzen, sollten Sie gehen, wie das Modul in jquery ist, kann es arbeiten außerhalb des Winkel Umfang sein können Sie nicht bekommen, es ist Wert in der Steuerung, so dass Sie es mit Hilfe von jquery

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

auch input type Datum funktioniert perfekt für mich in diesem Plunker manuell eingestellt haben

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

Quelle

2017-06-26 11:43:25

Sie müssen Ihre Datetime-Eingabe als Datetime-Picker initialisieren. Ich würde vorschlagen, diese

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

mit

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

Quelle

2017-06-26 11:41:04

function(date){ 
    $scope.date = date; 
    $scope.formatteddate = ...//format your date as string here 
    $scope.$apply(); 
}

und binden Ihre ng-Modell zum formated Datum.

Warum die $ apply()? Da angular watch und reactive nur für Ereignisse, die er verwaltet, aktualisiert werden, werden die binded-Werte aktualisiert, da Ihr datepicker nicht von angular verwaltet wird. Der Eingabewert wird nicht synchronisiert. Du musst ihm sagen, dass sich etwas verändert hat und er muss seine Sachen machen, was der Zweck von $ apply ist.

Quelle

2017-06-26 11:56:43 Walfrat

Angularjs Bind Werte von Datetime Picker

Antwort

Verwandte Themen