How to instantiate flatpickr


I’m trying to write a simple WordPress plugin that displays a flatpickr calendar. The documentation says “If you have jQuery, flatpickr is available as a plugin. Simply
$(".selector").flatpickr(optional_config);. But when I do that, it complains:

TypeError: $(“.cwra-wsc”).flatpickr is not a function. (In ‘$(“.cwra-wsc”).flatpickr()’, ‘$(“.cwra-wsc”).flatpickr’ is undefined)

After some poking around, I thought maybe I’m missing the flatpickr jQuery plugin … but if I search the jQuery plugin registry, it says, “nothing found”.

I guess, given that the whole point of flatpickr is that it’s simple and doesn’t require any libraries, I could just download the code and deploy directly from my site, but given that their own documentation says that if you’re already running jQuery you can use the plugin (which, since I’m using WordPress, I am), that doesn’t seem like the Right Way. So, what is the Right Way to instantiate flatpickr in WordPress?

Extra Info

I guess this shouldn’t directly matter in terms of addressing the question above, but in interest of completeness, I’m writing the plugin based on the WordPress Plugin Boilerplate template. I register the widget by making a call to the loader in define_admin_hooks:

$this->loader->add_action( 'widgets_init', $plugin_admin,
    'register_widgets' );

The register_widgets function is defined in the admin class:

    public function register_widgets() {

            register_widget( 'CWRA_Widget_Simple_Calendar_Widget' );


And CWRA_Widget_Simple_Calendar_Widget is pretty simple at this point, and works fine, and the correct HTML gets output:

    public function widget( $args, $instance ) {

            $settings = apply_filters(
            $title = apply_filters(
                empty($instance['title']) ? '' : $instance['title'],

            // The content of the widget
            echo $before_widget;
            if ( !empty($title) ) {
                    echo $before_title . $title . $after_title;
                    <div class="cwra-wsc"></div>
            echo $after_widget;

The JavaScript is even simpler:

(function( $ ) {
        'use strict';

         $(function() {

})( jQuery );

which gets encoded in the widget class

    public function enqueue_scripts() {
            wp_enqueue_script( $this->plugin_name,
                plugin_dir_url( __FILE__ )
                  . 'js/cwra-widget-simple-calendar-public.js',
                array( 'jquery' ), $this->version, false );


and, indeed, the script is getting encoded … hence the error 🙂

/end Extra Info

TBH, all of the above is probably too much for what I’m trying to do, but I’m also using this as an excuse to play with the plugin boilerplate. Thanks!

philolegein 4 months 0 Answers 18 views 0

Leave an answer