0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

livewireでbootstrap4-datetimepickerがバインドしてくれない件

Last updated at Posted at 2022-01-05

はじめに

環境 Laravel 8.68.0 (livewireが使えるバージョンならなんでも)

使用しているライブラリ
tempusdominus-bootstrap-4
使い方は名前で調べると割と記事が出てきます。

目次

  1. 対処法
  2. 備考
  3. 参考文献

対処法

手動でバインドさせる

    <input type="text" class="form-control" id="select_year" data-toggle="datetimepicker">
    {{ $selectYear }} 
    @push('scripts')
        <script>
            $('#select_year').datetimepicker({
                'format': 'YYYY',
            });
            $('#select_year').on('update.datetimepicker', function (e) {
                //手動バインド
                @this.set('selectYear', e.target.value)
            });
        </script>
    @endpush

備考

flatpickerというdatepicker系ライブラリなら普通に書いてるだけでバインドしてくれるのでこっちの方がオススメ。
唯FlatPickerには「年のみ選択」出来るフォーマットが無いので仕方なくdatetimepickerを使った所ハマったという訳です。

参考文献

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?