如何解决如何在livewire / alpinejs应用中使Flatpickr Datepicker具有反应性?
在我的laravel 7 / livewire 1.3 / alpinejs 2项目中 我从https://flatpickr.js.org添加了flatpickr datepicker datepicker可以正常工作,但反应式则行不通。在下面的代码中 $ current_operation_date-组件中的公共变量,已被修改确定 但是,当在日期选择器值被选择高山变种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>
...
是否有使其反应的方法?
谢谢!
解决方法
将TALL堆栈与Livewire 2,alpine 2.7和Laravel 8一起使用 这是我目前的解决方案
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
x-init="flatpickr($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" />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。