Alpine.js + flatpickr Datetimepicker无法正常工作 [英] Alpine.js +flatpickr Datetimepicker is not working

问题描述

我真的陷在我的项目中.我有一个alpine.js网站，我想在其中将数据呈现到元素

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

一切正常，直到没有出现我的拾音器的事实为止.日期选择器运行完美.它表明，alpine.js中使用的x-html，x-text或document.getElementById().innerHTML都可以正常工作....

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">',
            }
        }

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

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

尝试:

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

• 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>

更新30.10.20:我简化了代码，仍然无法正常工作，但是为什么呢?

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>

它正确显示，flatpickr已初始化，但选择器未显示.

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.

感谢您的帮助，

问候马丁

推荐答案

此处的问题是初始化 flatpickr .如果将其添加到Alphine组件的 init 钩子上，则可以完美运行.因此，当Alphine组件初始化 init 挂钩中的代码段时，将执行该代码段.所以要解决您的问题，

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>

并在脚本标签中

<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>

现在，当初始化Alphine js组件时，将执行 initFlatpickr 函数.我已经使用了 refs ，它是设置ID并在各处使用 document.querySelector 的有用替代方法.查看文档以获取更多详细信息.

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屋！