Bonjour à tous,
Je patauge dans Livewire.
Le principe c'est un select tag contenant une liste de maisons. L'ID sélectionné dynamiquement sert à préparer l'affichage d'un datepicker (appelé par le input name="arrival" du formulaire) contenant via le beforeshowday des périodes (basse saison, moyenne, haute). Ces périodes varient en fonction de la maison sélectionnée.
Une classe permet le calcul des saisons pour le datepicker.
Mes tentatives sont un échec pour afficher le datepicker dynamiquement.
J'ai entre autre un message d'erreur :
"Livewire component's [select-house] public property [seasonLow] must be of type: [numeric, string, array, null, or boolean]. Only protected or private properties can be set as other types because JavaScript doesn't need to access them. "
Lorsque je clique sur "arrival" il fait appel à la methode datepicker() qui devrait utiliser l'attribut selectedhouse pour afficher le jquery datepicker en fonction de la maison sélectionnée.
Le datepicker à besoin de la ligne
<script>var lowSeason = @json($seasonLow);</script>
pour afficher les saisons.
Je ne sais pas comment faire.
Si qqu'un peut m'aider svp
Voici mon fichier blade
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Sign-up</title>
<!-- Custom styles for this page -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" media="all" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/css/swiper.min.css" media="all" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link href="{{ asset('drupal/dist/styles/main.css') }}" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="{{ asset('css/sign-up.css') }}" rel="stylesheet" type="text/css">
@livewireStyles
</head>
<body>
<section id="home-intro">
<div class="container">
<div class="col-lg-12 ">
<h1 class="heading2">Demande de réservation</h1>
</div>
<form class="form" method="post" action="{{route('newBooking')}}">
@csrf
@method('POST')
@livewire('select-house')
</div>
</section>
<script src="{{asset('js/datepicker2.js') }}"></script>
@livewireScripts
</body>
</html> |
Mes deux fichiers Livewire select-house.blade
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<div>
<div class="form-group row">
<div class="col-md-6">
<label class="control-label " for="house">Votre choix de maison:</label><sup>*</sup>
<select class="form-control input-lg" name="house_id" id="house_id" wire:model="selectedHouse" >
@foreach($houses as $house)
<option class="form-control" value="{{$house->id}}" {{old('house_id') == $house->id ? 'selected' : ''}} >{{$house->name }} {{$house->capacity }}</option>
@endforeach
</select>
{{ $selectedHouse }}
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="control-label " for="arrival">Date d'arrivée:</label><sup>*</sup>
<input wire:click="datepicker" type="text" class="form-control input-lg @error('arrival') is-invalid @enderror" id="from" name="arrival" autocomplete="off" placeholder="Please choose a date..." value="{{old('arrival')}}" />
@error('arrival')
<div class="invalid-feedback">{{ $errors->first('arrival') }}</div>
@enderror
</div>
<div class="col-md-6">
<label class="control-label " for="departure">Date de départ:</label><sup>*</sup>
<input type="text" class="form-control input-lg @error('departure') is-invalid @enderror" id="to" name="departure" autocomplete="off" readonly value="{{old('departure')}}" />
@error('departure')
<div class="invalid-feedback">{{ $errors->first('departure') }}</div>
@enderror
</div>
</div>
<script>
var lowSeason = @json($seasonLow);
</script>
</div> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
namespace App\Http\Livewire;
use Livewire\Component;
use App\House;
use App\Classes\Datepicker;
class SelectHouse extends Component
{
public $selectedHouse = 1;
public $seasonLow;
public function datepicker()
{
$this->seasonLow = new Datepicker($this->selectedHouse);
$this->seasonLow->showSeason('low');
}
public function render()
{
return view('livewire.select-house',[
'houses' => House::all(),
]);
}
} |
Laravel Livewire affichage d'une variable pour datepicker
Répondre avec citation
Partager