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
9.1k
年月日の入力どうしよう
otukutun
November 12, 2020
Tweet
Share
More Decks by otukutun
See All by otukutun
コネヒトマルシェ20221209.pdf
otukutun
0
770
Other Decks in Technology
See All in Technology
現場データから見える、開発生産性の変化コード生成AI導入・運用のリアル〜 / Changes in Development Productivity and Operational Challenges Following the Introduction of Code Generation AI
nttcom
1
480
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
880
.NET 10のBlazorの期待の新機能
htkym
0
110
AI機能プロジェクト炎上の 3つのしくじりと学び
nakawai
0
110
Wasmの気になる最新情報
askua
0
190
頭部ふわふわ浄酔器
uyupun
0
110
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
3
3.3k
SOTA競争から人間を超える画像認識へ
shinya7y
0
410
Observability — Extending Into Incident Response
nari_ex
1
280
SQLAlchemy の select(User).where(User.id =="123") を理解してみる/sqlalchemy deep dive
3l4l5
3
350
AI時代におけるデータの重要性 ~データマネジメントの第一歩~
ryoichi_ota
0
710
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
180
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Building Applications with DynamoDB
mza
96
6.7k
Producing Creativity
orderedlist
PRO
347
40k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Fireside Chat
paigeccino
41
3.7k
Why Our Code Smells
bkeepers
PRO
340
57k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
How to Ace a Technical Interview
jacobian
280
24k
Rails Girls Zürich Keynote
gr2m
95
14k
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
࠷ޙʹ ࠷ߴͷ݄ೖྗϑΥʔϜΛͭ͘Γ·͠ΐ͏ʂʂʂ