引導Glyphicons的DateTimePicker改變圖標

我使用引導的DateTimePicker https://eonasdan.github.io/bootstrap-datetimepicker/引導Glyphicons的DateTimePicker改變圖標

正如文件中提到我能成功使用下面的代碼改變上，下箭頭。

$('#datetimepicker7').datetimepicker({ 
    sideBySide: true, 
    icons: { 
     up: "fa fa-chevron-circle-up", 
     down: "fa fa-chevron-circle-down", 
    } 
});

我可以知道如何更改日曆的左右圖標嗎？爲了便於理解，我突出顯示了圖標在下圖中的變化。

Bootstrap Glyphicons image

任何幫助將高度讚賞。

來源

2016-07-22 user3276214

爲了改變，你只需要在下面的代碼來改變左，右圖標：

icons: { 
     time: 'glyphicon glyphicon-time', 
     date: 'glyphicon glyphicon-calendar', 
     up: 'glyphicon glyphicon-chevron-up', 
     down: 'glyphicon glyphicon-chevron-down', 
     //previous: 'glyphicon glyphicon-chevron-left', 
     previous: 'glyphicon glyphicon-backward', 
     next: 'glyphicon glyphicon-chevron-right', 
     today: 'glyphicon glyphicon-screenshot', 
     clear: 'glyphicon glyphicon-trash', 
     close: 'glyphicon glyphicon-remove' 
    },

默認情況下，行，我有評論說，圖標顯示，所以如果u需要更改圖標，你只需簡單地設置要顯示的路徑或任何圖標即可。

您可以參考以下鏈接： https://eonasdan.github.io/bootstrap-datetimepicker/Options/

來源

2016-07-22 07:09:58

你只需要在配置您的icons對象插入previous和next鍵作爲docs說明。

$('#datetimepicker7').datetimepicker({ 
 
    sideBySide: true, 
 
    icons: { 
 
     up: "fa fa-chevron-circle-up", 
 
     down: "fa fa-chevron-circle-down", 
 
     next: 'fa fa-chevron-circle-right', 
 
     previous: 'fa fa-chevron-circle-left' 
 
    } 
 
});

<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.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.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.13.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.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<div class="form-group"> 
 
    <div class="input-group date" id="datetimepicker7"> 
 
    <input type="text" class="form-control" /> 
 
    <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
    </div> 
 
</div>

來源

2016-07-22 07:10:59 VincenzoC

引導Glyphicons的DateTimePicker改變圖標

回答

相關問題