Angular get date from datetimepicker

Question

I'm trying to get the date from a bootstrap datetimepicker but when I put a ng-model on the input field it's not working?

html

<!-- EndDate -->
<div class="form-group">
    <label for="dtp_enddate">Eind datum:</label>
    <div class="input-group date" id="dtp_endDate">
        <input type="text" class="form-control" name="EndDate" ng-model="employeeCtrl.employee.EndDate" required="required" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
    </div>
</div>

jquery

   $(function() {
        $('#dtp_endDate').datetimepicker({
            useCurrent: true,
            collapse: true,
            format: 'YYYY-MM-D',
            locale: 'nl',
            allowInputToggle: true
        });
    });

How could I accomplish that?

could you create a plnkr http://plnkr.co or or codepen http://codepen.io — dreamweiver, Apr 11 '16 at 12:52
also try avoiding usage of any 3rd party libraries along with angularjs, like in your case usage of jquery. **Whatever you can do with Jquery is possible with angularjs as well.** more info for your reference :http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background — dreamweiver, Apr 11 '16 at 12:57

score 2 · Answer 1 · answered Apr 11 '16 at 12:56

2

It is not the best practice to combine angularJS with jQuery plugins. There is a plenty of plugins converted to angularJS directives, which you could try to use. E.g. https://github.com/dalelotts/angular-bootstrap-datetimepicker

answered Apr 11 '16 at 12:56

Igor Bukin

976
7
14

score 1 · Accepted Answer · answered Apr 11 '16 at 12:55

1

If you need date-time-picker in a single component you can use http://dalelotts.github.io/angular-bootstrap-datetimepicker/ or you can use 2 components (datepicker and timepicker) from Angular Bootstrap

answered Apr 11 '16 at 12:55

Alexander Elgin

6,796
4
40
50

score 1 · Answer 3 · answered Apr 11 '16 at 12:55

for example

<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" />
in this example date is binding to dt (ng-model="dt")

you can get data by $scope.dt if you want to watch the date change you can do

$scope.$watch('dt',function(val){
   //to do       
   console.log(val)
})

score 0 · Answer 4 · answered Apr 11 '16 at 12:59

0

Include id ="dtp_endDate" inside input tag

<input type="text" id="dtp_endDate" class="form-control" name="EndDate" ng-model="employeeCtrl.employee.EndDate" required="required" />

answered Apr 11 '16 at 12:59

Vinit Desai

520
1
4
20

Angular get date from datetimepicker

4 Answers4