質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

2351閲覧

BootStrap-DatePickerのメソッドを呼ぶと月切替ができなくなる

uekky

総合スコア22

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2019/02/16 03:51

編集2019/02/16 04:38

前提・実現したいこと

店舗選択セレクトボックスと、
休業日は選択できない来店日選択インプットボックスを
Bootstrap-DatePickerを使って実装しようとしています。
通過済みの方がいらっしゃれば、ご教授いただけると嬉しいです。

発生している問題・エラーメッセージ

BootStrap-DatePickerのメソッド(setDatesDisabled)を使って
選択不可日を設定すると、月切替ボタン(>>マーク)での月切替をしようとしても、
月表示が変わらなくなってしまいます。

該当のソースコード

html

1<select name="shop_id"> 2 <option value="1">店舗1</option> 3 <option value="2">店舗2</option> 4</select> 5来店日: 6<input type="text" name="reserve_day" class="date-picker" value="" data-datesdisabled="" />

javascript

1<script> 2 function datePickerCallBack(e) { 3 let value = $(this).data('datesdisabled'); 4 $('.date-picker').datepicker('setDatesDisabled', value); 5 } 6 7 $(function(){ 8 $('[name=shop_id]').on('changed', function() { 9 //店舗に応じた休業日を取得して、$('.reserve_day').data('datesdisabled')にセットする 10 }); 11 //date-picker初期化 12 $('.date-picker').datepicker({ 13 format: 'yyyy-mm-dd', 14 language:'ja', 15 autoclose: true, 16 }); 17 //datepicker表示時に選択不可日設定 18 $('.date-picker').on('show', datePickerCallBack); 19 }); 20</script>

試したこと

showイベントのコールバック内で他のメソッドに変えてみても、月選択は無効になったままでした。
showイベントのコールバック内でreturn true;を返してみましたが、月選択は無効になったままでした。
datePickerCallBack内のsetDatesDisabledメソッドを呼んでいる行をコメントアウトすると、月選択は有効でした。

補足情報(FW/ツールのバージョンなど)

jQuery v3.3.1
Datepicker for Bootstrap v1.8.0

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

デバッグした結果、月切替時にshowイベントが走って、showイベント中でsetDatesDisabledを呼び出すため、datepickerで表示している月がリセットされて、元の月を再表示する状態になっていました。

表示済みの場合は、値のセットをしないようにすれば、問題なく月を変更できるようになりました。

javascript

1 2<script> 3 //追加: 開閉状態 4 let showed = false; 5 function datePickerCallBack(e) { 6 if (showed) return true; 7 showed = true; 8 let value = $(this).data('datesdisabled'); 9 $('.date-picker').datepicker('setDatesDisabled', value); 10 } 11 12 $(function(){ 13 $('[name=shop_id]').on('changed', function() { 14 //店舗に応じた休業日を取得して、$('.reserve_day').data('datesdisabled')にセットする 15 }); 16 //date-picker初期化 17 $('.date-picker').datepicker({ 18 format: 'yyyy-mm-dd', 19 language:'ja', 20 autoclose: true, 21 }); 22 //datepicker表示時に選択不可日設定 23 $('.date-picker').on('show', datePickerCallBack); 24 //追加: 閉じた場合の状態を保存 25 $('.date-picker').on('hide', function() { showed = false; }); 26 }); 27</script> 28 29

投稿2019/02/16 06:16

uekky

総合スコア22

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問