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
otukutun
November 12, 2020
Technology
2
6.9k
年月日の入力どうしよう
otukutun
November 12, 2020
Tweet
Share
More Decks by otukutun
See All by otukutun
コネヒトマルシェ20221209.pdf
otukutun
0
580
Other Decks in Technology
See All in Technology
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
320
Janus
bkuhlmann
0
480
HEXA OSINT CTF V3 作戦会議
meow_noisy
0
110
入社後初めてのタスクでk8sアップグレードした話.pdf
kkato1
0
380
【SORACOM UG】(2024年度版) SIMってなんだ? ~セルラー通信がつながる仕組み、解説します~
soracom
PRO
0
210
転移学習とドメイン適応の基礎
kmatsui
2
570
普段有償でサポート業務をしているCSAが技術知見を無料で公開する理由
07jp27
1
630
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
1
520
Data and AI Governance: Existing Challenges and Emerging Trends
scotthsieh825
0
140
キャラクター制御のためのプロンプト術 for LINE Bot
uezo
0
520
Algyan イベント振り返り
linyixian
0
180
OpenTelemetry を使ったトレースエグザンプラーの活用 / otel-trace-exemplar
k6s4i53rx
2
630
Featured
See All Featured
A Philosophy of Restraint
colly
195
16k
Typedesign – Prime Four
hannesfritz
36
2k
Become a Pro
speakerdeck
PRO
9
4.5k
Into the Great Unknown - MozCon
thekraken
10
980
Building Your Own Lightsaber
phodgson
97
5.7k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
Building Effective Engineering Teams - LeadDev
addyosmani
26
1.8k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
Adopting Sorbet at Scale
ufuk
67
8.6k
Designing for Performance
lara
601
67k
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
࠷ޙʹ ࠷ߴͷ݄ೖྗϑΥʔϜΛͭ͘Γ·͠ΐ͏ʂʂʂ