【发布时间】：2021-05-14 10:32:28
【问题描述】：
您好，我正在处理项目，我的 bootstrap datepicker 出现问题，它无法正确显示，我不知道是什么原因导致它可能是我的脚本，但我尝试根据它们的版本来安排脚本，但是还是不行。我在css上有冲突吗？我被困在这个错误上。请帮我解决这个问题。
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css" />
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
@php
$users =App\Models\User::select('name','id')->where('email',Auth::user()->email)->get();
$getcurrentId = App\Models\User::select('id')->where('email',Auth::user()->email)->get();
$d = new DateTime();
$date = $d->format('Y-m-d');
$current_date = date('Y-m-d');
$infos= App\Models\User::all();
$empattendance= App\Models\Attendance::select('Name','CheckIn','CheckOut','Note','Date','TotalHours')->where('Date','=',$current_date)->get();
foreach($getcurrentId as $gId)
{
$currentUser= App\Models\Attendance::orderBy('id','DESC')->select('id','Name','CheckIn','CheckOut','Note','Date','TotalHours')->where('user_id','=',$gId->id)->get();
}
@endphp
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header" style="background-color:#007bff;">
<h3 class="card-title" style=" color:white;">
Attendance</h3>
</div>
<!-- /.card-header -->
<div class="card-body">
<!-------------------------------------------------------------------------------------------------------------------->
<div class="info">
<div class="row">
<input type="text" class="form-control" id="empid" name="name" style="display:none;">
<div class="col-md-4">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<div class="col-md-4">
<label for="name">Position</label>
<input type="text" class="form-control" id="position" name="position">
</div>
<div class="col-md-4">
<label for="name"></label>
<button type="button" class="btn btn-primary selectemp" style="margin-top:30px;" data-toggle="modal" data-target="#exampleModalLong">Select Employee</button>
</div>
<div class="col-md-4">
<label for="name">Date Start</label>
<input class="date form-control" type="text" id="datepickerstart" name="datepickerstart">
</div>
</div>
<div class="btnbrowse">
</div>
<table class="table table-striped" id="admindatatable" style="margin:0 auto;">
<thead>
<tr>
<!--<th style="text-align : center;">ID</th>-->
<th style="text-align : center;">Name</th>
<th style="text-align : center;">Check In</th>
<th style="text-align : center;">Check Out</th>
<th style="text-align : center;">Note</th>
<th style="text-align : center;">Total</th>
<th style="text-align : center;">Date</th>
</tr>
</thead>
<tbody>
<tr>
<!--<td style="text-align : center;" class="id"></td>-->
<td style="text-align : center;" class="id"></td>
<td style="text-align : center;" class="checkin"></td>
<td style="text-align : center;" class="checkout"></td>
<td style="text-align : center;" class="note"></td>
<td style="text-align : center;" class="note"></td>
<td style="text-align : center;" class="date"></td>
</tr>
</tbody>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Check In</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to Check In?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="submit" class="btn btn-success btnConfirmCheckIN">Yes</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="confirmModalCheckOut" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Check Out</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to Check Out?
</div>-
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="submit" class="btn btn-danger btnConfirmCheckOut">Yes</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Employee</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<table class="table" id="emplist" style="margin:0 auto;">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th style="display:none;">Position</th>
</tr>
</thead>
@foreach ($infos as $info)
<tbody>
<tr>
<td class="id">{{ $info->id}}</td>
<td class="emplistname">{{$info->name}}</td>
<td class="emplistname" style="display:none;">{{$info->position}}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary btnselect">Select</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.23/jquery-ui.min.js" integrity="" sha256-sefm2ay87nr5kce4f+rtmbkkxbqhec2uehgnptoa5xi="" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<!--<script type="text/javascript" src="jquery-1.11.1.min.js"></script>-->
<script>
jQuery.browser = {};
(function () {
jQuery.browser.msie = false;
jQuery.browser.version = 0;
if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
jQuery.browser.msie = true;
jQuery.browser.version = RegExp.$1;
}})();
$(document).ready(function(){
var $j = jQuery.noConflict();
$j('#datepickerstart').datepicker({
autoclose: true,
format: 'yyyy-mm-dd'
});
var date = new Date();
var val=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()
$('.labelDate').text(val);
//$("#datepicker").val(val);
//alert("test");
$j('#datatable').DataTable();
$j('#admindatatable').DataTable();
$j('#empdatatable').DataTable();
$('.checkin').click(function(){
var clock = $('#clock').text();
var data = $('#userClock').val(clock);
});
$('.selectemp').click(function(){
// $('#admindatatable').css("display","none");
});
$('.btntest').click(function(){
//$('#admindatatable').css("display","block");
});
$('#emplist tr').click(function(){
$(this).toggleClass('selected');
});
var selectedrow;
$('#emplist tr').click(function(e) {
$('#emplist tr').removeClass('selected');
$(this).addClass('selected');
selectedrow = $(this);
});
$('.btnselect').click(function(){
var td = selectedrow.children('td');
var id = td.eq(0).text();
var name = td.eq(1).text();
var pos =td.eq(2).text();
$('#name').val(name);
$('#position').val(pos);
$('#empid').val(id);
$("#exampleModalLong").modal().hide();
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
});
});
</script>
【问题讨论】：
标签： jquery laravel bootstrap-4 jquery-ui-datepicker