无法从JQuery时间选择器获取值

Question

所以，我和我的朋友一直在努力实现这一点，但到目前为止没有任何成功。我想使用时间选择器从输入下拉列表中选择一个时间，但每当我试图传递它并将其添加到数据库时，我都会得到"；空"；，我真的不知道为什么。

我想选择例如：10:30，当我按下"0"键时；预订"；按钮，我想保存它。

show.blade.php时间选择器

{{-- Timepicker --}}
{{-- Source: https://timepicker.co/ --}}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<script>
// Timepicker
$(function () {
$('input.timepicker').timepicker({
altField: "#timeslot",
timeFormat: 'HH:mm',
interval: 30,
minTime: '10',
maxTime: '6:00pm',
// defaultTime: '11',
startTime: '10:00',
dynamic: false,
dropdown: true,
scrollbar: true
});
});
</script>
<div class="row">
<div class="col-sm-7 text-center">
{{-- <h4>@include('inc.todaydate')</h4> --}}
<h3 class="text-uppercase">Select a date</h3>
<div id="datepicker" class="text-center"></div>
<br>
<h3 class="text-uppercase">Select a time slot</h3>
<input id="timepicker" type="text" class="timepicker text-center">
</div> <!-- col-sm-8 end -->
<div class="col-sm-1">
</div>
<div class="col-sm-4">
{!! Form::open(['action' => 'PagesController@storebooking', 'method' => 'POST']) !!}
<div class="form-group"></br>
<h3 class="text-center">Selected Service</h3>
<hr class="featurette-divider">
{{-- <h4>{{$service_id}}</h4> --}}
<h4 class="float-left">{{$service_name}}</h4>
<h4 class="float-right">£ {{$service_price}}</h4>
<br>
{{Form::hidden('service_id', $service_id, ['class' => 'form-control', 'placeholder' => 'Service ID'])}}
{{Form::hidden('service_name', $service_name, ['class' => 'form-control', 'placeholder' => 'Service Name'])}}
{{Form::hidden('service_price', $service_price, ['class' => 'form-control', 'placeholder' => 'Service Price'])}}
{{-- {{Form::hidden('service_price', $service_length, ['class' => 'form-control', 'placeholder' => 'Service Price'])}} --}}
</div>
<div class="form-group"></br>

{{Form::hidden('dateofbooking', '', ['id' => 'dateofbooking'])}}
{{Form::hidden('timeslot', '', ['id' => 'timepicker'])}}
</div>
{{Form::submit('Book Appointment', ['class' => 'submitbtn btn btn-primary btn-lg btn-block', 'style' => 'border-radius: 20px;'])}}
{!! Form::close() !!}
</div>
</div> <!-- col-sm-4 end -->
</div>

这是我在商店预订控制器中的

public function storebooking(Request $request)
{
$bookings = new Booking;
$bookings->user_id = auth()->user()->id;
$bookings->username = auth()->user()->username;
$bookings->firstname = auth()->user()->firstname;
$bookings->surname = auth()->user()->surname;
$bookings->email = auth()->user()->email;
$bookings->service_id = $request->input('service_id');
$bookings->service_name = $request->input('service_name');
$bookings->service_price = $request->input('service_price');
$bookings->dateofbooking = $request->input('dateofbooking');
$bookings->timeslot = $request->input('timepicker');
dd($request->all()); // for debugging
$bookings->save();
return redirect('history')->with('success', 'Appointment Booked');
}

Answer 1

您可以在底部使用JQuery：

<script type="text/javascript">
$(document).ready(function(){
$('#timepicker').change(function(){
var val = $('#timepicker').val();
$('#time').val(val);
});
});
</script>

和变化：

{{ Form::hidden('timeslot', '', ['id' => 'timepicker']) }}

至

{{ Form::hidden('timeslot', '', ['id' => 'time']) }}