web-dev-qa-db-ja.com

Bootstrap datepickerポップアップがハイライトされた現在の日付を表示しない

Bootstrap Bootstrap-datepicker APIを使用してdatepickerを使用しています。ボタンをクリックすると、カレンダー/日付ピッカーポップアップが表示されますが、APIに示すように、現在の日付がBlueフォントとしてマークされませんでした例。

以下のコードを使用しています：

   <body>
   <div class="input-group date col-md-5" id="datepicker" data-date-format="dd-mm-yyyy">
        <input class="form-control" size="56" type="text" value="" readonly>
        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
   </div>

    <script src="js/bootstrap-datepicker.js"></script>

    <script type="text/javascript">
        $('#datepicker').datepicker();
    </script>
    </body>

カレンダー/日付ピッカーのポップアップが表示されますが、APIの例に示すように現在の日付が青くハイライト表示されず、マウスカーソルもポインターではありません。

この問題について私を助けてください

javascriptjquerycsstwitter-bootstrapdatepicker
14
Adeel Asghar

これを使用している場合： https://github.com/eternicode/bootstrap-datepicker カレンダーを開始するときに、次のようなオプションを指定する必要があります

   $('#sandbox-container input').datepicker({ 
               todayHighlight: true
   });
27
Gokhan
$('#datepicker').datepicker({
    format: 'dd-mm-yyyy',
    todayHighlight: true
});

これが JSFiddle です

5
RaviRokkam

Bootstrap Datepicker は、カレンダーウィジェットのスタイル設定を独自のCSSに依存します。

依存関係をすばやくインポートするには、 cdnjs からバージョンを選択し（.css拡張子を選択してください）、次のようにHTMLにインポートします。

<head>
  <meta charset="UTF-8">
  <!-- ... -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.css" />
</head>
1
Matheus Santana

同じ問題が発生していたので、可能な解決策のリストに追加するだけです。 todayクラスは、以下を使用して現在の日に割り当てられていませんでした：

$('.datepicker').datepicker({
    'format': 'mm/dd/yyyy',
    'todayHighlight': true
});

例のhtmlには、dateのクラスのみがあります。

<div class="input-group date">
    <input type="text" class="form-control" value="12-02-2012">
        <div class="input-group-addon">
            <span class="glyphicon glyphicon-th"></span>
       </div>
</div>

私の場合、datepickerクラスがありませんでした。これを要素に追加すると、すべてが正常に動作します。

する必要があります：

<div class="input-group date datepicker">
    <input type="text" class="form-control" value="12-02-2012">
        <div class="input-group-addon">
            <span class="glyphicon glyphicon-th"></span>
       </div>
</div>
0
Damon

別のオプションは、この属性をdatepicker入力要素に追加することです：

today-highlight="true"

0
e-shfiyut