CODEWITHSUNDEEP
javascripthtmlangularjsdatapicker
Dorin
Dorin

Reputation: 2266

Datapicker binding with angular and bootstrap

I tried to make an datapicker and a time picker for a website, I found the solution on this site. I use angular and I don't know how can I do to take the value from the input. I tried with ng-model, but didn't work.

Here is the html code:

<div class="container">
<div class="row">
    <div class='col-sm-6'>
        <input type='text' class="form-control" id='datetimepicker4' />
    </div>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker4').datetimepicker();
        });
    </script>
</div>

How can I solve this issue?

Thanks.

Upvotes: 0

Views: 110

Answers (2)

Danny
Danny

Reputation: 624

You should use a directive for DOM manipulation.

app.directive('datetimepicker', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
      $(element).datetimepicker();
    }
  }
});

Upvotes: 0

Alex Johnson
Alex Johnson

Reputation: 1574

I'd recommend looking into Bootstrap UI. It's a collection of Boostrap UI elements, converted into Angular.js directives. You'll find that using Angular.js Directives will have much better data-binding and support and then using the equivalent jQuery/Javascript plugins.

One of the Bootstrap UI components included in the link is the 'ui.bootstrap.datepicker Directive'. To give you an example of what this directive looks like, and what an Angular-friendly datepicker looks like:

<uib-datepicker ng-model="date" min-date="minDate"></uib-datepicker>

Upvotes: 1

Related Questions