如何在JHipster UI添加的DatePicker [英] How to add DatePicker at JHipster UI
问题描述
我想修改JHipster实体页面中的一个使用的DatePicker 。我有包括超过依赖性鲍尔，加上JS库网址索引页。我不知道如何将引导CSS，我应该用指南针或其他什么东西？
或者你也许知道更好的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.
推荐答案
我使用WebJars把它添加到我的项目：
I added it to my project using WebJars:
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap-datepicker</artifactId>
<version>1.3.1</version>
</dependency>
然后我用我的日期字段级=日期，并使用下面的HTML / JS来初始化域。
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:
在bower.json，加引导，日期选择器作为一个依赖。我只是举 - 萨斯之后添加它。
In bower.json, add bootstrap-datepicker as a dependency. I added it just after bootstrap-sass.
"bootstrap-datepicker": "1.3.1"
然后运行：
bower install
在钢骨混凝土/主/ web应用/ index.html的，添加链接的CSS和JS文件：
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>
要证明它的作品，我添加了一个生日字段register.html。注意：在数据提供属性触发弹出日历。
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屋！
