Laravel如何在模态上初始化日期选择器答案

【问题标题】：Laravel how to initialize datepicker on modalLaravel如何在模态上初始化日期选择器
【发布时间】：2019-11-02 03:36:01
【问题描述】：

我有一个laravel-modal，我需要jquery-datepicker 才能工作，但由于某种原因，日期选择器没有被初始化。

@push('modals')
 <div class="modal fade" tabindex="-1" role="dialog" id="uploadModal">
    <div class="modal-dialog modal-lg" role="document">
      <form method="POST" action="{{ route('application.store') }}">
         <div class="modal-content">
           <input name="birthyear" type="text" class="form-control" autocomplete="birthyear" required />
         </div>
       ...
      </form>
   </div>
</div>

然后，在我的 app.js 中执行：

$(document).ready(function() {
    $("input[name='birthyear']").datepicker({ format: "dd-mm-yyyy" });
});

但是什么都没有发生！？！我也尝试过设置 ID，但没有区别。

有人知道吗？

【问题讨论】：

控制台有错误吗？
@MayankPandeyz 不，一点也不
@ST80 只需确保您的脚本包含在该页面上。正如在 jsfiddle 中一样，相同的代码正在工作。 jsfiddle.net/urkx3osp
有时可能是缓存问题...在浏览器中尝试 > 检查视图 > 源包含您的 javascript 更改。
是缺少的@yield('scripts') 导致了问题！非常感谢您抽出宝贵的时间：p

标签： javascript jquery laravel datepicker

【解决方案1】：

你的看法。我通过添加id="birthyear"修改它

@push('modals')
 <div class="modal fade" tabindex="-1" role="dialog" id="uploadModal">
    <div class="modal-dialog modal-lg" role="document">
      <form method="POST" action="{{ route('application.store') }}">
         <div class="modal-content">
           <input name="birthyear" id="birthyear" type="text" class="form-control" autocomplete="birthyear" required />
         </div>
       ...
      </form>
   </div>
</div>

javascript 代码。我为 datepicker 调用了 bootstrap cdn。我相信您必须在布局的头文件中包含@yield('scripts')。

@section('scripts')
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>

 //process date of birth
        $(document).ready(function () {

                $('#birthyear').datepicker({
                    format: "yyyy-mm-dd"
                });  

            });

        $('#birthyear').datepicker({
        autoclose: true,  
        format: "yyyy-mm-dd"
        }); 
@stop

【讨论】：

是缺少的@yield('scripts') 导致了问题：-s