CODEWITHSUNDEEP
javascriptjqueryangularjstwitter-bootstrap
Jamie
Jamie

Reputation: 10886

Angular get date from datetimepicker

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?

Upvotes: 2

Views: 1445

Answers (4)

Vinit Desai
Vinit Desai

Reputation: 520

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" />

Upvotes: 0

Igor Bukin
Igor Bukin

Reputation: 1006

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

Upvotes: 2

Nicholas
Nicholas

Reputation: 3784

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

Upvotes: 1

Alexander Elgin
Alexander Elgin

Reputation: 6956

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

Upvotes: 1

Related Questions