Merge pull request #194 from jenkinsci/flatpickr

use flatpickr to select maintenance dates/times

Author: mawinter69

pom.xml

@@ -65,6 +65,11 @@
         <groupId>io.jenkins.plugins</groupId>
         <artifactId>ionicons-api</artifactId>
     </dependency>
+    <dependency>
+      <groupId>io.jenkins.plugins</groupId>
+      <artifactId>flatpickr-api</artifactId>
+      <version>4.6.13-5.v534d8025a_a_59</version>
+    </dependency>
     <dependency>
       <groupId>com.cronutils</groupId>
       <artifactId>cron-utils</artifactId>

src/main/resources/com/sap/prd/jenkins/plugins/agent_maintenance/MaintenanceWindow/config.jelly

@@ -1,13 +1,29 @@
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:i="jelly:fmt">
+    <st:adjunct includes="io.jenkins.plugins.flatpickr"/>
+    <st:adjunct includes="com.sap.prd.jenkins.plugins.agent_maintenance.flatpickr"/>
     <j:invokeStatic var="defaultStart" method="getDefaultStartTime" className="com.sap.prd.jenkins.plugins.agent_maintenance.MaintenanceAction"/>
     <j:invokeStatic var="defaultEnd" method="getDefaultEndTime" className="com.sap.prd.jenkins.plugins.agent_maintenance.MaintenanceAction"/>
     <f:entry title="${%startTime}" help="/descriptor/com.sap.prd.jenkins.plugins.agent_maintenance.MaintenanceWindow/help/startTime">
-      <f:textbox name="startTime" value="${mw.startTime}" default="${defaultStart}"
-          checkUrl="${rootURL}/descriptorByName/com.sap.prd.jenkins.plugins.agent_maintenance.MaintenanceWindow/checkStartTime" checkDependsOn="startTime endTime"/>
+        <div class="am__flatpickr" data-now="${defaultStart}">
+          <f:textbox name="startTime" value="${mw.startTime}" default="${defaultStart}"
+                     checkUrl="${rootURL}/descriptorByName/com.sap.prd.jenkins.plugins.agent_maintenance.MaintenanceWindow/checkStartTime"
+                     checkDependsOn="startTime endTime"
+                     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>
     </f:entry>
     <f:entry title="${%endTime}" help="/descriptor/com.sap.prd.jenkins.plugins.agent_maintenance.MaintenanceWindow/help/endTime">
-        <f:textbox name="endTime" value="${mw.endTime}" default="${defaultEnd}"/>
+        <div class="am__flatpickr" data-now="${defaultStart}">
+            <f:textbox name="endTime" value="${mw.endTime}" default="${defaultEnd}"
+                       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>
     </f:entry>
     <f:entry field="reason" title="${%Reason}" help="/plugin/agent-maintenance/help/help-reason.html">
         <f:textbox value="${mw.reason}"/>

src/main/resources/com/sap/prd/jenkins/plugins/agent_maintenance/agent-maintenance.css

@@ -70,3 +70,7 @@
   flex-wrap: wrap;
   row-gap: 5px;
 }
+
+.jenkins-dialog__contents {
+  padding-top: 5px;
+}

src/main/resources/com/sap/prd/jenkins/plugins/agent_maintenance/flatpickr.css

@@ -0,0 +1,8 @@
+.am__flatpickr {
+  display: flex;
+  gap: 5px;
+}
+
+.am__flatpickr > input {
+  width: 150px;
+}

src/main/resources/com/sap/prd/jenkins/plugins/agent_maintenance/flatpickr.js

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