DatePickerに初期値を設定するとエラーで動かない

開発環境
MacOS Catalina
ブラウザ Chrome
Laravel 5.5.50
PHP 7.3.11
bootstrap4.3.1

Laravelとbootstarp4でdatepickerを使用したアプリケーションを作成しております。

新規作成フォームではdatepickerを期待通りに動作できましたので、
同じ要領で編集フォームに実装したところ以下のエラーがログに出力され、値を変更できなくなってしまいました。
ライブラリがバグって関数を再帰呼び出しする無限ループを引き起こしているようです。

使用中のライブラリ
一番下の行のtempusdominus-bootstrap-4.min.jsがdatepickerのようでここが一番怪しいです。
一番上のajaxzip3.jsは郵便番号から住所検索するためのライブラリです。

HTML
1    <script src="{{url('/js/ajaxzip3.js')}}" charset="UTF-8"></script>
2    <script src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" integrity="sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP" crossorigin="anonymous"></script>
3    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
4    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
5    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
6    <script src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" integrity="sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP" crossorigin="anonymous"></script>
7    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
8    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/ja.js"></script>
9    <script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/js/tempusdominus-bootstrap-4.min.js"></script>

html
1<input type="text" class="form-control datetimepicker-input" 
2id="birthday" data-toggle="datetimepicker" data-target="#birthday" name="birthday" value="{{ old('birthday') }}" />
3

上記タグで value属性がない場合は正常に動作することを確認できております。

このoldに渡されている値をdd($request->birthday)として確認すると
"1985-06-28"
という期待通りの値が入っているのですが、
いざブラウザで表示させると
datepickerが一瞬その値が表示された後、強制的に以下の写真のように上書きしてきます。
また、この状態ではピッカーは表示されず、値を手動で変えることもできません。

オプションのフォーマットはYYYY-MM-DDですので無視されてしまっています。

javascript
1<script type="text/javascript">
2  $(function () {
3      $('#birthday').datetimepicker({
4          format: 'YYYY-MM-DD',
5          locale: 'ja',
6          dayViewHeaderFormat: 'YYYY年 MMM',
7      });
8  });
9  
10</script>

どなたか解決法をご存知ないでしょうか？

tomomo

2020/11/07 13:48

自分も昔似たようなのがあり、それはそのライブラリ自体の不具合で修正パッチ的なのを追記した記憶があったりします。 datepickerもいろいろなライブラリがあるので詳細をもっと書いた方が解答つくやもかもしれません。。。

misskabu

2020/11/07 14:05

tomomoさん。コメントありがとうございます。 header部を追記いたしました。ライブラリの問題の可能性があるとわかっただけでも収穫でした。最悪別のライブラリを考えるなりします。

行動規範の内容に同意します

回答1件

ベストアンサー

tempusdominus-bootstrap-4ナンタラとかいうのなら心当たりあります。
エラー内容までは覚えてないのでハズれてるかもしれないけど、このライブラリ、バグあってそのまま使えなかったような。
fixme.jsってのを差し込んで自分は回避しました。

html
1:
2<script src="/vendor/tempusdominus-bootstrap-4-5.1.2/build/js/tempusdominus-bootstrap-4.min.js"></script>
3<script src="/assets/js/fixme.js"></script>
4:

fixme.js

javascript
1
2"use strict";
3
4// @FIXME tempusdominus-bootstrap-4.min.js 5.1.2, 5.1.3
5$.fn.datetimepicker.Constructor.prototype._origSetValue = $.fn.datetimepicker.Constructor.prototype._setValue;
6$.fn.datetimepicker.Constructor.prototype._setValue = function _setValue(targetMoment, index) {
7	var oldDate = this.unset ? null : this._dates[index];
8	var outpValue = '';
9	if (!targetMoment && (!this._options.allowMultidate || this._dates.length === 1)) {
10		this.unset = true;
11		this._dates = [this.getMoment()];
12		this._datesFormatted = [];
13		this._viewDate = this.getMoment().locale(this._options.locale).clone();
14		if (this.input !== undefined) {
15			this.input.val('');
16			this.input.trigger('input');
17		}
18		this._element.data('date', outpValue);
19		this._notifyEvent({
20			type: jQuery.fn.datetimepicker.Constructor.Event.CHANGE,
21			date: false,
22			oldDate: oldDate
23		});
24		this._update();
25	}
26	else
27	{
28		this._origSetValue(targetMoment, index);
29	}
30};