如何使 flatpickr datepicker 在 livewire / alpinejs 应用程序中具有反应性?
How to make flatpickr datepicker reactive in livewire / alpinejs app?
在我的 laravel 7 /livewire 1.3 / alpinejs 2 项目中
我从 https://flatpickr.js.org 添加了 flatpickr datepicker
datepicker 工作正常,但反应式不起作用。在下面的代码中
$current_operation_date - public var in the component and is modified ok
但是在选择日期选择器值时,alpine var operation_date 不会更改:
<div>
$current_operation_date::{{$current_operation_date}}<BR>
operation_date::<div x-html="operation_date"></div>
<!-- The line above is not modified when in datepicker value is selected -->
<div x-data="{ operation_date: '{{$current_operation_date}}'}">
<input
type='text'
id="flatpickr_operation_date"
wire:model.lazy="current_operation_date"
x-model="operation_date"
x-on:blur="$dispatch('input', operation_date)"
class="form-control editable_field"
/>
</div>
</div>
@section('scripts')
<script>
$(document).ready(function(){
var fp = flatpickr(document.querySelector('#flatpickr_operation_date'), {
enableTime: false,
dateFormat: 'Y-m-d',
altFormat: "F j, Y",
altInput: true,
inline: false,
locale: "es",
"minDate": "2020-7-12",
"maxDate": "2020-9-12",
defaultDate: ["2020-9-10"],
onChange: function(selectedDates, dateStr, instance) {
console.log('selectedDates::')
console.log(selectedDates) //valid
console.log('date: ', dateStr);
}
});
});
</script>
@endsection
<style>
...
是否有办法让它具有反应性?
谢谢!
在 Livewire 2.7、alpine 3.4 和 Laravel 8 中使用 TALL 堆栈
这是我目前的解决方案
components/inputs/date.blade.php
@props(['options' => []])
@php
$options = array_merge([
'dateFormat' => 'Y-m-d',
'enableTime' => false,
'altFormat' => 'j F Y',
'altInput' => true
], $options);
@endphp
<div wire:ignore>
<input
x-data="{
init() {
flatpickr(this.$refs.input, {{json_encode((object)$options)}});
}
}"
x-ref="input"
type="text"
{{ $attributes->merge(['class' => 'form-input w-full rounded-md shadow-sm']) }}
/>
</div>
那我是这样用的:
<x-inputs.date id="flatpickr_operation_date" wire:model="current_operation_date" />
双向
更深入一点,当我们想要从 Livewire 组件动态更改日期并且我们希望日期也能在 flatpickr 中更新时,这是我当前的解决方案
这是我目前的解决方案
@props(['options' => []])
@php
$options = array_merge([
'dateFormat' => 'Y-m-d',
'enableTime' => false,
'altFormat' => 'j F Y',
'altInput' => true
], $options);
@endphp
<div wire:ignore>
<input
x-data="{
value: @entangle($attributes->wire('model')),
instance: undefined,
init() {
$watch('value', value => this.instance.setDate(value, false));
this.instance = flatpickr(this.$refs.input, {{ json_encode((object)$options) }});
}
}"
x-ref="input"
x-bind:value="value"
type="text"
{{ $attributes->merge(['class' => 'form-input w-full rounded-md shadow-sm']) }}
/>
</div>
在我的 laravel 7 /livewire 1.3 / alpinejs 2 项目中 我从 https://flatpickr.js.org 添加了 flatpickr datepicker datepicker 工作正常,但反应式不起作用。在下面的代码中 $current_operation_date - public var in the component and is modified ok 但是在选择日期选择器值时,alpine var operation_date 不会更改:
<div>
$current_operation_date::{{$current_operation_date}}<BR>
operation_date::<div x-html="operation_date"></div>
<!-- The line above is not modified when in datepicker value is selected -->
<div x-data="{ operation_date: '{{$current_operation_date}}'}">
<input
type='text'
id="flatpickr_operation_date"
wire:model.lazy="current_operation_date"
x-model="operation_date"
x-on:blur="$dispatch('input', operation_date)"
class="form-control editable_field"
/>
</div>
</div>
@section('scripts')
<script>
$(document).ready(function(){
var fp = flatpickr(document.querySelector('#flatpickr_operation_date'), {
enableTime: false,
dateFormat: 'Y-m-d',
altFormat: "F j, Y",
altInput: true,
inline: false,
locale: "es",
"minDate": "2020-7-12",
"maxDate": "2020-9-12",
defaultDate: ["2020-9-10"],
onChange: function(selectedDates, dateStr, instance) {
console.log('selectedDates::')
console.log(selectedDates) //valid
console.log('date: ', dateStr);
}
});
});
</script>
@endsection
<style>
...
是否有办法让它具有反应性?
谢谢!
在 Livewire 2.7、alpine 3.4 和 Laravel 8 中使用 TALL 堆栈 这是我目前的解决方案
components/inputs/date.blade.php
@props(['options' => []])
@php
$options = array_merge([
'dateFormat' => 'Y-m-d',
'enableTime' => false,
'altFormat' => 'j F Y',
'altInput' => true
], $options);
@endphp
<div wire:ignore>
<input
x-data="{
init() {
flatpickr(this.$refs.input, {{json_encode((object)$options)}});
}
}"
x-ref="input"
type="text"
{{ $attributes->merge(['class' => 'form-input w-full rounded-md shadow-sm']) }}
/>
</div>
那我是这样用的:
<x-inputs.date id="flatpickr_operation_date" wire:model="current_operation_date" />
双向
更深入一点,当我们想要从 Livewire 组件动态更改日期并且我们希望日期也能在 flatpickr 中更新时,这是我当前的解决方案
这是我目前的解决方案
@props(['options' => []])
@php
$options = array_merge([
'dateFormat' => 'Y-m-d',
'enableTime' => false,
'altFormat' => 'j F Y',
'altInput' => true
], $options);
@endphp
<div wire:ignore>
<input
x-data="{
value: @entangle($attributes->wire('model')),
instance: undefined,
init() {
$watch('value', value => this.instance.setDate(value, false));
this.instance = flatpickr(this.$refs.input, {{ json_encode((object)$options) }});
}
}"
x-ref="input"
x-bind:value="value"
type="text"
{{ $attributes->merge(['class' => 'form-input w-full rounded-md shadow-sm']) }}
/>
</div>