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

Can you put a plunker? or give the link to date time picker module you're using. Have to look at the module you're using because from this it is no way to debug or understand what is happening. And if you do not have a specific requirement to use external module for datetime picker. i recommend you to use input type=date only as it works well with angularjs — Parth Acharya
– Parth Acharya, Commented Jun 26, 2017 at 11:15
i m using this datetimepicker http://www.malot.fr/bootstrap-datetimepicker/ I have tried type=date but not working... — Ramachandran A
– Ramachandran A, Commented Jun 26, 2017 at 11:28

Parth Acharya · Accepted Answer · 2017-06-26 12:16:34Z

1

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

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

edited Jun 26, 2017 at 12:16

answered Jun 26, 2017 at 11:43

Parth Acharya

5453 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ankit Agarwal · Accepted Answer · 2017-06-26 11:41:04Z

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

Walfrat · Accepted Answer · 2017-06-26 11:56:43Z

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.

Collectives™ on Stack Overflow

Angularjs Bind values from Datetime Picker

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related