html css javascript テキストボックスに手入力とカレンダー入力の2パターンを同時に対応したい

Question

いつもお世話になっております。

現状以下のように記載しているのですが、input date はSafariブラウザでは表示されないことに気づき別の方法を考えています。
jsライブラリのようなものだと、カレンダー入力自体はあるのですが、手入力ができないものばかりで同時対応できていないものがほとんどです。

<input type="date" id="start" name="trip-start"
       value="2018-07-22"
       min="2018-01-01" max="2018-12-31">

Chrome、Firefox、Sfariにテキストボックスの手入力と、カレンダー入力を同時に行う良い方法はないものでしょうか。

参考になるサイトでも構いませんので、適切な方法をご教示いただけますと幸いです。
よろしくお願いいたします。

環境
Amazon Linux release 2 (Karoo)
Rails 5.2.3
Ruby version: 2.6.1

Answer 1

type=date自体、割と新しめの要素で、ブラウザにより実装状況が異なるので、type=textにしたうえでJavaScriptで自作・または既存のJavaScriptプラグイン利用するのを強くすすめます（CSSフレームワークに導入されているものもあります）。

Comments

[lyzmfeqpxs54]

ご回答ありがとうございます。

ご教示いただいた通り、type=textにしjQuery UIのdatepickerを使用して使用を満たしたいと思います。

Answer 2

ブラウザがSafariの場合のみjQuery UIのdatepickerを使うという手もあります。
https://jqueryui.com/datepicker/

Comments

[lyzmfeqpxs54]

ご回答ありがとうございます。

ご教示いただいたjQuery UIのdatepickerで進めていきたいと思います。