1

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

어떤 도움

은 높게 평가 될 것이다. 그냥 아래의 코드를 변경할 필요가 왼쪽과 오른쪽 아이콘을 변경하려면

답변

5

는 :

기본 라인으로
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는 그 아이콘을 변경해야하는 경우 아이콘이 너무 표시되는지 댓글을 달았하는 당신 표시 할 경로 나 아이콘을 설정하기 만하면됩니다.

당신은 아래 링크를 참조 할 수 있습니다 : 당신은 단지 docs에 명시된 구성에 icons 객체에 previousnext 키를 삽입해야 https://eonasdan.github.io/bootstrap-datetimepicker/Options/

2

.

$('#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>

관련 문제