Flatpickr refuses to import styles

help
1

Using blaze if you render this date/time picker the styles either don’t work at all if using npm, or the “select” button disappears if importing the styles into js template file.

2

Just created a test project, added the flatpickr npm module and it works as expected

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import flatpickr from 'flatpickr';
import 'flatpickr/dist/flatpickr.css';

import './main.html';

Template.hello.onCreated(function helloOnCreated() {
  // counter starts at 0
  this.counter = new ReactiveVar(0);
});

Template.hello.onRendered(function(){
  const instance = this;
  flatpickr(instance.find('.flatpickr'));
});

Template.hello.helpers({
  counter() {
    return Template.instance().counter.get();
  },
});

Template.hello.events({
  'click button'(event, instance) {
    // increment the counter when button is clicked
    instance.counter.set(instance.counter.get() + 1);
  },
});

image

1 Like
3

I’ve replicated your code in createAuction page here, and it still won’t show the element on firefox or chrome with css imported.

4

I think your problem is that flatpickr needs an input field, not a div. I made a simple adjustment to createAuction.html and removed the <div class="picker"></div>

  when to start: date: <input class='picker' name='date' value={{date}} placeholder="1/30/2000">

And it works

1 Like