ブートストラップdatepicker

Question

私は、ドロップダウンの日付ピッカーで選択された日付を強調表示するためにブートストラップdatepickerを取得しようとしています。それは現在これをやっていない..私は何が足りないのですか？

<div class="input-append date" id="datepicker" data-date="dateValue: Customer.DateOfBirth" data-date-format="dd-mm-yyyy"> 
    <input class="span2" size="16" type="text" data-bind="value: Customer.DateOfBirth" readonly="readonly" /> 
    <span class="add-on"><i class="icon-calendar"></i></span> 
</div> 

Answer 1

あなたはjavascript $('#datepicker').datepicker();​経由日付ピッカーを呼び出す必要があります。

uは、ブートストラップ・datepicker.js &ブートストラップを持っていたために持っているだけで、このためdatepicker.css

Code Example/Result

更新
• bootstrap.css

Answer 2

<linkrel="stylesheet"href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/> 
<script src="js/bootstrap.min.js" type="text/javascript"></script> 

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="js/bootstrap-datepicker.js" type="text/javascript"></script> 
<script src="js/bootstrap-datepicker.min.js" type="text/javascript"></script> 


<script> 

    $(document).ready(function() { 
     $('#datePicker') 
      .datepicker({ 
       format: 'mm/dd/yyyy' 
      }) 
      .on('changeDate', function(e) { 
       // Revalidate the date field 
       $('#eventForm').formValidation('revalidateField', 'date'); 
      }); 

     $('#eventForm').formValidation({ 
      framework: 'bootstrap', 
      icon: { 
       valid: 'glyphicon glyphicon-ok', 
       invalid: 'glyphicon glyphicon-remove', 
       validating: 'glyphicon glyphicon-refresh' 
      }, 
      fields: { 
       name: { 
        validators: { 
         notEmpty: { 
          message: 'The name is required' 
         } 
        } 
       }, 
       date: { 
        validators: { 
         notEmpty: { 
          message: 'The date is required' 
         }, 
         date: { 
          format: 'MM/DD/YYYY', 
          message: 'The date is not a valid' 
         } 
        } 
       } 
      } 
     }); 
    }); 

</script> 

<div class="form-group"> 
    <div class="date"> 
     <div class="input-group input-append date" id="datePicker"> 
      <input type="text" class="form-control" name="date" /> 
      <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span> 
     </div> 
    </div> 
</div> 

が含まれ、選択した日付をhightlightするには-datepicker.min.js files.Uは$（ '＃datePicke r '）。datepicker（）;メソッドがありますが、独自のデフォルト設定があります。ですから、スクリプトタグでは、私はdatepicker（）メソッドで自分のカスタマイズを適用しました。 次にbodyタグに定義されているdivタグにdatepicker入力コンポーネントを作成しますが、私はそれを簡単に作ります。

質問の解決策はスパンタグです。 datepicker入力コンポーネントのアイコンを適用するのはどれですか。私は、グリフィングリフィンカレンダーであるカレンダーアイコンを選択しました。しかし、文字入力のアイコンをグループ化するために使用されるspanタグにclass = "input-group-addon add-on"と書くことで、アイコンを埋め込むつもりであることをブラウザに伝える必要があります。