jQueryUI 日期选择器不起作用答案

【问题标题】：jQueryUI datepicker not functioningjQueryUI 日期选择器不起作用
【发布时间】：2019-04-04 21:41:45
【问题描述】：

我一直在做一个项目，我想使用 jqueryUI datepicker，这对我来说并不陌生，但现在使用 laravel Blade 模板它不起作用。我尝试了很多东西，但似乎没有找到解决方案。如果有人知道答案，我会很高兴与我和其他任何可能处理相同问题的人分享。这是代码块。

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <script src="{{ asset('js/app.js') }}" defer></script>

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

    <!-- jQueryUI CSS -->   
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

</head>
<body>
    <div id="app">

        <main class="py-4">
            <div class="container">

            <!-- on this place where datepicker is, it's "@yield('content')" -->
            <p>Date: <input type="text" id="datepicker"></p>

            </div>
        </main>

    </div>

    <!-- jQueryUI scripts -->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>
    $( function() {
        $( "#datepicker" ).datepicker({
            changeMonth: true,
            changeYear: true
        });
    } );
    </script>

</body>
</html>

【问题讨论】：

标签： jquery html laravel jquery-ui jquery-ui-datepicker

【解决方案1】：

您的示例运行良好，样式链接中仅缺少 https:：

 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

【讨论】：

【解决方案2】：

我遇到了同样的问题，我的解决方法是在文档末尾删除 jQuery 的第二个包含。 jQuery 在标头中使用 app.js 加载，第二个包含会覆盖第一个包含并导致问题。

【讨论】：

【解决方案3】：

如果您在本地运行，则需要下载或包含带有 http 的 jquery-ui.css，类似于

<!-- jQueryUI CSS -->   
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

当您在没有 http:// 的情况下在本地运行时，它会将 url 转换为 file://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css 之类的东西

【讨论】：

【解决方案4】：

我用这个……希望对你有帮助。

<!-- jQueryUI scripts -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
    $( function() {
      $( "#datepicker" ).datepicker({
        dateFormat: 'dd/mm/yy',
        dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
        dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
        monthNames:['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
        nextText: 'Próximo',
        prevText: 'Anterior'
    });

});
</script>

【讨论】：