jQueryUI 日期选择器无法正常工作

Question

我一直在做一个项目，我想使用 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>

Answer 1

您的示例运行良好，样式 link:

中只缺少一个 https:

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

Answer 2

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

Answer 3

如果您在本地运行ning，您需要下载或包含 jquery-ui.css 和 http，例如

<!-- 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

的东西

Answer 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>

jQueryUI 日期选择器无法正常工作

jQueryUI datepicker not functioning

jquery

html

laravel

jquery-ui

jquery-ui-datepicker