Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

wontonesaju's avatar

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">&#8722;</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 &#128;</span></p>
                <p class="text-dark mt-1 d-flex justify-content-between">Number of people <span class="text-primary">150 &#128;</span></p>
                <p class="text-dark mt-n2 d-flex justify-content-between">Reservation <span class="text-primary">{{ $product_cost->reservation }} &#128;</span></p>
                <p class="text-dark rj-tfont d-flex justify-content-between font-weight-bold">Total <span class="text-primary">416 &#128;</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.

0 likes
0 replies

Please or to participate in this conversation.