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

Posted 2023-03-14

【中文标题】Laravel如何在模态上初始化日期选择器

【英文标题】：Laravel how to initialize datepicker on modal

【发布时间】：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

【参考方案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