Sep 8, 2022
0
Level 1
Livewire issue with inline data calender
Hi
i am facing one issue with inline bootstrap date calender. In my form i am having reservation type and when i am changing the reservation type that time my inline calender disappear. And when we inspect it in browser it lost its all the primary div structure of calender " "
bookingform.blade.php
<div class="col-12 col-lg-4 booking-form">
<div class="shadow p-6 rounded-lg">
<form action="">
@csrf
<h2 class="fw-500 fs-28 text-primary">Starts from {{ $product->price_starts }}</h2>
<div id="kt_datepicker_6" class="d-flex justify-content-center"></div>
{{-- <img src="{{asset('frontend/images/Calendar.png')}}" class="pt-4" alt=""> --}}
<div>
<select name="" id="" wire:model='fetch_reservation_type' class="pt-2 pb-2 pl-1 pr-1 border border-muted rj-rounded mt-4 w-100 d-flex text-left fs-14 rj-tfont"
style="background-color:#ffff" required>
<option value="" id="" class="">Choose your reservation type</option>
<option value="specific" >Fixed</option>
<option value="fullday" >Full Day</option>
<option value="multipleday" >Multiple Day</option>
</select>
</div>
<div class="border border-muted rj-rounded w-100 mt-4 d-flex justify-content-between ">
<p class="col-6 col-lg-7 text-dark pl-2 m-0 rj-tfont d-flex align-items-center justify-content-between ">Number of people <small class="text-muted">2 max</small></p>
{{-- <p class="m-0">1</p> --}}
{{-- <div class="center"> --}}
{{-- <p>
</p> --}}
<div class="col-sm-4 p-0 d-flex align-items-center">
{{-- <p class="text-dark pl-1 m-0">Number of people <small class="text-muted">2 max</small></p> --}}
<span class="input-group-btn rounded-circle">
<button type="button" class="btn btn-number rounded-circle btn-white p-0 m-0" disabled="disabled" data-type="minus"
data-field="quant[1]">
<span class="rj-brd-min bg-white rounded-circle fw-bold fs-10 px-1 m-0">−</span>
</button>
</span>
<input type="text" name="quant[1]" class="input-number border-none fs-30 p-0 w-50 h-75 text-center rj-blk" value="1" min="1" max="10">
<span class="rounded-circle bg-white">
<button type="button" class="btn btn-number p-0 m-0 rounded-circle btn-white bg-white" data-type="plus" data-field="quant[1]">
<span class="border border-primary text-primary bg-white rounded-circle fw-bold fs-10 px-1 m-0">+</span>
</button>
</span>
</div>
</div>
<div class="border-top mt-5">
<p class="text-dark mt-2 mb-0 d-flex justify-content-between">{{ $product->name }} <span class="text-primary">250 €</span></p>
<p class="text-dark mt-1 d-flex justify-content-between">Number of people <span class="text-primary">150 €</span></p>
<p class="text-dark mt-n2 d-flex justify-content-between">Reservation <span class="text-primary">{{ $product_cost->reservation }} €</span></p>
<p class="text-dark rj-tfont d-flex justify-content-between font-weight-bold">Total <span class="text-primary">416 €</span></p>
</div>
<div class="d-flex justify-content-center">
<button class="btn btn-primary btn-lg btn-block radius-30 hover-btn">Book Now </button>
</div>
</form>
</div>
</div>
Bookingform.php
<?php
namespace App\Http\Livewire\Frontend\Boat\Detail;
use App\Models\ProductTime;
use App\Models\ProductTimeAssign;
use Livewire\Component;
class Bookingform extends Component
{
public $product;
public $fetch_reservation_type = "specific"; // default reservation type
// public $product_cost;
public function render()
{
$product_cost = ProductTime::join('product_time_assign','product_time_assign.product_time_assign_id','=','product_timing.id')
->where([
'product_timing.time_type' => $this->fetch_reservation_type,
'product_time_assign.product_id' => "16"
])->first();
return view('livewire.frontend.boat.detail.bookingform',['product_cost'=> $product_cost]);
}
}
i am looking for any suggestion regarding the above issue.
Please or to participate in this conversation.