input type=”date”で、どこをクリックしてもカレンダーが表示されるようにする。

ABOUTこの記事をかいた人

大学でプログラミングを学ぶ→経営に興味を持ち勉強→月2桁は稼ぐフリーランスに→プログラミング初心者向けのオンラインメンタリング Udemy講師もやってます→u0u1.net/MGfz

こんにちは。今回はinputタグについてです。最近仕事で出くわしたので紹介します。(ブラウザによっては動作しない可能性があります。Chrome/Firefoxで動作確認)

input type=”date”は、次の画像のように日付を入力することができます。

日付を直接入力、矢印キーもしくは要素内のボタンで選択、そして右端の矢印をクリックでカレンダーから選択できます。クリックしたものに応じて動作が変わりますが、どこをクリックしてもカレンダーを表示します。
方法としては、右端のカレンダーを表示するボタンを全体に広げることによって機能を実現します。

目次

必要ないボタン類を非表示に

まずはいらないボタンを消しましょう。それぞれのボタンにスタイルを適用するには以下のような擬似セレクタを使います。

表示を消すにはdisplay: none;ではなく-webkit-appearance: none;を使います。

これで2つのボタンが消えます。

右端の黒矢印ボタンを全体に広げる

次に右端のボタンを広げます。擬似セレクタは-webkit-calendar-picker-indicatorです。
サイズを縦横100%にし、positionプロパティを使って左端を基準に配置し直します。

このままだと矢印が残ってしまう(下記画像)ので、最後にopacity: 0;にして完全に透過します。

これで完成です!入力欄のどこをクリックしてもカレンダーが表示されるようになりました。

最後に

いかがでしたでしょうか?もしカレンダー表示に不便を感じていたらお試しください。

この記事を読んだ人へのおすすめ記事

チェックボックスとラジオボタンのデザインをCSSで変更する方法を超絶優しく解説する

2019年7月18日

最速でフリーのフロントエンドエンジニアになるなら、Javascriptを学ぶな

2019年6月24日

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください