Alpine.js +flatpickr 日期时间选择器不工作

Question

我真的很专注于我的项目。我有一个带有 alpine.js 的网站，我想在其中将数据呈现给元素

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

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

尝试：

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

<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：我简化了代码，但仍然无法正常工作，为什么？

<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 已初始化但未显示选择器。

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

如此简单的代码却无法运行:( 我希望你能理解我困惑的特殊问题。

感谢您的帮助，

问候马丁

Answer 1

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

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

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

Alpine.js +flatpickr 日期时间选择器不工作

Alpine.js +flatpickr Datetimepicker is not working

javascript

python

axios

flatpickr

alpine.js