bootstrap-datetimepicker の後継版、tempusdominus-bootstrap を使ってみる

久しぶりにbootstrapでdatetimepickerを使おうとおもったら、定番のbootstrap-datetimepickerってbootstrap4以降だとヘッダー周りの表示がおかしくなるみたいです。

後継版のtempusdominus-bootstrapだと、bootstrap4やbootstrap5でも使えるみたいなので、乗り換えます。

Contents

1 CSS
2 JavaScript
3 HTML
4 おまけ

CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css" />

いつものようにcdnから^^

JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/ja.min.js" integrity="sha512-rElveAU5iG1CzHqi7KbG1T4DQIUCqhitISZ9nqJ2Z4TP0z4Aba64xYhwcBhHQMddRq27/OKbzEFZLOJarNStLg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js"></script>

<script>
    $(function () {

        $('.datetimepicker').datetimepicker({
            format: "YYYY/MM/DD HH:mm",
            locale: 'ja',
            sideBySide: true,
        });

    });
</script>

これも諸々、cdnを利用。オプションなんかは大きく変わってなさそう。

HTML

<input class="form-control datetimepicker-input datetimepicker" placeholder="YYYY/MM/DD HH:mm" id="hogehoge_at" data-toggle="datetimepicker" data-target="#hogehoge_at" name="hogehoge_at" type="text">

このあたりが大きく変わりました。

・datetimepicker-input クラスの指定が必要になったこと

・toggleの指定で、datetimepickerを呼び出してあげること

・idとdata-targetをペアで、入力値のセットを明示的に書く必要がでたこと

ですかね。旧版との違いで要注意です。

おまけ

datetimepickerがフォーカスされた場合、今日の日付が初期値で入ってしまい……空のまま登録したい項目に誤爆が生じるケースが発生しました。

初期値をnull（もしくは空）にして、フォームに値が入っていた場合はその値を初期値にする。

このような挙動にする方法がdatetimepickerの様々なバージョンで違っているようで、tempusdominus-bootstrapの場合はどうするか、ドキュメントから引っ張ってきました。

オプションに、

useCurrent: false

を指定するだけでOKでした。

<script>
    $(function () {

        $('.datetimepicker').datetimepicker({
            format: "YYYY/MM/DD HH:mm",
            locale: 'ja',
            sideBySide: true,
            useCurrent: false,
        });

    });
</script>

こんな感じですね。

これを記録に残しておきたく、ブログ化しました（笑）

CSS

JavaScript

HTML

おまけ

Popular Posts

You may also like...