如何在JHipster UI上添加DatePicker

dal*_*orn 3 angularjs angular-ui-bootstrap compass-sass jhipster

我想修改JHipster实体页面之一以使用DatePicker.我在Bower上包含依赖项,将js库url添加到索引页面.我不知道如何包括bootstrap css,我应该使用指南针还是别的什么?或者您可能知道更好的UI库.

Mat*_*ble 5

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

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap-datepicker</artifactId>
    <version>1.3.1</version>
</dependency>
Run Code Online (Sandbox Code Playgroud)

然后我在我的日期字段上使用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>
Run Code Online (Sandbox Code Playgroud)

为了用Bower做,我使用了以下步骤:

在bower.json中,添加bootstrap-datepicker作为依赖项.我在bootstrap-sass之后添加了它.

"bootstrap-datepicker": "1.3.1"
Run Code Online (Sandbox Code Playgroud)

然后运行:

bower install
Run Code Online (Sandbox Code Playgroud)

在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>
Run Code Online (Sandbox Code Playgroud)

为证明它有效,我在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>
Run Code Online (Sandbox Code Playgroud)

  • 它有效,谢谢!......我将如何通过选项?...我需要更改日期格式 (2认同)