Reputation: 33
So, my friend and I have been trying to get this to work, but so far without any success. I want to select a time from an input dropdown using the timepicker, but whenever I try to pass it and add it to the database, I get "null", and I'm not really sure why.
I want to select e.g.: 10:30 and when I press the "booking" button on my page, I want to save that.
show.blade.php timepicker
{{-- 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>
This is what I have in the storebooking controller
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');
}
Upvotes: 0
Views: 526
Reputation: 34868
You can use JQuery on the bottom :
<script type="text/javascript">
$(document).ready(function(){
$('#timepicker').change(function(){
var val = $('#timepicker').val();
$('#time').val(val);
});
});
</script>
And change :
{{ Form::hidden('timeslot', '', ['id' => 'timepicker']) }}
To
{{ Form::hidden('timeslot', '', ['id' => 'time']) }}
Upvotes: 1