Laravel:datepicker无效

时间:2017-07-19 09:16:40

标签: php jquery laravel jquery-ui jquery-ui-datepicker

我需要帮助。 datepicker没有处理laravel视图文件请帮助如何使其正常工作

对于Live文件,我使用过:

{!! Html::script('http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css') !!}
{!! Html::script('https://code.jquery.com/ui/1.12.1/jquery-ui.js') !!}

<style>
    col-sm-2 control-label{
        text-align: left !important;
    }
</style>

在输入框中我输入了id =&#34; datepicker&#34;

2 个答案:

答案 0 :(得分:7)

您必须将class="datepicker"放在输入中,如下所示:

<input class="form-control datepicker">

你需要添加一些脚本:

<script>
    jQuery(document).ready(function($) {
        $('.datepicker').datepicker({
            dateFormat: "yy-mm-dd"
        });
    });
</script>

<强>更新

这是包含必要文件的整个HTML页面。

<html lang="en">

<head>

    <title>Jquery - Datepicker Example using jquery ui</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">

    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">   

</head>

<body>


<div class="container text-center">

     <h2>Jquery - Datepicker Example using jquery ui</h2>

     <strong>Select Date:</strong> <input type="text" id="datepicker" class="from-control">

</div>  


<script type="text/javascript">

    $( "#datepicker" ).datepicker();

</script>


</body>

</html>

希望这对你有所帮助。

答案 1 :(得分:0)

在您的app.blade.php中添加这些代码行

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet" type="text/css" /> 

之后,在刀片中添加date作为输入类型。

<input type="date" class="form-control" id="dob" name="dob">