Bootstrap DatepickerはBootstrapのフレームワークを利用した、日付入力補助プラグインです。 ユーザーがカレンダーから直感的に日付を選ぶことができる、 日付を入力する際のUIとして便利なプラグインです。 今回はよく使われるサンプルとその説明を用意しました。
目次
サンプルデモページ
サンプルページを作成しました。
ブログ記事内だと、表示が崩れるので、サンプルページで動作の確認をしてください。
セッティング方法
導入方法は、 プラグインをこのサイトからダウンロードしてください。https://github.com/uxsolutions/bootstrap-datepicker
プラグインのオプション設定方法は、このページで確認できます。オンラインデモ
セッティング方法は、簡単。jquery、bootstrap、font-awesome、Bootstrap Datepickerのプラグインを読み込ませましょう。日本語化する場合は、bootstrap-datepicker.ja.min.jsを直接読み込ませます。
<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript" language="javascript"></script> <script src="../common/js/bootstrap.js"></script> <link rel="stylesheet" href="../common/css/bootstrap.css"> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="bootstrap-datepicker/css/bootstrap-datepicker.min.css"> <script type="text/javascript" src="bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script> <script type="text/javascript" src="bootstrap-datepicker/locales/bootstrap-datepicker.ja.min.js"></script>
Default
一番よく使われると思われる例です。インプットボックス横にカレンダーアイコンを表示させ、言語を日本語に変換、データ入力形式を「年月日」にした例です。
HTML
<div class="form-group" id="datepicker-default">
<label class="col-sm-3 control-label">Default</label>
<div class="col-sm-9 form-inline">
<div class="input-group date">
<input type="text" class="form-control" value="20170621">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
</div>
JS
<script>
$(function(){
//Default
$('#datepicker-default .date').datepicker({
format: "yyyy年mm月dd日",
language: 'ja'
});
});
</script>
Range
日付のFrom-Toの選択ができる例です。予約開始日と終了日を設定できます。宿泊予約システムなど、期間を設定する場合のサービスに役立ちます。
HTML
<div class="form-group" id="datepicker-daterange">
<label class="col-sm-3 control-label">Range</label>
<div class="col-sm-9 form-inline">
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
</div>
</div>
JS
<script>
$(function(){
$('#datepicker-daterange .input-daterange').datepicker({
language: 'ja',
format: "yyyy年mm月dd日"
});
});
</script>
Start View
カレンダーの”日”ではなく”月”や”年”の選択から開始可能になります。たとえば「1 / year」にすると、月選択の状態でカレンダー画面が起動します。
HTML
<div class="form-group" id="datepicker-startview">
<label class="col-sm-3 control-label">Start view</label>
<div class="col-sm-9 form-inline">
<div class="input-group date">
<input type="text" class="form-control">
<span class="input-group-addon">
<i class="glyphicon glyphicon-th"></i>
</span>
</div>
</div>
</div>
JS
<script>
$(function(){
$('#datepicker-startview .date').datepicker({
startView: 1,
language: "ja"
});
});
</script>
Embedded / inline
画面にインラインでカレンダーを表示させることもできます。カレンダーの下にインプットボックスを設置すれば、選択した日付がinputに代入されます。
HTML
<div class="form-group" id="datepicker-inline">
<label class="col-sm-3 control-label">Embedded / inline</label>
<div class="col-sm-9 form-inline">
<div class="in-line" data-date="2010年10月26日"></div>
<input type="text" id="my_hidden_input">
</div>
</div>
JS
<script>
$(function(){
$('#datepicker-inline .in-line').datepicker({
format: "yyyy年mm月dd日",
language: "ja"
});
$('.in-line').on('changeDate', function() {
$('#my_hidden_input').val(
$('.in-line').datepicker('getFormattedDate')
);
});
});
</script>
“簡単！カレンダーから日付入力 Bootstrap Datepicker の使い方と解説” への1件のフィードバック
コメントは停止中です。