如何在 JHipster UI 中添加 DatePicker答案

【问题标题】：How to add DatePicker at JHipster UI如何在 JHipster UI 中添加 DatePicker
【发布时间】：2023-03-15 15:15:02
【问题描述】：

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

【问题讨论】：

标签： angularjs compass-sass angular-ui-bootstrap jhipster

【解决方案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 中添加了一个“生日”字段。注意 data-provide 属性会触发弹出日历。

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

【讨论】：

这可行，但 WebJars 不是标准 JHipster 堆栈的一部分，这是一个框架。我认为那里的现有堆栈有一些更简单的东西。
我在原始答案中添加了凉亭的说明。希望这会有所帮助！
它有效，谢谢！ ...我将如何传递选项？ ...我需要更改日期格式

【解决方案2】：

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

bower install angular-bootstrap

完整文档 here 和 here

【讨论】：