type="time"
<inputtype="time">input要素のtype属性にtimeを指定することで、入力される値は時間の形式になる。
このインプットをクリックするとタイムピッカーが起動する。
Androidだとこんな感じ。
いろんなとこでタイムピッカーを使いたい
Windowsはさておき、Androidの方は直感的に操作できてけっこう便利。
という訳で<div>とか、なにかしら要素をクリックしたときにタイムピッカーが起動して時刻が入力できるようにしたい。
もちろんJavaScriptで値も取得したい。
作りたいもの
今回は<div>で作ったボタンをクリックするとタイムピッカーが起動して、入力した時刻がボタンに表示される。っていうのをつくる。
機能としては<input>と変わらないけどデザインの自由度は<input>よりも大きいはず。
作成方法
jQueryとかは別として、どうやらタイムピッカーを<input type="time">以外で起動させる方法はなさそう。
最初は、何か要素をクリックしたらJavaScriptで強制的に<input>をクリックさせてタイムピッカーを起動させようとしたもののWindowsの方で失敗。Androidの場合は<input>をタップするとタイムピッカーが起動するけど、Windowsだと時計のアイコンをクリックしないといけないので、そこで躓いた。
いろいろ調べてみると、<input>の中のアイコンは操作できるらしいので、<input>をボタン内部いっぱいにして透明にして隠しておく方針に変更。
アイコンの操作は以下二つのサイトを参考にした。
https://blog.tmyt.jp/entry/2020/06/24/012442
https://itokoba.com/archives/301
ボタンを作成
ボタンとして<div>を設置。<input>は中に入れて見えないように透明に。CSSはボタンぽくサクッと整える。
<divid="button"><inputtype="time"></div>#button{width:400px;height:100px;border-radius:20px;background-color:#2dbed5;box-shadow:05px10px#09262a;}/*クリック時の動き*/#button:active{box-shadow:none;background-color:#2397aa;top:5px;}input{height:100%;width:100%;border:none;opacity:0;}/*どこをクリックしてもタイムピッカーが起動するようにする*/input[type="time"]::-webkit-calendar-picker-indicator{margin:0;padding:0;height:100%;width:100%;}時刻を表示する
ボタンに時刻を表示するために<span>を追加。
JavaScriptで値を受け取って表示させれば完成。
このとき、ボタンや<input>にもCSSを加えて、要素の重なりを指定しておかないと<input>より<span>が上になってしまい、<input>がクリックできなくなるので注意。
以下のサイトを参考にした。
<divid="button"><inputtype="time"><span>00:00</span><!-- 追加 --></div>/*cssに追加*/#button{position:relative;z-index:1;}input{position:absolute;z-index:2;}span{font-size:80px;user-select:none;position:absolute;z-index:1;top:50%;left:50%;transform:translateY(-50%)translateX(-50%);-webkit-transform:translateY(-50%)translateX(-50%);}letinput=document.querySelector('input');lettime=document.querySelector('span');input.addEventListener("input",()=>time.innerHTML=input.value,false);
