How to add DatePicker at JHipster UI

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.

回答1:

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>

回答2:

An alternative to this is to use AngularJS Bootstrap module which provides several other widgets apart from Datepicker.