Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
年月日の入力どうしよう
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
otukutun
November 12, 2020
Technology
2
9.3k
年月日の入力どうしよう
otukutun
November 12, 2020
Tweet
Share
More Decks by otukutun
See All by otukutun
コネヒトマルシェ20221209.pdf
otukutun
0
790
Other Decks in Technology
See All in Technology
AWS DevOps Agent x ECS on Fargate検証 / AWS DevOps Agent x ECS on Fargate
kinunori
2
230
Cloud Runでコロプラが挑む 生成AI×ゲーム『神魔狩りのツクヨミ』の裏側
colopl
0
150
20260204_Midosuji_Tech
takuyay0ne
1
160
1,000 にも届く AWS Organizations 組織のポリシー運用をちゃんとしたい、という話
kazzpapa3
0
190
プロダクト成長を支える開発基盤とスケールに伴う課題
yuu26
4
1.4k
インフラエンジニア必見!Kubernetesを用いたクラウドネイティブ設計ポイント大全
daitak
1
390
コスト削減から「セキュリティと利便性」を担うプラットフォームへ
sansantech
PRO
3
1.6k
量子クラウドサービスの裏側 〜Deep Dive into OQTOPUS〜
oqtopus
0
150
制約が導く迷わない設計 〜 信頼性と運用性を両立するマイナンバー管理システムの実践 〜
bwkw
3
1.1k
CDK対応したAWS DevOps Agentを試そう_20260201
masakiokuda
1
440
日本の85%が使う公共SaaSは、どう育ったのか
taketakekaho
1
250
プロポーザルに込める段取り八分
shoheimitani
1
670
Featured
See All Featured
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
470
AI Search: Where Are We & What Can We Do About It?
aleyda
0
7k
[SF Ruby Conf 2025] Rails X
palkan
1
760
Mind Mapping
helmedeiros
PRO
0
90
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
1.9k
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
180
Making Projects Easy
brettharned
120
6.6k
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
190
Accessibility Awareness
sabderemane
0
57
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.7k
Speed Design
sergeychernyshev
33
1.5k
Transcript
݄ͷೖྗͲ͏͠Α͏ @otukutun
ࣗݾհ • @otukutun • αʔόʔαΠυΤϯδχΞ • ҎલiOS/Ruby on RailsΛ৮͍ͬͯ·͕ͨ͠ɺࠓPHP ΛϝΠϯʹॻ͍ͯ·͢
• Ϗʔϧ͕͖Ͱ͢
݄ͷೖྗػձଟ͍ • ੜ݄ • ECͰͷ౸ணࢦఆ • ཱྀߦ/ҿ৯ళͷ༧
݄ͷ࣮ํ๏ • input type=date • select / input type=text Ͱ݄ΛͦΕͧΕදࣔ
• JavaScriptͰΧϨϯμʔUIΛදࣔ • React/Vue.js • jQuery UI(Datepicker) ͍Ζ͍Ζ࣮ํ๏͋Δʂʂ
ࠓճ࡞ͬͨαΠτͷࣄྫΛ ͓͠͠·͢ʂ!
ࠓճͭͬͨ͘αΠτ • ΩϟϯϖʔϯαΠτ • 9ͭͷ߲Λೖྗͯ͠Ԡื͢Δͱ͕Β͑ΔαΠτ • εϚʔτϑΥϯϝΠϯͷαΠτɻPCͰ։͍ͨ߹෯Λ ݻఆ͢Δ • toCαΠτ(ͲͷϒϥβͰಈ͘Α͏ʹ͢Δඞཁ͕͋Δ)
• JSʹͦΜͳͬͯͳ͍ɻബ͘jQueryΛ͏ JavaScriptΛΘͣগͳ͍Ͱ࣮ݱ͍ͨ͠ʂʂ
input type=dateͰ࣮ͯ͠ΈΔ Android iOS13 safari Android / iOSͰೖྗUIҧ͏͚ͲɺͳΜ͔Αͦ͞͏ʂʂ
input type=dateͰ࣮ͯ͠ΈΔ Chrome macOS Catalina Safari macOS Catalina ChromeΧϨϯμʔUI͕ͩɺSafariͩͱinput type=textʹͳͬͯ͠·͏
input type=dateͰ࣮ͯ͠ΈΔ • ݄ͷ࠷େɺ࠷খͷࢦఆΛ͍ͨ͠ • ͜ͷͷਓ͚͕ͩਃ͠ࠐΊΔͱ͍͏੍ݶΛ͍ͨ͠ Android iOS13 safari AndroidͰͰ͖Δ͚ͲɺiOS
safariͰͰ͖ͳͦ͏
input type=dateΊ·ͨ͠ • iOS safari Ͱ࠷େɺ࠷খͷࢦఆ͕Ͱ͖ͳ͍ • ະೖྗ࣌ʹplaceholder͕Ұ෦௵Εͯ͠·͏ on iOS13
Safari • heightΛࢦఆ͢Δ͜ͱͰճආՄೳ • macOS Safari Ͱͦͦ͑ͳ͍(αΠτతʹӨڹܰ ඍ • Safari Technology Preview 112͔Β͑ΔΑ͏ʹͳΔ
select boxͰ࣮ͨ͠ Android iOS13 safari
select boxͰ࣮ͨ͠ Chrome macOS Catalina Safari macOS Catalina σόΠεΘͣ΄΅ಉ͡ೖྗମݧΛఏڙͰ͖ͦ͏ʂʂ
select boxͰ࣮ͨ͠ • ࠷େɺ࠷খͷࢦఆ͕Ͱ͖Δʂ • ͰͷίϯτϩʔϧͷΈʹͳΔ͕Ұ୴ڐ༰ • CakePHPͷFormHelperͰͷੜ͕༰қ • ͲͷϒϥβͰಉ͡UIΛఏڙͰ͖Δ
ଞͷબࢶ • jQuery UIͷDatepickerΛ͏ • HTML5 polyfillΛ͏ • valueͷdate-format͕ϒϥβຖʹҟͳΔ͜ͱͷղܾ ࡦʹΈ͑ΔͷͰࠓճͷཁ݅Ͱద͔ෆ໌
• https://github.com/chemerisuk/better-dateinput-polyfill
༩ଠ iOS 13 iOS 14
࠷ޙʹ ࠷ߴͷ݄ೖྗϑΥʔϜΛͭ͘Γ·͠ΐ͏ʂʂʂ