laravel 中的日期时间选择器不显示日历选择

Question

@section('styles')

<link rel="stylesheet" type="text/css" href="{{asset('node_modules/timepicker/jquery.timepicker.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('node_modules/js-datepicker/datepicker.css')}}">

<style>
    h2, p
    {
        color: #ffffff;
    }
</style>

@include('includes.user_profile_styles')

@endsection

@section('content')

@extends('layouts.app')

<div class="container">
    <div class="row">
        
    <div class="col-12 col-md-9 order-md-2">
        <br />
        <h2>Leagues & Teams</h2><hr />       
        <label>Date</label>
        <input type="text" class="form-control" name="date" id="date" readonly required>
        
    </div>
    @include('includes.user_side_panel')<!-- side panel -->
</div>
@endsection

@section('scripts')
<script type="text/javascript" src="{{asset('node_modules/timepicker/jquery.timepicker.min.js')}}"></script>
<script type="text/javascript" src="{{asset('node_modules/js-datepicker/datepicker.min.js')}}"></script>
<script type="text/javascript" src="{{asset('node_modules/moment/min/moment.min.js')}}"></script>

<script>
  $(function() {
    $( "date" ).datepicker({
    // dateFormat: 'dd/mm/yyyy',
    dateFormat: 'd/m/Y',
    changeMonth: true,
    changeYear: true});
    });
  </script>
@endsection

大家好，我对使用 laravel 和 php 还是很陌生，现在感觉很失败。 我已经尝试了几乎所有可以在网上找到的方法，将 DateTime 选择器添加到我的 laravel 刀片中。

显示输入框时，日历 UI 从未弹出，我无法选择日期。我已将整个代码附在刀片中，如果有人可以帮助我解决这个问题，将不胜感激

Answer 1

改变这个： 你忘记了 # 因为它是一个 ID

$('#date').datepicker({)}

据我了解 Laravel，您可以在布局模板中包含 js 脚本以集中所有脚本。

$(function() {
  $("#date").datepicker({
    dateFormat: 'd/m/Y',
    changeMonth: true,
    changeYear: true
  });
});

h2,
p {
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/1.0.10/datepicker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/1.0.10/datepicker.min.js"></script>
<div class="container">
  <div class="row">

    <div class="col-12 col-md-9 order-md-2">
      <br />
      <h2>Leagues & Teams</h2>
      <hr />
      <label>Date</label>
      <input type="text" class="form-control" name="date" id="date" readonly required>

    </div>
  </div>