Implementing bootstrap-datepicker in AngularJs

Question

I am starting with AngularJs.

I need to implement "N" Calendars in a form. I am using bootstrap-datepicker (https://eonasdan.github.io/bootstrap-datetimepicker/)

It is working fine if I specify the inputTextId for example

Html:

<input id='datetimepicker2' data-ng-model="vm.search.origin.from" data-ng-click="vm.showCalendar(this)" class="form-control" type="text" placeholder="MM/DD HH:MM">

<input data-ng-model="vm.search.origin.to" data-ng-click="vm.showCalendar(this)" class="form-control" type="text" placeholder="MM/DD HH:MM">

Controller:

function showCalendar(obj)
{
    $("#datetimepicker2").datetimepicker();
}

It works fine for one inputText, and if I want to implement it in more than one I have to specify every name and function. I want to pass the reference and use:

reference.datepicker(); or something like that in order to create just one function. Is that possible?

why r u using jquery $("#datetimepicker2"). in angular Project , its not a good Practice , u have to use angular directives ,ref jsfiddle.net/cletourneau/kGGCZ or plnkr.co/edit/KsK5F1M2zrv0SDTwRM4N?p=preview — Gayathri Mohan
– Gayathri Mohan, Commented Jul 27, 2016 at 2:43

austinthedeveloper · Accepted Answer · 2016-07-27 02:41:43Z

1

Sounds like you want a directive. Take this as an example:

app.directive('timePicker', function() {
    return {
        link: function($scope, elem, attrs){
          $(elem).datetimepicker();
        }
    }
});

You would then just add time-picker to the inputs you want.

answered Jul 27, 2016 at 2:41

austinthedeveloper

2,63923 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

Implementing bootstrap-datepicker in AngularJs

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related