Question

我一直在从事一个项目，我想使用jqueryUI datepicker，这对我来说并不是一个陌生的动作，但是现在使用laravel刀片模板无法正常工作。我尝试了很多事情，但似乎并没有找到解决方案。如果有人知道答案，我很高兴与我以及其他可能处理相同类型问题的人分享。这是代码块。

<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

您的示例工作正常，样式链接中仅缺少 https：：

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

Answer 2

我也遇到了同样的问题，对我来说，解决方法是在文档末尾删除jQuery的第二个内容。 jQuery在标头中加载了app.js，而第二个包含将覆盖第一个包含并导致问题。

Answer 3

如果在本地运行，则需要下载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日期选择器不起作用

4 个答案: