首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >flatpickr不加载rails 6+ webpacker

flatpickr不加载rails 6+ webpacker
EN

Stack Overflow用户
提问于 2021-07-08 17:35:30
回答 1查看 188关注 0票数 1

我正在尝试在Rails6中使用flatpickr,但由于某些原因,它似乎不起作用。

我做了以下工作:yarn add flatpickr

在我的文件中,我有以下内容:packs/application.js

代码语言:javascript
运行
复制
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import 'core-js/stable'
import 'regenerator-runtime/runtime'

import Rails from '@rails/ujs';
import Turbolinks from 'turbolinks';
import * as ActiveStorage from '@rails/activestorage';
import 'channels';

Rails.start();
Turbolinks.start();
ActiveStorage.start();

import('jquery');
import('tooltip-js');
import('../components/main.js');
import('../components/lib_ext.js');
import('../components/dialog.js');
import('../components/widgets.js');
import('../components/classes.js');
import('../components/payroll.js');
import('../components/account_context_menu.js');
import('../components/plan_table.js');
import('../components/requirements.js');
import('../components/help.js');
import('../components/help_data.js');
import('../components/scripts.js'); // nav js
import('../components/additional.js');
import('../components/effects.js');
import('../components/consolidated_orders');
import('../components/sales_invoices.js');
import('../components/journals/auto_reversal.js');
import('../components/budgets/new.js');
import('../components/budgets/export.js');
import('../components/new.js');

import('../stylesheets/application.scss');
const images = require.context('../images', true)

// flatpickr
import flatpickr from 'flatpickr'
require("flatpickr/dist/flatpickr.css");

flatpickr("[data-behavior='flatpickr']", {
  altInput: true,
  altFormat: "F j, Y",
  dateFormat: "Y-m-d",
});

在我的表单中,我有以下内容

代码语言:javascript
运行
复制
<%= f.text_field :company_year_end, data: { behavior: 'flatpickr' } %>

这里的结果是选择器根本没有显示。在控制台中,我没有看到任何与flatpickr相关的错误。

EN

回答 1

Stack Overflow用户

发布于 2021-07-08 17:46:26

明白了,必须使用turbolinks加载

代码语言:javascript
运行
复制
document.addEventListener('turbolinks:load', () => {
  flatpickr("[data-behavior='flatpickr']", {
    altInput: true,
    altFormat: "F j, Y",
    dateFormat: "Y-m-d",
  });
})
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68299084

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档