Angularjs Bind values from Datetime Picker
Question
I can't display datetime from DateTime picker. This is My HTML COde :
<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>
If i am typing some values in this input its showing that values but when i am picking date from datetime picker does not showing that date or time.
I want to show the time in {{reporting_time}} ... Please help me.. Thanks
3 answers
solution1
1 ACCPTED 2017-06-26 11:43:25
This function should get you going, As the module is in jquery,it may be working outside of angular scope you may not be getting it's value in the controller so you have to manually set it with help of jquery
$('.form_datetime')
.datetimepicker()
.on('changeDate', function(ev){
$scope.reporting_time = ev.date.valueOf();
console.log($scope.reporting_time);
});
Also input type date works perfectly for me in this plunker
solution2
0 2017-06-26 11:41:04
You need to initialize your datetime input as a datetime picker. I would suggest to replace this
$('.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');
}
});
with
$('#reportingtime').datetimepicker({
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1,
onSelect: function(date){
angular.element($('#reportingtime')).triggerHandler('input');
}
});
solution3
0 2017-06-26 11:56:43
function(date){
$scope.date = date;
$scope.formatteddate = ...//format your date as string here
$scope.$apply();
}
And bind your ng-model to the formated date.
Why the $apply() ? Because angular watch and react only for events that he manages and so will refresh the binded values, since your datepicker is not managed by angular, input value will not be synced. You need to tell him that something changed and he needs to do its stuff, which is the purpose of $apply.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.