年月日の入力どうしよう

Transcript

1. ೥݄೔ͷೖྗͲ͏͠Α͏ @otukutun
2. ࣗݾ঺հ • @otukutun • αʔόʔαΠυΤϯδχΞ • Ҏલ͸iOS/Ruby on RailsΛ৮͍ͬͯ·͕ͨ͠ɺࠓ͸PHP ΛϝΠϯʹॻ͍ͯ·͢ • Ϗʔϧ͕޷͖Ͱ͢
3. ೥݄೔ͷೖྗػձ͸ଟ͍ • ੜ೥݄೔ • ECͰͷ౸ண೔ࢦఆ • ཱྀߦ/ҿ৯ళͷ༧໿
4. ೥݄೔ͷ࣮૷ํ๏ • input type=date • select / input type=text Ͱ೥݄೔ΛͦΕͧΕදࣔ • JavaScriptͰΧϨϯμʔUIΛදࣔ • React/Vue.js • jQuery UI(Datepicker) ͍Ζ͍Ζ࣮૷ํ๏͸͋Δʂʂ
5. ࠓճ࡞ͬͨαΠτͷࣄྫΛ ͓࿩͠͠·͢ʂ!
6. ࠓճͭͬͨ͘αΠτ • ΩϟϯϖʔϯαΠτ • 9ͭͷ߲໨Λೖྗͯ͠Ԡื͢Δͱ঎඼͕΋Β͑ΔαΠτ • εϚʔτϑΥϯϝΠϯͷαΠτɻPCͰ։͍ͨ৔߹͸෯Λ ݻఆ͢Δ • toCαΠτ(Ͳͷϒϥ΢βͰ΋ಈ͘Α͏ʹ͢Δඞཁ͕͋Δ) • JSʹͦΜͳ࢖ͬͯͳ͍ɻബ͘jQueryΛ࢖͏ JavaScriptΛ࢖Θͣগͳ͍޻਺Ͱ࣮ݱ͍ͨ͠ʂʂ
7. input type=dateͰ࣮૷ͯ͠ΈΔ Android iOS13 safari Android / iOSͰೖྗUIҧ͏͚ͲɺͳΜ͔Αͦ͞͏ʂʂ
8. input type=dateͰ࣮૷ͯ͠ΈΔ Chrome macOS Catalina Safari macOS Catalina Chrome͸ΧϨϯμʔUI͕ͩɺSafariͩͱinput type=textʹͳͬͯ͠·͏
9. input type=dateͰ࣮૷ͯ͠ΈΔ • ೥݄೔ͷ࠷େ஋ɺ࠷খ஋ͷࢦఆΛ͍ͨ͠ • ͜ͷ೥୅ͷਓ͚͕ͩਃ͠ࠐΊΔͱ͍͏੍ݶΛ͍ͨ͠ Android iOS13 safari AndroidͰ͸Ͱ͖Δ͚ͲɺiOS safariͰ͸Ͱ͖ͳͦ͏
10. input type=date͸΍Ί·ͨ͠ • iOS safari Ͱ࠷େ஋ɺ࠷খ஋ͷࢦఆ͕Ͱ͖ͳ͍ • ະೖྗ࣌ʹplaceholder͕Ұ෦௵Εͯ͠·͏ on iOS13 Safari • heightΛࢦఆ͢Δ͜ͱͰճආՄೳ • macOS Safari Ͱ͸ͦ΋ͦ΋࢖͑ͳ͍(αΠτతʹӨڹ͸ܰ ඍ • Safari Technology Preview 112͔Β͸࢖͑ΔΑ͏ʹͳΔ
11. select boxͰ࣮૷ͨ͠ Android iOS13 safari
12. select boxͰ࣮૷ͨ͠ Chrome macOS Catalina Safari macOS Catalina σόΠε໰Θͣ΄΅ಉ͡ೖྗମݧΛఏڙͰ͖ͦ͏ʂʂ
13. select boxͰ࣮૷ͨ͠ • ࠷େ஋ɺ࠷খ஋ͷࢦఆ͕Ͱ͖Δʂ • ೥ͰͷίϯτϩʔϧͷΈʹͳΔ͕Ұ୴ڐ༰ • CakePHPͷFormHelperͰͷੜ੒͕༰қ • Ͳͷϒϥ΢βͰ΋ಉ͡UIΛఏڙͰ͖Δ
14. ଞͷબ୒ࢶ • jQuery UIͷDatepickerΛ࢖͏ • HTML5 polyfillΛ࢖͏ • valueͷdate-format͕ϒϥ΢βຖʹҟͳΔ͜ͱ΁ͷղܾ ࡦʹΈ͑ΔͷͰࠓճͷཁ݅Ͱద੾͔͸ෆ໌ • https://github.com/chemerisuk/better-dateinput-polyfill
15. ༩ଠ࿩ iOS 13 iOS 14
16. ࠷ޙʹ ࠷ߴͷ೥݄೔ೖྗϑΥʔϜΛͭ͘Γ·͠ΐ͏ʂʂʂ