5
5
is12H: @boolean ($timeFormat == ' 12' ),
6
6
readonly: @boolean ($readonly ),
7
7
disabled: @boolean ($disabled ),
8
+ min: @js ($min ? $min -> format (' Y-m-d\TH:i' ) : null ),
9
+ max: @js ($max ? $max -> format (' Y-m-d\TH:i' ) : null ),
8
10
},
9
11
withoutTimezone: @boolean ($withoutTimezone ),
10
- timezone: '{{ $timezone } } ',
11
- userTimezone: '{{ $userTimezone } } ',
12
- parseFormat: '{{ $parseFormat } } ',
12
+ timezone: '{{ $timezone } } ',
13
+ userTimezone: '{{ $userTimezone } } ',
14
+ parseFormat: '{{ $parseFormat } } ',
13
15
displayFormat: '{{ $displayFormat } } ',
14
16
weekDays: @lang (' wireui::messages.datePicker.days' ),
15
17
monthNames: @lang (' wireui::messages.datePicker.months' ),
16
18
withoutTime: @boolean ($withoutTime ),
17
19
})"
18
- class =" relative" >
20
+ class =" relative"
21
+ {{ $attributes -> only (' wire:key' ) } } >
19
22
<x-dynamic-component
20
- :component =" WireUiComponent::resolve ('input')"
21
- {{ $attributes -> whereDoesntStartWith ([' wire:model' , ' x-model' ]) } }
23
+ :component =" WireUi::component ('input')"
24
+ {{ $attributes -> whereDoesntStartWith ([' wire:model' , ' x-model' , ' wire:key ' ]) } }
22
25
:borderless =" $borderless"
23
26
:shadowless =" $shadowless"
24
27
:label =" $label"
@@ -29,23 +32,26 @@ class="relative">
29
32
:prepend =" $prepend"
30
33
readonly
31
34
x-on:click =" togglePicker"
32
- :: value =" getInputValue() " >
35
+ x-bind: value =" model ? getDisplayValue(): null " >
33
36
@if (! $readonly && ! $disabled )
34
37
<x-slot name =" append" >
35
38
<div class =" absolute inset-y-0 right-3 z-5 flex items-center justify-center" >
36
39
<div class =" flex items-center gap-x-2 my-auto
37
40
{{ $errors -> has ($name ) ? ' text-negative-400 dark:text-negative-600' : ' text-secondary-400' } }" >
38
- <x-dynamic-component
39
- :component =" WireUiComponent::resolve('icon')"
40
- class =" cursor-pointer w-4 h-4 hover:text-negative-500 transition-colors ease-in-out duration-150"
41
- x-cloak
42
- name =" x"
43
- x-show =" model"
44
- x-on:click =" clearDate()"
45
- />
41
+
42
+ @if ($clearable )
43
+ <x-dynamic-component
44
+ :component =" WireUi::component('icon')"
45
+ class =" cursor-pointer w-4 h-4 hover:text-negative-500 transition-colors ease-in-out duration-150"
46
+ x-cloak
47
+ name =" x"
48
+ x-show =" model"
49
+ x-on:click =" clearDate()"
50
+ />
51
+ @endif
46
52
47
53
<x-dynamic-component
48
- :component =" WireUiComponent::resolve ('icon')"
54
+ :component =" WireUi::component ('icon')"
49
55
class =" cursor-pointer w-5 h-5"
50
56
:name =" $rightIcon"
51
57
x-on:click =" togglePicker"
@@ -77,7 +83,7 @@ class="cursor-pointer w-5 h-5"
77
83
aria-hidden =" true" >
78
84
</div >
79
85
80
- <div class =" w-full rounded-t-md border border-secondary-200 bg-white transform shadow-lg
86
+ <div class =" w-full rounded-t-md border border-secondary-200 bg-white shadow-lg
81
87
dark:bg-secondary-800 dark:border-secondary-600 transition-all relative
82
88
max-h-96 overflow-y-auto p-3 sm:w-72 sm:rounded-xl"
83
89
x-show =" popover"
@@ -92,31 +98,31 @@ class="cursor-pointer w-5 h-5"
92
98
@unless ($withoutTips )
93
99
<div class =" grid grid-cols-3 gap-x-2 text-center text-secondary-600" >
94
100
<x-dynamic-component
95
- :component =" WireUiComponent::resolve ('button')"
101
+ :component =" WireUi::component ('button')"
96
102
class =" bg-secondary-100 border-none dark:bg-secondary-800"
97
103
x-on:click =" selectYesterday"
98
- label =" {{ __ (' wireui::messages.datePicker.yesterday' ) } } "
104
+ : label =" __('wireui::messages.datePicker.yesterday')"
99
105
/>
100
106
101
107
<x-dynamic-component
102
- :component =" WireUiComponent::resolve ('button')"
108
+ :component =" WireUi::component ('button')"
103
109
class =" bg-secondary-100 border-none dark:bg-secondary-800"
104
110
x-on:click =" selectToday"
105
- label =" {{ __ (' wireui::messages.datePicker.today' ) } } "
111
+ : label =" __('wireui::messages.datePicker.today')"
106
112
/>
107
113
108
114
<x-dynamic-component
109
- :component =" WireUiComponent::resolve ('button')"
115
+ :component =" WireUi::component ('button')"
110
116
class =" bg-secondary-100 border-none dark:bg-secondary-800"
111
117
x-on:click =" selectTomorrow"
112
- label =" {{ __ (' wireui::messages.datePicker.tomorrow' ) } } "
118
+ : label =" __('wireui::messages.datePicker.tomorrow')"
113
119
/>
114
120
</div >
115
121
@endunless
116
122
117
123
<div class =" flex items-center justify-between" >
118
124
<x-dynamic-component
119
- :component =" WireUiComponent::resolve ('button')"
125
+ :component =" WireUi::component ('button')"
120
126
class =" rounded-lg shrink-0"
121
127
x-show =" !monthsPicker"
122
128
x-on:click =" previousMonth"
@@ -139,7 +145,7 @@ class="rounded-lg shrink-0"
139
145
140
146
141
147
<x-dynamic-component
142
- :component =" WireUiComponent::resolve ('button')"
148
+ :component =" WireUi::component ('button')"
143
149
class =" rounded-lg shrink-0"
144
150
x-show =" !monthsPicker"
145
151
x-on:click =" nextMonth"
@@ -154,7 +160,7 @@ class="rounded-lg shrink-0"
154
160
x-transition >
155
161
<template x-for =" (monthName, index) in monthNames" :key =" `month.${monthName}`" >
156
162
<x-dynamic-component
157
- :component =" WireUiComponent::resolve ('button')"
163
+ :component =" WireUi::component ('button')"
158
164
class =" text-secondary-400 dark:border-0 dark:hover:bg-secondary-700 uppercase"
159
165
x-on:click =" selectMonth(index)"
160
166
xs
@@ -165,21 +171,28 @@ class="text-secondary-400 dark:border-0 dark:hover:bg-secondary-700 uppercase"
165
171
166
172
<div class =" grid grid-cols-7 gap-2" >
167
173
<template x-for =" day in weekDays" :key =" `week-day.${day}`" >
168
- <span class =" text-secondary-400 text-2xs text-center uppercase pointer-events-none"
169
- x-text =" day" ></span >
174
+ <span class =" text-secondary-400 text-3xs text-center uppercase pointer-events-none"
175
+ x-text =" day" >
176
+ </span >
170
177
</template >
171
178
172
- <template x-for =" date in dates" :key =" `week-date.${date.day}.${date.month}`" >
179
+ <template
180
+ x-for =" date in dates"
181
+ :key =" `week-date.${date.day}.${date.month}`" >
173
182
<div class =" flex justify-center picker-days" >
174
183
<button class =" text-sm w-7 h-6 focus:outline-none rounded-md focus:ring-2 focus:ring-ofsset-2 focus:ring-primary-600
175
- hover:bg-primary-100 dark:hover:bg-secondary-700 dark:focus:ring-secondary-400"
184
+ hover:bg-primary-100 dark:hover:bg-secondary-700 dark:focus:ring-secondary-400
185
+ disabled:cursor-not-allowed"
176
186
:class =" {
177
- 'text-secondary-600 dark:text-secondary-400': date.month === month && !isSelected(date),
178
- 'text-secondary-400 dark:text-secondary-600': date.month !== month,
179
- 'text-primary-600 border border-primary-600 dark:border-gray-400': date.isToday && !isSelected(date),
180
- 'text-white bg-primary-600 font-semibold border border-primary-600': isSelected(date),
181
- 'hover:bg-primary-600 dark:bg-secondary-700 dark:border-secondary-400': isSelected(date),
187
+ 'text-secondary-600 dark:text-secondary-400': !date.isDisabled && !date.isSelected && date.month === month,
188
+ 'text-secondary-400 dark:text-secondary-600': date.isDisabled || date.month !== month,
189
+ 'text-primary-600 border border-primary-600 dark:border-gray-400': date.isToday && !date.isSelected,
190
+ 'disabled:text-primary-400 disabled:border-primary-400': date.isToday && !date.isSelected,
191
+ '!text-white bg-primary-600 font-semibold border border-primary-600': date.isSelected,
192
+ 'disabled:bg-primary-400 disabled:border-primary-400': date.isSelected,
193
+ 'hover:bg-primary-600 dark:bg-secondary-700 dark:border-secondary-400': date.isSelected,
182
194
}"
195
+ :disabled =" date.isDisabled"
183
196
x-on:click =" selectDate(date)"
184
197
x-text =" date.day"
185
198
type =" button" >
@@ -192,17 +205,17 @@ class="text-secondary-400 dark:border-0 dark:hover:bg-secondary-700 uppercase"
192
205
193
206
<div x-show =" tab === 'time'" x-transition >
194
207
<x-dynamic-component
195
- :component =" WireUiComponent::resolve ('input')"
208
+ :component =" WireUi::component ('input')"
196
209
id =" search.{{ $attributes -> wire (' model' )-> value () } }"
197
210
label =" Select time"
198
211
x-model =" searchTime"
199
- :: placeholder =" modelTime ? modelTime : '12:00' "
212
+ x-bind: placeholder =" getSearchPlaceholder "
200
213
x-ref =" searchTime"
201
214
x-on:input.debounce.150ms =" onSearchTime($event.target.value)"
202
215
/>
203
216
204
217
<div x-ref =" timesContainer"
205
- class =" mt-1 w-full h-52 pb-1 pt-2 overflow-y-auto flex flex-col picker-times" >
218
+ class =" mt-1 w-full max- h-52 pb-1 pt-2 overflow-y-auto flex flex-col picker-times" >
206
219
<template x-for =" time in filteredTimes" >
207
220
<button class =" group rounded-md focus:outline-none focus:bg-primary-100 dark:focus:bg-secondary-700
208
221
relative py-2 pl-2 pr-9 text-left transition-colors ease-in-out duration-100 cursor-pointer select-none
@@ -211,15 +224,15 @@ class="mt-1 w-full h-52 pb-1 pt-2 overflow-y-auto flex flex-col picker-times">
211
224
'text-primary-600': modelTime === time.value,
212
225
'text-secondary-700': modelTime !== time.value,
213
226
}"
214
- :name =" `time .${time.value}`"
227
+ :name =" `times .${time.value}`"
215
228
type =" button"
216
229
x-on:click =" selectTime(time)" >
217
230
<span x-text =" time.label" ></span >
218
231
<span class =" text-primary-600 dark:text-secondary-400 group-hover:text-white
219
232
absolute inset-y-0 right-0 flex items-center pr-4"
220
233
x-show =" modelTime === time.value" >
221
234
<x-dynamic-component
222
- :component =" WireUiComponent::resolve ('icon')"
235
+ :component =" WireUi::component ('icon')"
223
236
name =" check"
224
237
class =" h-5 w-5"
225
238
/>
0 commit comments