JQueryUI DatePicker не работает - PullRequest
Новая
       6

JQueryUI DatePicker не работает

0 голосов
/ 31 октября 2018

Я работал над проектом, и я хотел использовать 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>

Ответы [ 4 ]

0 голосов
/ 31 октября 2018

Я пользуюсь этим ... Надеюсь, это поможет. 

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

0 голосов
/ 31 октября 2018

У меня была такая же проблема, и исправлением для меня было удаление второго включения jQuery в конце документа. jQuery загружается с app.js в заголовке, и второе включение для этого перезаписывает первое включение и вызывает проблемы.

0 голосов
/ 31 октября 2018

Если вы работаете локально, вам нужно скачать или включить 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

0 голосов
/ 31 октября 2018

Ваш пример работает нормально, отсутствует только https: в стиле ссылки:

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

...