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.8k
年月日の入力どうしよう
otukutun
November 12, 2020
Tweet
Share
More Decks by otukutun
See All by otukutun
コネヒトマルシェ20221209.pdf
otukutun
0
560
Other Decks in Technology
See All in Technology
#51 “Empowering Azure Storage with RDMA”
cafenero_777
3
210
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
7
100k
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
1
230
ハイパフォーマンスな組織をつくるための開発生産性の考え方 / developer-productivity-high-performer-link-and-motivation
lmi
3
250
サービスメッシュ環境における OpenTelemetry 活用 / OpenTelemetry in Service Mesh
k6s4i53rx
2
840
生成AIの不確実性と向き合うためのオブジェクト指向設計
tkikuchi1002
2
670
GitHub最新情報キャッチアップ 2024年3月
dzeyelid
16
3.2k
マイクロサービス環境におけるDB戦略 in DMMプラットフォーム
pospome
11
3k
既存プロセスからの脱却と変化に適応するために必要なこと
cybozuinsideout
PRO
2
170
Azureコストは水道代/The_47th_Tokyo_Jazug
aeonpeople
3
360
SREsのためのSRE定着ガイド
netmarkjp
10
1.6k
10分でわかるfreeeのQA
freee
0
230
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
130
6.2k
The Mythical Team-Month
searls
214
42k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
How GitHub (no longer) Works
holman
301
140k
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Music & Morning Musume
bryan
39
5.5k
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
Building an army of robots
kneath
300
41k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
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
࠷ޙʹ ࠷ߴͷ݄ೖྗϑΥʔϜΛͭ͘Γ·͠ΐ͏ʂʂʂ