如何在 JHipster UI 中添加 DatePicker [英] How to add DatePicker at JHipster UI
问题描述
我想修改 JHipster 实体页面之一以使用 DatePicker.我已经包含对 Bower 的依赖项，将 js 库 url 添加到索引页面.我不确定如何包含 bootstrap css，我应该使用指南针还是其他东西?或者你知道更好的 UI 库.
我使用 WebJars 将它添加到我的项目中:
<依赖><groupId>org.webjars</groupId><artifactId>bootstrap-datepicker</artifactId><version>1.3.1</version></依赖>然后我在日期字段上使用 class="date" 并使用以下 HTML/JS 来初始化字段.
<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"});});<小时>
为了使用 Bower，我使用了以下步骤:
在 bower.json 中，添加 bootstrap-datepicker 作为依赖项.我在 bootstrap-sass 之后添加了它.
"bootstrap-datepicker": "1.3.1"然后运行:
bower 安装在 src/main/webapp/index.html 中，添加 CSS 和 JS 文件的链接:
...<link rel="stylesheet" src="bower_components/bootstrap-datepicker/css/datepicker.css">...<script src="bower_components/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>为了证明它有效，我在 register.html 中添加了一个生日"字段.请注意 data-provide 属性会触发弹出式日历.
<label for="birthdate">出生日期</label><input type="text" class="form-control" name="birthdate" data-provide="datepicker">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>
这篇关于如何在 JHipster UI 中添加 DatePicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
