如何在 JHipster 添加 DatePicker UI

Question

我想修改其中一个 JHipster 实体页面以使用 DatePicker。我已经包含了对 Bower 的依赖，将 js 库 url 添加到索引页面。我不确定如何包含 bootstrap css，我应该使用指南针还是其他东西？或者您是否知道 UI.

更好的库

Answer 1

我使用 WebJars 将它添加到我的项目中：

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap-datepicker</artifactId>
    <version>1.3.1</version>
</dependency>

然后我在日期字段上使用 class="date" 并使用以下 HTML/JS 初始化字段。

<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>

为了使用 Bower 完成此操作，我使用了以下步骤：

在bower.json中，添加bootstrap-datepicker作为依赖。我在 bootstrap-sass.

之后添加了它

"bootstrap-datepicker": "1.3.1"

然后运行:

bower install

在src/main/webapp/index.html中，添加指向CSS和JS文件的链接：

<head>
    ...
    <link rel="stylesheet" src="bower_components/bootstrap-datepicker/css/datepicker.css">
    ...
</head>

<script src="bower_components/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

为了证明它有效，我在 register.html 中添加了一个 "birthdate" 字段。请注意 data-provide 属性会触发弹出式日历。

    <div class="form-group">
        <label for="birthdate">Birth Date</label>
        <input type="text" class="form-control" name="birthdate" data-provide="datepicker">
    </div>

Answer 2

另一种方法是使用 AngularJS Bootstrap 模块，它提供除 Datepicker 之外的其他几个小部件。

bower install angular-bootstrap

完整文档here and here

如何在 JHipster 添加 DatePicker UI

How to add DatePicker at JHipster UI

angularjs

compass-sass

angular-ui-bootstrap

jhipster