やっといたほうが良いと思う。
事例
申込みフォームに面談希望日とかの、日付を入力させる項目を入れるとする。input type=”date”はピーキー過ぎて扱いづらいので除外。
- HTML: HyperText Markup Language | MDN
要素の type="date" は、ユーザーに日付を入力させる入力欄を、検証付きのテキストボックスまたは特殊な日付選択インターフェイスのどちらかで生成します。
developer.mozilla.org
そうするとjQueryのdatepickerが候補に上がる。というか、これを使うのがむしろ一般的くらいのもん。
Datepicker | jQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building h...
jqueryui.com
datepickerはinputに付与する機能なので、input type=”text”にくっつけるのが一般的。カレンダーから日付を選択した際に出力する内容はjsで制御できるので、スラッシュ区切りにするとか年月日をつけるとか曜日を足すとか、自由度が高い。
で、datepickerを足しただけだとキーボード入力に対応してるせいで、出力形式を決めたところでぶち壊しにすることができてしまう。
スマホで見たときとか、カレンダーのポップアップにキーボードが被って気が付かない可能性とか出てくる。嫌だ、どうすりゃいいんだ、という場合のやつ。
readonlyで解決
inputにreadonlyを付けるとユーザーの入力を禁止する感じになる。
<input type="text" name="" value="" readonly="readonly">HTML 属性: readonly - HTML: HyperText Markup Language | MDN
readonly は論理属性で、存在する場合、要素が変更可能ではなくなり、ユーザーがそのコントロールを編集できなくなります。
developer.mozilla.org
「感じ」というのは絶対に操作できないというわけでなく、jsからのアプローチは依然通用するということで。だから、datepickerからのみ入力できるということになる。
contact form 7の場合
contactform7には元々日付タグもあるんだけど、出力されるのはdateなのでやっぱり除外。
datepickerを使うときはclassをつけて指定。
ポップアップ内に項目はないけどreadonlyを追加することは可能。
上記を踏まえてこんな感じで書く。
[text* hopedate class:datepicker readonly]コード内に「readonly」を追記すれば反映してくれる。
コメント