DateTime picker in laravel not showing Calender selection

user_16261522 0
Viewed 570
@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

Hi everyone I am pretty new to using laravel and php and feeling so defeated at the moment. I have tried just about every method I could find online to add a DateTime picker to my laravel blade.

While an input box is displayed the calender UI never pops up and I cant select a date. I have attached the entire code within the blade, if someone could help me solve this it would be greatly appreciated

laravel datetimepicker html php jquery
1 Answers

Change this: You forgot # because it's an ID

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

As I understand Laravel you can include the js scripts in your layouts template to have all scripts centralized.

$(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>

user_120942830
Related