bootstrap-datepickerを使うとカレンダーから日付を入力できるようになります。
1.導入
以下のサイトからダウンロードする。
bootstrap-datepicker
2.読み込み
ダウンロードしたCSSとJavascriptを読み込みます。
|
1 2 |
<link rel="stylesheet" type="text/css" href=".../css/bootstrap-datepicker.min.css"> <script type="text/javascript" src=".../js/bootstrap-datepicker.min.js"></script> |
日本語のカレンダーを表示させる場合はこちら↓
|
1 2 3 |
<link rel="stylesheet" type="text/css" href=".../css/bootstrap-datepicker.min.css"> <script type="text/javascript" src=".../js/bootstrap-datepicker.min.js"></script> <script type="text/javascript" src=".../locales/bootstrap-datepicker.ja.min.js"></script> |
3.実装
HTML
|
1 2 3 |
<div class="form-group"> <input type="text" class="form-control" id="startdate"> </div> |
Javascript
|
1 |
$('#startdate').datepicker(); |
日本語のカレンダーを表示させる場合はこちら↓
|
1 2 3 |
$('#startdate').datepicker({ language: 'ja' }); |
以下オプションです。
- format
- dd/mm/yyyyなどフォーマットを指定
- weekStart
- デフォルト日曜始まり、1で月曜始まり
- language
- jaで日本語化
- daysOfWeekDisabled
- [‘0’, ‘1’]で日曜と月曜を無効