dal*_*orn 3 angularjs angular-ui-bootstrap compass-sass jhipster
我想修改JHipster实体页面之一以使用DatePicker.我在Bower上包含依赖项,将js库url添加到索引页面.我不知道如何包括bootstrap css,我应该使用指南针还是别的什么?或者您可能知道更好的UI库.
我使用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)
| 归档时间: |
|
| 查看次数: |
2805 次 |
| 最近记录: |