问题标签 [flatpickr]

我正在尝试向自定义 vue 组件添加一个简单的日期选择器。我没有使用 webpack，所以我想避免使用现成的.vue组件，我更愿意了解如何将简单的 javascript 添加到 vue。

我正在关注这个官方的 vue 教程

我也看过这个 codepen，但我无法让日期选择器出现。

这是我的jsfiddle：

html:

应用程序.js：

如何在不需要 .vue 文件、webpack 等的情况下轻松地将 vanilla js 集成到 Vue 组件中？

我已经为Flatpickr小部件为 Knockout 编写了一个自定义 bindingHandler 。问题是它在被销毁时会泄漏内存。堆中充满了分离的 DOM 树条目。

我的代码的 Jsfiddle

堆内存截图

明显的嫌疑人是“ko.utils.domNodeDisposal.addDisposeCallback”函数调用。我在 dispose 回调中添加了一个 console.log，控制台正在打印它，所以回调肯定会触发。我还能做些什么来防止这种内存泄漏？

有问题的 bindingHandler：

我正在尝试将-field 中的value=".."-attribute绑定到JsViews observable，以便 JsView 框架检测到从 JS datepicker 所做的更改。<input>

例子

在初始渲染时，数据链接的observedDate参数显示在<input>-field 中：

然后，使用flatpickr javascript 工具选择新日期，新日期将存储在value=".."-field 中：

问题

现在，observedDate处理的日期和value属性之间存在差异：

JsViews 没有检测到 value-attribute 的变化。

有人对如何处理这种情况有一些建议吗？谢谢。

我有一个日期选择器，它以数据时间格式返回我的数据。我需要将此数据传递给我的 api，它接受 YYYY-MM-DD 格式的数据。

我有：

前两个控制台日志在控制台中正确输出，Tue May 02 2017 00:00:00 GMT-0300 (-03)并且Tue May 09 2017 00:00:00 GMT-0300 (-03)

也适用于一个简单的.toISOString().slice(0,10).replace(/-/g,"-"))js 文件，我还尝试了一个函数：

这在一个简单的 js 文件中也可以正常工作。但是，在 vue.js 中使用任何一个时，都会出现以下错误：

但是即使我有这些错误 axios 调用了正确的数据，所以参数实际上是以正确的格式传递的。为什么会这样？我怎样才能摆脱这些错误？

datepicker 库是flatpickr

Ps 我不确定它是否相关，但我正在使用这个事件发射器在我的 eventpicker vue.js 应用程序和加载图表等的所有其他 vue.js 应用程序之间传输 startDate 和 endDate 变量。

我正在为 Flatpickr 使用以下实例化代码。

我遇到的问题是moment().format("YYYY-MM-DD HH:MM:SS");给了我正确的数据，但输出$("#entry_date_time").val()等于

2017201720172017-JanJan-SatSat 0000:JanJan:0000

而不是我提供的预期格式。

关于可能导致这种情况的任何想法都会很棒，感谢您的帮助！

我一直试图解决这个问题好几个小时，却一无所获。

好的，所以我有一个使用开始和结束日期保存员工假期的数据库表，所以它是一个范围。如果是一天，它将是同一日期，但通常是一个范围。

我在我的网站上使用 Flatpickr 来预订特定日期和时间的工作，但我需要禁用所选工作人员不可用的日期。当用户选择一名员工时，会对数据库中的假期表进行 ajax 调用，并获取任何假期日期，将它们放入一个数组中，然后以 JSON 形式将其返回给 ajax。这是我的电话（$(this).val()指的是人员下拉菜单，这将在更改时运行）：

get-availability 中的 PHP 如下：

回到 ajax，我需要按如下方式布局我的 flatpickr 配置（日期只是示例）：

但是我的 dateObj 每次都会被覆盖，所以它只会添加 LAST 日期范围：

基本上，我需要知道如何正确调整 $.each 循环以获得与上面第一个示例类似的结果，但没有任何效果。到目前为止，我已经尝试过：

然后将其设为数组并尝试：

但是每一个都失败了。我希望有人可以帮助我解决这个问题！

我正在尝试将flatpickr包装到一个自定义 Vue 组件中，然后该组件应该将日期发送到 eventHub，但是我似乎无法让它工作。不知何故flatpickr找不到输入字段（我认为）

我的包装器组件看起来像这样：

我也尝试过使用.class-name但没有。我究竟做错了什么？

我想使用一个简单的指令来将flatpickr与 vue.js 一起使用，就像作者在这里建议的那样：

我创建了一个简单的小提琴来看看这是否有效。在桌面上一切都很好，但是当切换到移动模式（通过 chrome 开发工具）并按“运行”时，不会创建所需的输入。仅hidden创建输入（通过检查查看）。

任何人都知道这可能导致这种情况吗？

我使用flatpickr angular 1.5.0，es6 env，flatpickr 版本是3.0.6，我绑定了一个输入事件打开flatpickr，当日历打开时，它立即关闭，但是当我使用触摸板点击输入时，不是点击，它运作良好。问题是什么？

我尝试使用jQuery绑定事件，结果是一样的。我的操作系统是 Mac。

我的片段：

我在官方issue中问过，维护人员说不是插件本身的问题。

我该如何解决？

我在一个项目中使用了令人惊叹的flatpickr，并且需要强制使用日历日期。

我试图在本机 HTML 中进行所有验证，所以我天真地尝试将required属性添加到输入标记，但这似乎不起作用。

有没有办法使用 flatpickr 本地强制指定日期，或者我是否需要编写一些自定义检查？