CF7にinput:datetime-localの動作を導入する。
やりたいこと
CF7には「日付」はあるけど「日時」がない。
「日時」はinput:datetime-localで実現できる。
さてどうしようね。
jsでどうにかしてしまう
typeを書き換えたらいいじゃんね。
まず、textでフォームを作成する。
判別できるようにclassをつける。
CF7の表記はわかりにくいので割愛。
<div class="datetime-local_set">
<input type="text" name="datetime01" class="input_datetimelocal">
<input type="text" name="datetime02" class="input_datetimelocal">
<input type="text" name="datetime03" class="input_datetimelocal">
</div>で、こう。
document.addEventListener('DOMContentLoaded', function () {
const inputs = document.querySelectorAll('div.datetime-local_set input.input_datetimelocal[type="text"]');
inputs.forEach(function(input) {
input.type = 'datetime-local';
});
});jQueryだとこんな感じ。
$(function(){
$('div.datetime-local_set input.input_datetimelocal[type="text"]').attr('type', 'datetime-local');
})手っ取り早くていいのだけど、ページ表示からjs反映までにラグがある。
表示が一瞬変わるし、inputの高さが崩れたりすると画面がガクガクして気持ち悪いことになるので注意。
jquery.datetimepickerを使う
jQueryプラグインでやってしまう例。
これもCF7を改造しなくても実現できる。
良かったですね。
input:textはそのままに、アクティブになったら日時のポップアップが表示される。
input:datetime-localは直接入力ができたりカレンダーから選択したりする。そこらのフォームで導入されてるものを見たことがないので、初見だとわかりにくい。
一般に普及してるとは考えにくいのでユーザーが困るかもしれない。
それにplaceholderが使えなかったりする。
使用環境がスマホ縛りなら問題ないんだけどね。
input:datetime-localのダメなところを解消できるので嬉しいですね。
だけど、日時指定のポップアップはスマホに最適化されないっていうデメリットと言うかリスクがある。ポップアップ自体はHTMLで組まれているのでCSSでどうにかできるけど、手間がすごいので微妙という面がある。
どっちを取るかですね。
こんな感じ。
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.3.js?ver=6.7.2" id="jQuery-js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css">
<script>
$(function(){
if($('input.input_datetime').length){
$('input.input_datetime').datetimepicker();
}
})
</script>
</head>
<body>
<input type="text" name="datetime01" class="input_datetimelocal" readonly>
<input type="text" name="datetime02" class="input_datetimelocal" readonly>
<input type="text" name="datetime03" class="input_datetimelocal" readonly>
</body>年月日と時間を分けるなら
他のjQueryプラグインに「pickadate.js」というのがある。
なかなかにでかいからスマホからの操作が快適になる。
その代わりに年月日と時間を別個に用意することになる。
さしたる問題はないので、これでもいい気がする。
だけどjQuery1系なんだよな、大した問題じゃないけど。
jQuery UIもあるんだけど
既存機能だと年月日だけになるので、時間も選べるように拡張機能を追加する感じになる。
jQuery UIもまあ嫌いじゃないんだけど、色々ある中の一部しか使わないって考えたらもったいないというかなんというか。
コメント