Flatpickr API

This plugin exposes flatpickr.js for use in Jenkins plugins. The included styling supports dark theme out of the box.

To load the flatpickr.js library add the following to your jelly:

<st:adjunct includes="io.jenkins.plugins.flatpickr"/>

In your jelly create a div that contains an input field and a button. Set the attribute data-input on the input field and the attribute data-toggle on the button.

<div class="flatpickr-input" style="display: flex; gap: 5px" data-now="${it.minDate}">
  <f:textbox name="date" value="${it.defaultDate}"
             checkDependsOn="" data-input=""/>
  <button class="jenkins-button" type="button" data-toggle="" tooltip="Open datetime picker">
    <l:icon src="symbol-calendar-outline plugin-ionicons-api"/>
  </button>
</div>
<st:adjunct includes="io.jenkins.plugins.flatpickr"/>

In javascript attach flatpickr to the div, e.g with

Behaviour.specify(".flatpickr-input", "flatpickr-input", 0, function(fp) {
   flatpickr(fp, {
    allowInput: true,
    enableTime: true,
    wrap: true,
    clickOpens: false,
    dateFormat: "Y-m-d H:i",
    time_24hr: true,
    static: true,
    minDate: fp.dataset.now,
  });
});

Set the option wrap: true with above sample.

Clicking on the button will now open/close the date-time-picker

Licensed under MIT, see LICENSE