![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1JdADY-MuUCCo9DflyAyWwJnSGpslL-tzPIUofKh2Uv4AUI_Ly13Bt24O50LbtVkGgFBU8ERdevQG9bZCcTLtWkW12IBlzxiu5xMN5dfBS4eh-QbqUnIrm8qW8Vtn3UGaBNbkOSib0cY9/s320/Fotolia_37938071_XS.jpg)
オフィス狛 技術部です。
一昔前は、Webシステムのカレンダー入力フォームと言えば、jQuery UI Datepicker が定番でした。
HTML5が使われ始めてからは、新たに追加された input要素のdate型(<input type="date">)を使う事が増えてきました。
ただ、ブラウザによって表示が微妙に異なるので、毎度問い合わせが発生します。 今回、備忘録も兼ねて、各ブラウザでどう表示されるかまとめてみました。
※(2019/07/03 修正:画像リンクがきれていたので、画像リンクを更新しました。このタイミングで、全ブラウザ最新の状態でキャプチャを撮り直しています。)
※ (2021/06/23 修正:Safariでの<input type="date">の表示が変更されていましたので、キャプチャと説明を更新しました。)
・初期値無し(<input type="date" value="">)
Internet Explorer 11
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjlPlL9sF9vs3e-5gT7mOs3TYIjIAC61AX1vGfNszWwd5ah405ReUpy1Bs_gcqUbGw5pFx8RsmDKAFe2XBBhsGM_E8rgKq3Cbs09ubxxLqdGLJJibo5kBkUyktEprNtr1GPzvsn6gFfxyV/s320/1.%25E5%2588%259D%25E6%259C%259F%25E5%2580%25A4%25E3%2581%25AA%25E3%2581%2597IE11.png)
Microsoft Edge
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuZIMtXtjK_jAwlcfzY_PJQTA7Xwp-d5G0Hd_9CmSufosa_O9CvlB2U8qwh_aScaKth2HvEdc6E2W0Xm3EpeEoKkPsFx0Sz7aWp9-UtC2UKUIVfzxsAMuMHJKdZndM_4MCqA4yVJFKX9uk/s320/2.%25E5%2588%259D%25E6%259C%259F%25E5%2580%25A4%25E3%2581%25AA%25E3%2581%2597Edge.png)
ドラム式のUIで、日付を選択します。
Google Chrome(Windows)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnzse3Uw6iCRl2vIH7FJh9CAah6BzvUSKHl8ryFet2tFQDV1E9BzgHCqkRNGLPEIpXjWMO9rFd546y4zxG8FWUie2mzI4fIBuK9NZnxvQ4E1mLI5_r4b_YhaYaOah7eTF9Qs_huQwHz-HW/s320/3.%25E5%2588%259D%25E6%259C%259F%25E5%2580%25A4%25E3%2581%25AA%25E3%2581%2597Chrome%25EF%25BC%2588Windows%25EF%25BC%2589.png)
カレンダーUIで、日付を選択します。
Firefox(Windows)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeIvu5XcWpdIlxAqZIQPMbUYwDWZN3nf3hfKV2CH2xLKlVBWVNuB3Z3AIGzSHhZRQ0XyHBkjxLrktlfPgC1OCwJIH0qLlvvRH_1q6DkpJhW_rLWthcVOnU-obQET0fecjZL3ltRclqXWTh/s320/4.%25E5%2588%259D%25E6%259C%259F%25E5%2580%25A4%25E3%2581%25AA%25E3%2581%2597Firefox%25EF%25BC%2588Windows%25EF%25BC%2589.png)
カレンダーUIで、日付を選択します。
Google Chrome(Mac)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwcO6ZLuKfHuRF8MMqQtJv_AOpAI7WcIXvh-iNqtwZBk0MfSevp5Ks9Mv7dSrTsEAbr-k3-4ksNfpboLVaba0hXVmaYU0XfF2decBiQIYIhsdP6kKPISmcsjiMFu-64aQAIx_mTlH4kqTd/s200/Mac_Chrome.png)
カレンダーUIで、日付を選択します。
Firefox(Mac)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzjoRC45mlr9F-9sZcDUs754J4NpSLKbyDU_FZ4jISCCGNeztRBEvF3aW97stnF2n8quhSipINO-YAJnEY619fQff82g0N2bS6soHa1yHQ4WfgrcBJS0IPARuMBkKDg3__Mrsx8N-25vaB/s200/Mac_Firefox.png)
カレンダーUIで、日付を選択します。
Safari(Mac)
初期値無しの場合、表示した当日の日付が「yyyy/mm/dd」形式で表示されます。
カレンダーUIで、日付を選択します。
※value の形式は yyyy-mm-dd である必要があります。
初期値無しの表示形式が yyyy/mm/dd となっていますが、実際に value に yyyy/mm/dd 形式で設定しても表示されません。
また、存在しない日付を value に入力しても初期値として設定されません。
Internet Explorer 11
valueに設定した値がそのまま表示されます。
IEはテキストボックスになってしまうので、文字を入力しても表示されます。
Microsoft Edge
valueに設定した日付が選択状態で表示されます。
Google Chrome(Windows)
valueに設定した日付が選択状態で表示されます。
Firefox(Windows)
valueに設定した日付が選択状態で表示されます。
Google Chrome(Mac)
valueに設定した日付が選択状態で表示されます。
Firefox(Mac)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfVzoIa7aoC8R5LXVkZL41CbkovIAoRTARyljjDbFENCvO9VUQlWlo3UdqPxHsLpf59TrFZLhyphenhyphenddxvwmmpreX12THZaRiyTW5xjZ69TQ6-gwrmfkVKbs7T523_8q998z8MAQco_wp4sgCX/s320/10.%25E5%2588%259D%25E6%259C%259F%25E5%2580%25A4%25E3%2581%2582%25E3%2582%258AFirefox%25EF%25BC%2588Mac%25EF%25BC%2589.png)
valueに設定した日付が選択状態で表示されます。
Safari(Mac)
valueに設定した日付が選択状態で表示されます。
Android
iPhone
IEとSafariでは普通のテキストボックス形式で表示されてしまうので、注意が必要です。
ブラウザごとに UI に微妙に違いがあることを忘れないようにしたいですね。
・初期値有り(<input type="date" value="2018-01-01">)
初期値の設定は value に表示したい日付を入力する。※value の形式は yyyy-mm-dd である必要があります。
初期値無しの表示形式が yyyy/mm/dd となっていますが、実際に value に yyyy/mm/dd 形式で設定しても表示されません。
また、存在しない日付を value に入力しても初期値として設定されません。
Internet Explorer 11
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTn7CgO-kxnrpFLzRHh-pVya6m-wYy9g7ltwlH1PnJ0_obDYmqs4YJwypLPq5CcZ3ClICdPd87zINPf18i5TM9fw4Bd2FKucg84N9d6eZXhl2YZHDXEkeUHRKSDx-qbPVIS2dwkWOvHtGc/s320/5.%25E5%2588%259D%25E6%259C%259F%25E5%2580%25A4%25E3%2581%2582%25E3%2582%258AIE11.png)
IEはテキストボックスになってしまうので、文字を入力しても表示されます。
Microsoft Edge
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVVMTgu5mZHgNZQj0qbBbbnF1jn3LFKulYp0Q9URN2_FxDcUwdrvDc3nxjHSufobBRdX5NiJAPeIwvpsvOlsSWEdtxEE5G9wiPjiUuZshCTSFsYby0aveUqu69rnhMW9fjt38GYgxpdQlw/s320/6.%25E5%2588%259D%25E6%259C%259F%25E5%2580%25A4%25E3%2581%2582%25E3%2582%258AEdge.png)
Google Chrome(Windows)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNNYjm2dk5TMSmu1r4loAyl3fKiu4SZDAnMOEtClaZbFCBCz5sdNtCpNw7smwG6BqvriHsCnVZxUp37dSnjm5qJJDY3QzlV0ohQ5pKtHQ9ft2qMwS428OdgyRO5BuBgTNOqUikYeay6-9r/s320/7.%25E5%2588%259D%25E6%259C%259F%25E5%2580%25A4%25E3%2581%2582%25E3%2582%258AChrome%25EF%25BC%2588Windows%25EF%25BC%2589.png)
Firefox(Windows)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii7Ik4npaceK85IRMF7yCWQKv8BpTJSkXW5QpgRpGHlL2H726-qRSgfA92vL621K-Sl_o9axEn6nztVBOmJPsf-r-atts2sMeutdjJWWKJdUmGF2YUKo0sEcfjkQQJpk3e0hPNDzMuM_pf/s320/8.%25E5%2588%259D%25E6%259C%259F%25E5%2580%25A4%25E3%2581%2582%25E3%2582%258AFirefox%25EF%25BC%2588Windows%25EF%25BC%2589.png)
Google Chrome(Mac)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPvBMEyyBqIM5JSV_r-kmxHIvbMGViWtkvhKW5xJn7y9NjovvcYm8eNm4Yw-ZQjp46OeuqSzTXncPYw2HrTgFzTcHt_IOXRD2v8nX4Y47H5dMXQm1wYFoPfX3g7fAwkFqR5kLlSZuxTVN7/s320/9.%25E5%2588%259D%25E6%259C%259F%25E5%2580%25A4%25E3%2581%2582%25E3%2582%258AChrome%25EF%25BC%2588Mac%25EF%25BC%2589.png)
Firefox(Mac)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfVzoIa7aoC8R5LXVkZL41CbkovIAoRTARyljjDbFENCvO9VUQlWlo3UdqPxHsLpf59TrFZLhyphenhyphenddxvwmmpreX12THZaRiyTW5xjZ69TQ6-gwrmfkVKbs7T523_8q998z8MAQco_wp4sgCX/s320/10.%25E5%2588%259D%25E6%259C%259F%25E5%2580%25A4%25E3%2581%2582%25E3%2582%258AFirefox%25EF%25BC%2588Mac%25EF%25BC%2589.png)
valueに設定した日付が選択状態で表示されます。
Safari(Mac)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfzu3djDLQH1GHuAu2Jz2CURI9E2HvdL9IzLfour4IarsAmvwUrc_vBId7ZAdFwKt15B_GsAjCsppl0PL0pTcKQFMfri1LRu43bUY-8knHsTpSbitcMvO0hQpSR8seQfOcg5XDgZSU0HsA/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2021-06-23+17.54.35.png)
・スマートフォンのブラウザでの表示
Android
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdGrhQn7Ly-hx3R9oqV0AuNXyvsLVfyj0wBCbBwlLN1-HvXdUmG61c9zkmqbjj-al78exoNeJCaJaEZFH2Todw_7MQcFAi8ACud1CVAhC5GYb2Yl5zXVWhZa5f1ollyR62o9fmwFQSU6fK/s320/12.%25E5%2588%259D%25E6%259C%259F%25E5%2580%25A4%25E3%2581%2582%25E3%2582%258AAndroid1.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBBMKw7fWz7tT03-pavkH3qJwz-fhVOmCerSXTixfB5gJ50b1FsnUTA_Gv7HVlsYXGQnhXfw4Um0nbEYU0f-f8sqGYPNevOl_ljyaGcLHLQA5p-6L_CHEVnpu4NltD4fGB0LPfiPr6IEmg/s320/13.%25E5%2588%259D%25E6%259C%259F%25E5%2580%25A4%25E3%2581%2582%25E3%2582%258AAndroid2.png)
iPhone
IEとSafariでは普通のテキストボックス形式で表示されてしまうので、注意が必要です。
ブラウザごとに UI に微妙に違いがあることを忘れないようにしたいですね。
0 件のコメント:
コメントを投稿