やっといたほうが良いと思う。
事例
申込みフォームに面談希望日とかの、日付を入力させる項目を入れるとする。input type=”date”はピーキー過ぎて扱いづらいので除外。
そうするとjQueryのdatepickerが候補に上がる。というか、これを使うのがむしろ一般的くらいのもん。
datepickerはinputに付与する機能なので、input type=”text”にくっつけるのが一般的。カレンダーから日付を選択した際に出力する内容はjsで制御できるので、スラッシュ区切りにするとか年月日をつけるとか曜日を足すとか、自由度が高い。
で、datepickerを足しただけだとキーボード入力に対応してるせいで、出力形式を決めたところでぶち壊しにすることができてしまう。
スマホで見たときとか、カレンダーのポップアップにキーボードが被って気が付かない可能性とか出てくる。嫌だ、どうすりゃいいんだ、という場合のやつ。
readonlyで解決
inputにreadonlyを付けるとユーザーの入力を禁止する感じになる。
<input type="text" name="" value="" readonly="readonly">「感じ」というのは絶対に操作できないというわけでなく、jsからのアプローチは依然通用するということで。だから、datepickerからのみ入力できるということになる。
無効化自体はcssでもやれる。やれるんだけど、これだとdatepickerが発火しないので使っちゃダメ。
.datepicker{
pointer-events: none;
}contact form 7の場合
contactform7には元々日付タグもあるんだけど、出力されるのはdateなのでやっぱり除外。
datepickerを使うときはclassをつけて指定。
ポップアップ内に項目はないけどreadonlyを追加することは可能。
上記を踏まえてこんな感じで書く。
[text* hopedate class:datepicker readonly]コード内に「readonly」を追記すれば反映してくれる。
20230726追記：記述の注意
オプション設定の前に「$.datepicker～」を書いておく。
$(function(){
$.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
$('.datepicker').datepicker({
minDate: 1,
numberOfMonths: 1,
dateFormat: 'yy年mm月dd日（D）',
});
});これを入れなくても動くっちゃ動くんだけど、CSPとかセキュリティ周りをいじると動かなくなる。
後から修正するのもだるいんで、必ず入れる癖をつける。
コメント