Alpine.js +flatpickr Datetimepicker 不工作

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了解更多详情。