问题标签 [flatpickr]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
3261 浏览

css - 在 Laravel 中使用 npm 安装 flatpickr 时如何加载 CSS?

我有一个 Laravel 项目,并尝试按照以下页面在其中使用 flatpickr:
https ://flatpickr.js.org/getting-started/

我能够通过安装 flatpickrnpm i flatpickr --save并将其正确导入到 JS 代码中并通过 使用它import flatpickr from "flatpickr";,但我的问题是:如何将 CSS 也放入项目中?

我最终使用了link上面 flatpickr 文档链接中引用的以下 HTML 标记:

但我想知道是否有更好的方法将 flatpickr 的 CSS 放入我的项目中。

也就是说,当您使用 npm 安装包并将其导入 JS 时,CSS 是否有类似的东西,或者我们是否需要使用传统link标签包含 CSS,这是我们唯一的选择?

我在文档中或通过 Google 找不到任何关于如何执行此操作的内容,所以我真的很想知道。谢谢。

0 投票
1 回答
2082 浏览

reactjs - 通过包装组件控制 Flatpickr 日历视图的打开/关闭

我不想为 Flatpickr 提供意见。相反,它应该通过单击 div 来触发,然后显示日历视图。

在此处输入图像描述

基本上我需要使用 className custom-date-picker-panel 和 onChange 在 div 中显示日历视图,我通过一个函数来更新 div 的能力

你能告诉我如何实现吗?

0 投票
2 回答
2400 浏览

typescript - Vue Typescript Flatpickr this.$refs.field 不可分配给“字符串”类型的参数

TypescriptVuewithFlatpickrVeevalidateas 包中。

错误线this.fp = new Flatpickr(this.$refs.field, {})

错误:'元素 | 类型的参数 元素[] | Vue | Vue[]' 不可分配给“字符串”类型的参数。类型“元素”不可分配给类型“字符串”。

0 投票
1 回答
531 浏览

vuejs2 - 以编程方式重置 vue-flatpickr 上的配置选项

我有一个由 vue-flatpickr-component 组成的 vue 日期组件。当然,当我将配置选项作为道具传递时,它们会按预期工作,但是,如果想要更改应该可能的配置选项之一,它不会向下传播。我不是 Vue 大师,任何建议都会有所帮助。

我在 Laravel 应用程序中使用页面组件,它不应该是相关的,但是,以防万一有人用 vuex 或 vue-router 回答,这些在这里不起作用。

以下是 page.vue 中的表单元素:

这是驱动配置更改的计算属性:

When a different home visit specialist is chosen, it will update with Vue's reactivity.

我有一个计算属性更改配置选项。以下是 MaterialDate.vue 文件中的道具数据和相关计算属性:

这当然永远不会更新启用的日期选项,因为道具是不可变的,我需要访问set(option, value)由 vue-flatpickr-component 包装的部分。但是,我的 Vue kungfu 还不够强大,无法对它进行源代码潜水以查看我如何访问它并以编程方式调用set('enabled', [new dates]).

0 投票
1 回答
1495 浏览

angular - 使用 angularx-flatpickr 在 Angular 上加载语言环境时出错

将语言环境添加到角度组件的指令中:

尝试加载语言环境时,返回错误:

错误:flatpickr:无效的语言环境葡萄牙语

在 setupLocale (flatpickr.js:1910) 在 init (flatpickr.js:581) 在 FlatpickrInstance (flatpickr.js:2419) 在 _flatpickr (flatpickr.js:2438) 在 flatpickr (flatpickr.js:2463) 在 FlatpickrDirective.push。 ./node_modules/angularx-flatpickr/fesm5/angularx-flatpickr.js.FlatpickrDirective.ngAfterViewInit (angularx-flatpickr.js:295) 在 callProviderLifecycles (core.js:22416) 在 callElementProvidersLifecycles (core.js:22390) 在 callLifecycleHooksChildrenFirst (core .js:22380) 在 checkAndUpdateView (core.js:23316)

0 投票
0 回答
87 浏览

javascript - 如何从 onChange 中的 selectedDates 中获取日期对象并提取月份和日期

如何从 onChange 中的 selectedDates 获取日期对象并从中提取月份和日期并将它们放在我需要它们的位置(在另一个单独的 div 中,使用我的样式)

0 投票
0 回答
791 浏览

javascript - flatpickr.js 在选择时禁用日期范围

我正在使用flatpickr.js其中一个事件,即onChange在选择时禁用特定日期范围。令人惊讶的是,当我只是通过一个特定的日期来禁用它时,它可以工作,但当我通过一个日期范围时却不起作用。目前我传递静态日期,但一旦它工作,我将使范围动态。

我究竟做错了什么 ?

0 投票
0 回答
616 浏览

reactjs - 在 flatpickr 中,如何设置默认开始和结束时间

我有一个使用flatpickr的日期+时间范围选择器(如https://jsfiddle.net/wxLb6m4n/

defaultHour 只有一个选项可以设置开始时间和结束时间。

如何将开始时间设置为上午 8 点结束时间默认为下午 5 点?

(如果重要的话,我在 React 的Formik中使用它)

0 投票
2 回答
948 浏览

javascript - 用时刻 JS 格式化日期以匹配

我正在使用第三方 API 和Moment JS进行 Javascript 中的某些日期格式。

第三方 APIepoch以毫秒为单位对一些数据/结果进行分组,例如:

这相当于
GMT:2019 年 5 月 31 日星期五 00:00:00
您的时区:2019 年 5 月 31 日星期五 01:00:00 GMT+01:00 DST
相对时间:15 天内

我们使用Flatpickr日历进行日期选择。选择日期后,它将以本地日期格式返回所选日期,例如:

如果我使用 moment 进行转换,我会得到以下信息:

这相当于:
GMT:2019 年 5 月 30 日星期四 23:00:00
您的时区:2019 年 5 月 31 日星期五 00:00:00 GMT+01:00 DST
相对时间:15 天内

我知道这个问题与当地时区有关,第一个是 GMT 00:00:00,第二个是 GMT 00:01:00,但我不确定如何解决它。

此外,一年中的晚些时候,例如 12 月,当我们在 BST 之外时,日期是格林威治标准时间,所以我也需要这个工作。

0 投票
2 回答
994 浏览

angular - '{ from: string; 类型的参数 到:字符串;}' 不能分配给类型为 'string | 日期'。在 flatpickr 中启用日期

我正在尝试在与 angular 集成的 flatpickr 日历中启用日期。因此,当我尝试推送启用日期对象以启用 flatpickr 的配置选项时,我得到了Argument of type '{ from: string; to: string; }' is not assignable to parameter of type 'string | Date'.

这是配置的代码。flatpickr:-

在一个函数中,我使用该配置对象来启用日期:-

这是我得到的错误

我希望它能够启用 flatpickr文档中给出的指定日期