やりたかったこと

モバイル向けの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は注釈にて記載いたします。