Trouble accessing JS library in custom kirby field

Kirby 2 Solved ✅
1

So I’m just started to dig into creating my own little custom kirby field. For learning purposes I want to create a datepicker field. For that I want to use https://chmln.github.io/flatpickr/

However after hours of reading through the docs and other peoples git repos I found myself right where I started…

It starts as simple as this:

<?php

  class DatepickerField extends TextField {

    public $icon = 'calendar';

    static public $assets = array(
      'js' => array(
        'flatpickr.js',
        'datepicker.js'
      ),
      'css' => array(
        'flatpickr.min.css',
        'flatpickr.dark.min.css',
        'datepicker.css'
      )
    );
  }

?>

Setting up a simple blueprint

title: Home
pages: false
fields:
  datepicker:
    label: Datepicker
    type: datepicker
    width: 1/3

Gives me this:

Now I want to use Javascript to show a datepicker. However I can not call the function. The documentation sates, that you just need to call:
document.getElementById("myID").flatpickr();

However if I use this call in my file ‘datepicker.js’

// jqueries ready function
$(function() {

    var elem = $('#form-field-datepicker');

    // elem.flatpickr();
    $("#form-field-datepicker").flatpickr(); // jQuery

    $( "#form-field-datepicker" ).click(function() {
        alert( "Handler for .click() called." );
    });

});

I will get the error:

Uncaught TypeError: $(...).flatpickr is not a function

If I check the js files that gets generated from kirby I can see that flatpickr is included along with my own script. I can’t get my head around why I can not access the constructor function of flatpickr?

Any ideas on whats going on here?
How do I properly set up a Javascript file for custom kirby fields?

2

You may want to check out @jenstornell’s boiler field: https://github.com/jenstornell/kirby-boiler-field

It has all what it needs to get started.

1 Like
3

Thank you that is indeed a good starting point.

Is there any documentation of how to access blueprint field values in my custom field so I can (depending on those) add configuration options

4

Inside function input, add something like this:

echo $this->page->title();

if title is your blueprint key.