Michał Szydłowski Michał Szydłowski - 5 months ago 12
Javascript Question

How to use the bootstrap datepicker?

I'm fairly new to Angular.js (or to web programming in general). I got a pretty basic problem - I'd like to include a date picker in my application. For this purpose, I try to set up the bootstrap datepicker:

https://bootstrap-datepicker.readthedocs.org/en/latest/#

I have the jQuery and Bootstrap dependencies included:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/blog.css">
<script src="angular-datepicker.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/blogController.js"></script>


I don't really understand, how am I supposed to use it from now on? I can include some input field in my HTML template, but how exactly do I call the script that calls the date picker widget?

Answer

Add an id or a class to your input field and use that as a selector once you call the datepicker.

In your HTML:

<input type="text" class="datepicker">

In your JS:

$('.datepicker').datepicker();
Comments