bootstrap-datepicker の UI がスマホ表示だと微妙
2018-05-11bootstrap-datepicker を使うと、bootstrap を使用したサイトに良い感じの日付入力フォームを簡単に作ることができます。 ただ、そのまま利用したときに、 スマホ表示での UI が微妙 なのでその対応方法です。
フォームの書き方については、下記サイトを参考にしています。
簡単！カレンダーから日付入力 Bootstrap Datepicker の使い方と解説
一般的な書き方
フォーム部分
<div class="form-group">
<label class="col-sm-3 control-label">日付</label>
<div class="col-sm-9 form-inline">
<div class="input-group date">
<input type="text" class="form-control" placeholder="2018-05-11">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
</div>
js部分
$(document).ready(function(){
$('.date').datepicker({
todayBtn: 'linked',
format: "yyyy-mm-dd",
autoclose: true,
todayHighlight: true,
daysOfWeekHighlighted: "0,6",
});
});
この書き方では、
- テキストエリアにフォーカスがあたった時
- カレンダーアイコンをクリックした時
に、日付選択カレンダーが表示されます。 PC だとこれでも特に問題はないのですが、スマホ (今回の対象は iOS Safari) で操作する際に使いにくいです。 具体的には、テキストエリアにフォーカスを当てた時に、日付選択カレンダーが表示され、さらに端末のキーボードも表示されます。これが使いにくい理由です。
そこで、テキストエリアにフォーカス時には日付選択カレンダーは表示せず、カレンダーアイコンを押した時のみ日付選択カレンダーを表示する を実現したいわけです。
対応後
フォーム部分
<div class="form-group">
<label class="col-sm-3 control-label">日付</label>
<div class="col-sm-9 form-inline">
<div class="input-group">
<input type="text" class="form-control" name="real_date" placeholder="2018-05-11">
<div class="input-group-addon">
<i class="fa fa-calendar date">
<input type="hidden" class="dummy-date" data-real="real_date">
</i>
</div>
</div>
</div>
</div>
js部分
$(document).ready(function(){
$('.date').datepicker({
todayBtn: 'linked',
format: "yyyy-mm-dd",
autoclose: true,
todayHighlight: true,
daysOfWeekHighlighted: "0,6",
});
$('.dummy-date').change(function(){
$(`input[name=${$(this).data('real')}]`).val($(this).val());
});
});
カレンダーから選択された場合は一旦 hidden に値を逃して、そのイベントを拾ってテキストエリアに値をセットしています。
デモ
ここ で上の両方を試せます。 スマホで表示してもらうと操作性の違いがわかりやすいと思います。
comments powered by Disqus