datetimepickerブートストラップに近いテキストを追加するには？

Question

$(function() { 
    $('input.month-mode').datetimepicker({ 
     viewMode: 'months', 
     format: 'MM/YYYY', 
     showClose: true, 
     maxDate: current_month, 
    }); 
}); 

私はそれに近いテキストを追加したいと思います。デフォルトでは「X」と表示されますが、変更したいと思います。出来ますか？

Answer 1

あなたは、アイコン用のカスタムCSSクラスを定義するiconsオプションを使用することができ、その後、あなたは、以下のように近いテキストをカスタマイズするCSSルールを記述することができます。

$(function() { 
 
    var current_month = moment(); // just a sample value 
 
    $('#datetimepicker1').datetimepicker({ 
 
     showClose: true, 
 
     viewMode: 'months', 
 
     format: 'MM/YYYY', 
 
     maxDate: current_month, 
 
     icons: { 
 
      close: 'closeText' 
 
     } 
 
    }); 
 
});

.closeText:before { 
 
    content: "Close"; 
 
}

<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>

Answer 2

これを行う1つの方法は、アイコンクラスを使用して新しいクラスを追加し、次にcssを使用していくつかのコンテンツを追加することです。以下のような何か：

$(function() { 
     $('input.month-mode').datetimepicker({ 
      viewMode: 'months', 
      format: 'MM/YYYY', 
      showClose: true, 
      maxDate: current_month, 
      icons: { 
       close: 'textclass1' 
       } 
     }); 
    }); 

のCss：

.textclass1::before { 
    content: "Close"; 
}