カレンダー

<div class="form-group">
  <label><span class="label-text">ラベル</span></label>
  <div class="input-with-icon">
    <input type="text" class="form-control" id="datepicker起動用のid" value="" placeholder="入力または選択"/>
  </div>
</div>

datepickerを起動するためのjsを追加します。同じオプション設定で複数のカレンダー入力を起動する場合には、idのかわりにclassを使用します。

$('#カレンダーのinput要素に設定したid').datepicker({
  showOn: 'both' // カレンダーアイコン表示（ABUI推奨）
});

datepicker起動時に、オプション指定をすることにより、プリセットを変更することが可能です。ABUIではカレンダーアイコンを表示する事を推奨します。その他、用意されているオプションや設定方法に関する詳しい情報は、jQuery UIのリソースを参照してください。

月・日の10の位を0で埋めない場合

$('#datepicker起動用のid').datepicker({
  dateFormat: 'yy/m/d'
});

フィールド内に曜日を表示する場合

$('#datepicker起動用のid').datepicker({
  dateFormat: 'yy/mm/dd（D）'
});

カレンダー内に前後の月の日も表示する場合

$('#datepicker起動用のid').datepicker({
  showOtherMonths: true,
  selectOtherMonths: true
});

年・月をプルダウンにする場合

$('#datepicker起動用のid').datepicker({
  changeMonth: true,
  changeYear: true
});

複数月を表示する場合

$('#datepicker起動用のid').datepicker({
  numberOfMonths: 3
});

日ではなく週単位で選択の場合

$('#datepicker起動用のid').datepicker({
  showWeek: true
});