BootstrapでDatetimePickerを使う時のモバイルキーボード非表示

#やりたかったこと
モバイル向けのWebアプリで、アイコンをタップするとカレンダーや時刻の入力を直感的に入力できるようにしたい。
※WebアプリはGAS、ブラウザはiOS版Chromeにて動作確認しています。

#実装と問題点
Bootstrap4＋DatetimePicker（Tempus Dominus Bootstrap 4）で実装¹。
動作はするものの、折角追加したカレンダーがモバイルのタッチキーボードで隠れてしまう。見栄え、操作性の両面で非表示にしたい。

##inputをreadonlyに
inputをreadonlyにすると、フォーカスを抑えられるのでタッチキーボードは表示されなくなった。

<input type="text" class="datetimepicker-input form-control" data-target="#datetimepicker1" readonly="readonly" />`

と思ったら、DatetimePickerのイベントまで発火しなくなっていただけだった。

##DatetimePickerのOptions
公式ドキュメント² によると、対象のinputがreadonlyである場合、OptionsにignoreReadonlyを設定してやる必要があるとのこと。フォーマットなどと一緒に ignoreReadonly: true を定義します。

$(function(){
  $('#datetimepicker1').datetimepicker({
    format: 'YYYY/MM/DD (ddd)',
    locale: 'ja',
    ignoreReadonly: true
  });
});

無事、タッチキーボードが表示されなくなりました。

##readonly部品の背景色変更
当初のデザイン通りにしたいので、inputの背景色を白に戻します。
Bootstrapで定義されている.form-control[readonly]に対して、background-colorを上書きします。

.form-control[readonly]{
  background-color: #fff;
}

※ここでbackground: #fff;と記述してしまうと、表示結果が変わります。Bootstrapが.form-controlに定義していたbackgroundのプロパティが全てリセットされた上でbackground-color: #fff;だけが再定義されることになる（と思う）ので、注意してください。

参考にさせて頂いたURLは注釈にて記載いたします。

1. Bootstrap 4でDatetimePickerを使いたい ↩

2. Tempus Dominus Bootstrap 4 公式 ↩