Alpine.js +flatpickr Datetimepicker 不工作 [英] Alpine.js +flatpickr Datetimepicker is not working

问题描述

我真的坚持我的项目.我有一个带有 alpine.js 的站点，我想在其中将数据呈现给元素

一切都很完美，直到我的 flatpickr 没有出现.日期选择器工作正常.它接缝，在 alpine.js 中使用的 x-html、x-text 或 document.getElementById().innerHTML 正在工作......

只是一个测试<input class="picker";/>

......

 <脚本>const fp = flatpickr(.picker", {语言环境:在"，minDate:1930-01"，maxDate: '今天',启用时间:真，time_24hr: 真,minTime: "07:00",最大时间:20:00"，日期格式:d.m.Y H:i"，disableMobile:真"，静态:假，});功能应用(){返回 {isOpenModal: 真,modalData: '<输入类='form-control placeholder-primary-500 picker">',}}

在这个非常简单的示例中，显示了 2 个输入字段，但只有第二个显示了 flatpickr.

试试:

• 如果我删除第二个，第一个将不起作用.
• x-text 而不是 x-html 只带来文本 <input ..... >
• 另一方面，没有 alpine.js 它可以工作

更新 30.10.20:我简化了代码，还是不行，为什么?

<button @click="show = true">点击</button><div x-show="show";x-model=daten"x-html=日期"><input class="bg-green-500 picker";/>

显示正确，flatpickr已初始化，但picker未显示.

 函数测试() {返回 {daten:'<input class="bg-red-500 picker";/>',显示:假，}}

这么简单的代码却无法工作:(我希望你能理解我令人困惑的特殊问题.

感谢您的帮助，

问候马丁

解决方案

这里的问题是初始化 flatpickr.如果您将它添加到 alphine 组件的 init 钩子上，它将完美运行.所以当 alphine 组件初始化 init 钩子中的代码段时将被执行.因此，为了解决您的问题，

 
<input x-ref="picker";/>

在脚本标签中，

现在 initFlatpickr 函数将在 alphine js 组件初始化时执行.我已经使用了 refs，它是设置 id 和使用 document.querySelector 的有用替代方法.查看文档了解更多详情.

i really stucked in my project. I have a site with alpine.js where i want to render data to an element

Everything is working perfect until the fact that my flatpickr is not shown up. The datepicker is working perfect. It seams, that x-html, x-text nor document.getElementById().innerHTML used in alpine.js is working ....

<div x-data="app()" x-html="modalData" x-show="isOpenModal" id="test">
 only a test
  <input class="picker" />
</div>

......

    <script>
      const fp = flatpickr(".picker", {
        locale: "at", 
        minDate: "1930-01",
        maxDate: 'today',
        enableTime: true,
        time_24hr: true,
        minTime: "07:00",
        maxTime: "20:00",
        dateFormat: "d.m.Y H:i",
        disableMobile: "true",
        static:false,
              });

     function app(){  
        return {
            isOpenModal: true,
            modalData: '<input class=" form-control placeholder-primary-500 picker">',
            }
        }

in this very simple example 2 input field are shown up, but only the second shows the flatpickr.

Try:

• If i delete the second the first will be not working.
• x-text instead of x-html brings only the text <input ..... >
• on the other hand without alpine.js it is working

<script>
 const test = document.getElementById('test').innerHTML = '<input class="picker" />';
 const fp = flatpickr(".picker", {
            locale: "at",
            minDate: "1930-01",
            maxDate: 'today',
            enableTime: true,
            time_24hr: true,
            minTime: "07:00",
            maxTime: "20:00",
            dateFormat: "d.m.Y H:i",
            disableMobile: "true",
            static:false,
      });
 </script>

UPDATE 30.10.20: I simplified the code, is still not working but why ?

<div x-data="test()">
 <button  @click="show = true"> Klick </button>
    <div  x-show="show" x-model="daten" x-html="daten"> 
 <input class="bg-green-500 picker" />
</div>

it is shown up correctly, flatpickr is initialized but the picker is not shown up.

    function test() {
    return {
        daten:'<input class="bg-red-500 picker" />',
        show: false,
    }
}

such a simple code and not working :( I hope you understand my confusing special problem.

Thanks for helping,

Greets Martin

解决方案

The issue here is initializing the flatpickr. if you add it on the init hook of the alphine component it works perfectly. so when alphine component initializes the code segment in init hook will be executed. So to solve your issue,

 <div x-data="app()" x-init="initFlatpickr">
       <input x-ref="picker" />
 </div>

and in the script tag,

<script> 
     function app() {
            return {
                initFlatpickr() {
                    const fp = flatpickr(this.$refs.picker, {
                        locale: "at",
                        minDate: "1930-01",
                        maxDate: "today",
                        enableTime: true,
                        time_24hr: true,
                        minTime: "07:00",
                        maxTime: "20:00",
                        dateFormat: "d.m.Y H:i",
                        disableMobile: "true",
                        static: false,
                    });
                }
            }
        }
</script>

Now the initFlatpickr function will execute when the alphine js component is initialized. I have made use of refs which is a helpful alternative to setting ids and using document.querySelector all over the place. check out the docs for more detail.

这篇关于Alpine.js +flatpickr Datetimepicker 不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！