datepickerを下に表示する・明日以降をグレーアウトする
この記事で分かること
datepickerの
- カレンダーを下に表示する方法
- カレンダーの「明日以降」をグレーアウトする方法
- jsの挙動が共通になるように管理している場合、例外的に挙動を設定する方法
datepickerを下に出したいのー！
ちょうど上の位置にあるレイアウトと被っちゃってる。
でもって、今日より未来はグレーアウトして押せないようにしたいのー！！
（こんな風になってほしいのーー！！）（今日は4/19。）
datepickerのオプションってこんなにいっぱいあったんか・・・。ふむふむ。
表示位置にはorientation
選択可能な最新日付にはendDate
今回はこの2つのオプションを使えばいいらしい。
<script>
$(function() {
$('[data-provide="datepicker"]').datepicker({
language: 'ja',
autoClose: true,
+ orientation: 'bottom',
+ endDate: 'today',
});
});
</script>
datepickerの挙動を 他のファイルで設定しているとかじゃない場合は、
これで反映できると思います！
でも自分はあれ？
反映できてない。。。。
master.blade.phpでdatepickerの挙動を全ページ共通にしていた
開発スタートからしばらく経っているシステムのため、
master.blade.phpというファイルで、ほかのページで表示させているすべてのdatepickerの挙動が共通になるように、共通のオプションが設定されていました。
index.blade.phpだけ、datepickerの挙動を変えたい場合、
上に書いたやり方のようにindex.blade.php内でオプションを書き加えただけだと、せっかく書き加えても、反映されません。 （実際に試したところ、master.blade.phpに書かれているオプション内容が優先されました）
しかしmaster.blade.phpを直接書き換えてしまうと、ほかのページで表示させているすべてのdatepickerにも危害が及ぶーーーーーーー（江戸川コナン）。
そこで、index.blade.phpに 先ほど記述した部分を @section('datepicker_js')で囲みます。
master.blade.php側には@yield('datepicker_js')を追加し、先ほどの記述部分を使用するか否かを@hasSection('datepicker_js')で判断します。
（@section('あああ')、@yield('あああ')、@hasSection('あああ')
これらは共通していて分かりやすければ、どのような名前をつけてもOKです。）
@sectionと@yieldの便利な関係はこちらから。
+ @section('datepicker_js')
<script>
$(function() {
$('[data-provide="datepicker"]').datepicker({
language: 'ja',
autoClose: true,
orientation: 'bottom',
endDate: 'today',
});
});
</script>
+ @stop
{{-- デートピッカー --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.ja.min.js" integrity="sha512-zI0UB5DgB1Bvvrob7MyykjmbEI4e6Qkf5Aq+VJow4nwRZrL2hYKGqRf6zgH3oBQUpxPLcF2IH5PlKrW6O3y3Qw==" crossorigin="anonymous"></script>
- <script>
- $('[data-provide="datepicker"]').datepicker({
- language: 'ja',
- autoclose: true
- });
- </script>
+ @hasSection('datepicker_js')
+ @yield('datepicker_js')
+ @else
+ <script>
+ $('[data-provide="datepicker"]').datepicker({
+ language: 'ja',
+ autoclose: true
+ });
+ </script>
+ @endif
とすると・・・
したかった風にできた。
master.blade.phpの@hasSection('datepicker_js')で index.blade.php内に@section('datepicker_js')があるかをチェックし、
ある場合はmaster.blade.php内の@yield('datepicker_js')部分が@section('datepicker_js')に置き換わって表示される仕組み。
ない場合は、master.blade.phpの内容は特に変わらず、これまで通りのdatepickerの挙動をするため、危害が及ぶことはない。
真実はいつもひとつ！！！！
参考にした記事
Discussion