Trouble accessing JS library in custom kirby field

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

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:


  class DatepickerField extends TextField {

    public $icon = 'calendar';

    static public $assets = array(
      'js' => array(
      'css' => array(


Setting up a simple blueprint

title: Home
pages: false
    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:

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?

You may want to check out @jenstornell’s boiler field:

It has all what it needs to get started.

1 Like

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

Inside function input, add something like this:

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

if title is your blueprint key.