Laravel 混合问题:日期选择器不起作用

Posted

技术标签:

【中文标题】Laravel 混合问题:日期选择器不起作用【英文标题】:Laravel mix issue: datepicker does not work 【发布时间】:2022-01-07 02:13:56 【问题描述】:

日期选择器适用于我的引导文件夹。但是,当我将所有内容都移入 laravel 时,它不起作用。我真的不明白 cssjs 在 laravel 中是如何工作的,所以这就是我在这里的原因:)。

/resources/sass/app.scss

//css
@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

//js
@import url('https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js');
@import url('https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js');
@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js');

              <!--DatePicker-->
              <div class="col-md-4">
                <h4 class="">Prefer Date</h3>
                <form>
                    <div class="">
                        <!-- <label for="date" class="col-sm-1 col-form-label">Date</label> -->
                        <div class="">
                            <div class="input-group date" id="datepicker">
                                <input type="text" class="form-control">
                                <span class="input-group-append">
                                    <span class="input-group-text bg-white">
                                        <i class="fa fa-calendar"></i>
                                    </span>
                                </span>
                            </div>
                        </div>
                    </div>
                </form>
              </div>
              <script type="text/javascript">
                $(function() 
                    $('#datepicker').datepicker();
              );
              </script>

【问题讨论】:

你检查过控制台吗?你得到了什么错误? 我有,一切正常,但是日期选择器没有弹出 你不应该在字段本身上使用日期选择器吗?所以:&lt;input type="text" class="form-control" id="datepicker"&gt; 【参考方案1】:

我刚刚复制了您的代码,如果您交换它,它就可以工作:

<input type="date" class="form-control">

因此将输入类型从文本更改为日期,因为它是您要构建的 Datepicker。

我最近遇到了类似的问题,这就是我的日期选择器代码:

<div class="flex flex-wrap -mx-3 mb-6">
    <div class="w-full px-3">
         <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 text-base" for="enddate"> Enddatum </label>
         <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight id="enddate" name="enddate" type="date" placeholder="Enddatum">
    </div>
</div>

【讨论】:

以上是关于Laravel 混合问题:日期选择器不起作用的主要内容,如果未能解决你的问题,请参考以下文章

多个日期选择器不起作用

引导日期选择器不起作用

ajax调用后div中的日期选择器不起作用

jQueryUI 日期选择器不起作用

日期选择器不起作用[重复]

模式中的引导日期选择器不起作用