Javascript Alpine.js+；FlatPicker日期时间选择器不工作

我在我的项目上真的做砸了。我有一个带有alpine.js的站点，我想在其中向元素呈现数据

在我的FlatPicker没有出现之前，一切都很完美。 日期选择器工作得很好。很明显，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">',
            }
        }

常量fp=flatpicker（“.picker”{
地点：“在”，
minDate：“1930-01”，
maxDate:'今天'，
启用时间：对，
时间24小时：对，
minTime：“07:00”，
maxTime:“20:00”，
日期格式：“d.m.Y H:i”，
残疾移动：“正确”，
静态：错误，
});
函数app（）{
返回{
是的，
modalData:“”，
}
}

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

尝试：

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

const test=document.getElementById（'test'）。innerHTML=''；
常量fp=flatpicker（“.picker”{
地点：“在”，
minDate：“1930-01”，
maxDate:'今天'，
启用时间：对，
时间24小时：对，
minTime：“07:00”，
maxTime:“20:00”，
日期格式：“d.m.Y H:i”，
残疾移动：“正确”，
静态：错误，
});

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

克利克

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

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

功能测试（）{
返回{
日期：''，
秀:假,，
}
}

这样一个简单的代码不起作用：( 我希望你能理解我那令人困惑的特殊问题

谢谢你的帮助

---

向Martin问好这里的问题是初始化

flatpickr

。如果您将它添加到alphine组件的

init

钩子上，它工作得很好。因此，当alphine组件初始化

init

钩子中的代码段时，将执行该钩子。 所以要解决你的问题,

在脚本标签中

函数app（）{
返回{
initflatpicker（）{
常量fp=flatpicker（此$refs.picker{
地点：“在”，
minDate：“1930-01”，
maxDate:“今天”，
启用时间：对，
时间24小时：对，
minTime：“07:00”，
maxTime:“20:00”，
日期格式：“d.m.Y H:i”，
残疾移动：“正确”，
静态：错误，
});
}
}
}

现在，alphine js组件初始化后，将执行

initFlatpickr

函数。 我使用了

refs

，这是设置ID和到处使用

document.querySelector

的一个有用的替代方法。

---

查看以了解更多详细信息。

这似乎是一个时间问题。当alpine.js更新变量时，flatpickr不会显示，但当在alpine.js呈现之前定义类时，它就开始工作了。但这是一个大问题，因为我希望由后端生成一个表单，并使用axios获取数据。所以我真的需要flatpickr和alpine。js可以处理这个问题谢谢你，但这不是我的错。我真的理解你，我喜欢这个答案。错误是alpine.js中的x-html。我从后端服务器得到一个生成的表单，我想把它放在一个模式中，选择器应该在那里工作。你的解决方案的问题是，选择器将被初始化为e表单从服务器返回…我的解决方案现在是使用“document.getElementById（'modalContent'）。innerHTML=this.modalData”代替x-html，当答案来自服务器时。但是谢谢！！

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