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