I want to modify one of JHipster entity page to use DatePicker. I Have include dependencies over Bower, add js library url to index page. I'm not sure how to include bootstrap css, should I use compass or something else? Or do you maybe know better library for UI.
I added it to my project using WebJars:
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap-datepicker</artifactId>
<version>1.3.1</version>
</dependency>
Then I use class="date" on my date fields and use the following HTML/JS to initialize the field.
<link rel="stylesheet" type="text/css" media="all" href="/webjars/bootstrap-datepicker/1.3.1/css/datepicker.css" />
<script type="text/javascript" src="/webjars/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.date').datepicker({format: "mm/dd/yyyy", weekStart: "0"});
});
</script>
To do it with Bower, I used the following steps:
In bower.json, add bootstrap-datepicker as a dependency. I added it just after bootstrap-sass.
"bootstrap-datepicker": "1.3.1"
Then run:
bower install
In src/main/webapp/index.html, add links to the CSS and JS files:
<head>
...
<link rel="stylesheet" src="bower_components/bootstrap-datepicker/css/datepicker.css">
...
</head>
<script src="bower_components/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
To prove it works, I added a "birthdate" field to register.html. Note the data-provide attribute triggers the popup calendar.
<div class="form-group">
<label for="birthdate">Birth Date</label>
<input type="text" class="form-control" name="birthdate" data-provide="datepicker">
</div>
来源：https://stackoverflow.com/questions/28134960/how-to-add-datepicker-at-jhipster-ui