0
我使用基於引導[https://eonasdan.github.io/bootstrap-datetimepicker/]日期時間選擇器庫。
一切工作正常,我正在尋找改變一個小東西。屏幕左下方的小時鐘圖形並不太直觀,可以隨時挑選。
有沒有一種方法可以在時鐘圖形中添加一些文本,如「選擇時間」?
我使用基於引導[https://eonasdan.github.io/bootstrap-datetimepicker/]日期時間選擇器庫。
一切工作正常,我正在尋找改變一個小東西。屏幕左下方的小時鐘圖形並不太直觀,可以隨時挑選。
有沒有一種方法可以在時鐘圖形中添加一些文本,如「選擇時間」?
您可以使用icons選項來定義自定義CSS類的圖標,然後你可以寫一個CSS規則來定製「挑時間」按鈕,如下圖所示:
$(function() {
$('#datetimepicker1').datetimepicker({
icons: {
time: 'glyphicon timeWithText'
}
});
});
.timeWithText:before{
content: "\e023 pick time";
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
它作品,但文字在單詞(和圖標)之間有太多空間。有什麼可以解決這個問題嗎? –