日期选择器在laravel中单击时不显示日历

时间:2019-04-07 11:50:22

标签: laravel datepicker laravel-5.2 php-7.3

我正在尝试使用日期选择器输入创建预订系统,但是单击该控件时不会显示日历。 我已经将所有文件复制到矩阵中,并将它们添加到我的项目中,但是没有任何效果。

这是我用于添加资源的设计刀片代码

    <!DOCTYPE html>
     <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Booking | Client dashboard</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="{{asset('css/backend_css/bootstrap.min.css')}}" />
    <link rel="stylesheet" href="{{asset('css/backend_css/bootstrap-responsive.min.css')}}" />
    <link rel="stylesheet" href="{{asset('css/backend_css/datepicker.css')}}" />
    <link rel="stylesheet" href="{{asset('css/backend_css/uniform.css')}}" />
    <link rel="stylesheet" href="{{asset('css/backend_css/select2.css')}}" />
    <link rel="stylesheet" href="{{asset('css/backend_css/matrix-style.css')}}" />
    <link rel="stylesheet" href="{{asset('css/backend_css/matrix-media.css')}}" />
    <link rel="stylesheet" href="{{asset('css/backend_css/bootstrap-wysihtml5.css')}}" />
    <link href="{{asset('fonts/backend_fonts/css/font-awesome.css')}}" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css"/>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
    <script src="{{asset('js/backend_js/jquery.min.js')}}"></script>
</head>
<body>
    <!--Header part-->
    @include('layouts.clientLayout.client_header')
    <!--End Header part-->
    <!--Sidebar part-->
    @include('layouts.clientLayout.client_sidebar')
    <!--End Sidebar part-->
    <!--main-container-part-->
    @yield('content')
    <!--end-main-container-part-->
    <!--Footer part-->
    @include('layouts.clientLayout.client_footer')
    <!--End Footer part-->
    <!--Jquery-->

    <script src="{{asset('js/backend_js/jquery.ui.custom.js')}}"></script> 
    <script src="{{asset('js/backend_js/bootstrap.min.js')}}"></script> 
    <script src="{{asset('js/backend_js/bootstrap-datepicker.js')}}"></script>
   <script src="{{asset('js/backend_js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('js/backend_js/masked.js')}}"></script> 
    <script src="{{asset('js/backend_js/jquery.uniform.js')}}"></script> 
    <script src="{{asset('js/backend_js/select2.min.js')}}"></script> 
    <script src="{{asset('js/backend_js/matrix.js')}}"></script> 
    <script src="{{asset('js/backend_js/wysihtml5-0.3.0.js')}}"></script> 
    <script src="{{asset('js/backend_js/jquery.peity.min.js')}}"></script> 
    <script src="{{asset('js/backend_js/bootstrap-wysihtml5.js')}}"></script> 
    <script type="text/javascript">$('.textarea_editor').wysihtml5();
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
    <script type="text/javascript">
     function goPage(newURL) {

// if url is empty, skip the menu dividers and reset the menu selection to default
if (newURL != "") {

    // if url is "-", it is this page -- reset the menu:
    if (newURL == "-") {
        resetMenu();
    }
    // else, send page to designated URL            
    else {
        document.location.href = newURL;
    }
}
}
    function resetMenu() {
document.gomenu.selector.selectedIndex = 2;
 }
    </script>
</body>

这就是我创建日期选择器输入的方式

       <div class="control-group">
                            <label class="control-label">Date picker (dd-mm)</label>
                            <div class="controls">
                                <input type="text" data-date="01-02-2013" data-date-format="dd-mm-yyyy" placeholder="01-02-2013" class="datepicker span11" style="width: 220px;">
                                <span class="help-block">Date with Formate of  (dd-mm-yy)</span> </div>
                        </div>

这是在包括设计刀片之后

    @extends('layouts.clientLayout.client_design')
    @section('content')

我该怎么办,因为这几乎与我使用的模板文件中的处理方式相同,只是它们全部位于一个文件中,在这里我将其分解了

1 个答案:

答案 0 :(得分:0)

您添加了日期选择器初始化代码吗?

$('.datepicker').datepicker();

请检查日期选择器的usage并将其插入