switch date picker to http://www.daterangepicker.com version 3.0.3

pdb-plotting/src/main/java/org/lucares/pdb/plot/api/PlotSettings.java

@@ -12,7 +12,7 @@ import org.apache.commons.lang3.StringUtils;
 
 public class PlotSettings {
 
-	private static final DateTimeFormatter DATE_FORMAT = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm");
+	private static final DateTimeFormatter DATE_FORMAT = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");
 
 	private String query;
 

pdb-ui/src/main/resources/resources/css/daterangepicker-3.0.3.css

@@ -0,0 +1,388 @@
+.daterangepicker {
+  position: absolute;
+  color: inherit;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  width: 278px;
+  max-width: none;
+  padding: 0;
+  margin-top: 7px;
+  top: 100px;
+  left: 20px;
+  z-index: 3001;
+  display: none;
+  font-family: arial;
+  font-size: 15px;
+  line-height: 1em;
+}
+
+.daterangepicker:before, .daterangepicker:after {
+  position: absolute;
+  display: inline-block;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  content: '';
+}
+
+.daterangepicker:before {
+  top: -7px;
+  border-right: 7px solid transparent;
+  border-left: 7px solid transparent;
+  border-bottom: 7px solid #ccc;
+}
+
+.daterangepicker:after {
+  top: -6px;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #fff;
+  border-left: 6px solid transparent;
+}
+
+.daterangepicker.opensleft:before {
+  right: 9px;
+}
+
+.daterangepicker.opensleft:after {
+  right: 10px;
+}
+
+.daterangepicker.openscenter:before {
+  left: 0;
+  right: 0;
+  width: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.daterangepicker.openscenter:after {
+  left: 0;
+  right: 0;
+  width: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.daterangepicker.opensright:before {
+  left: 9px;
+}
+
+.daterangepicker.opensright:after {
+  left: 10px;
+}
+
+.daterangepicker.drop-up {
+  margin-top: -7px;
+}
+
+.daterangepicker.drop-up:before {
+  top: initial;
+  bottom: -7px;
+  border-bottom: initial;
+  border-top: 7px solid #ccc;
+}
+
+.daterangepicker.drop-up:after {
+  top: initial;
+  bottom: -6px;
+  border-bottom: initial;
+  border-top: 6px solid #fff;
+}
+
+.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
+  float: none;
+}
+
+.daterangepicker.single .drp-selected {
+  display: none;
+}
+
+.daterangepicker.show-calendar .drp-calendar {
+  display: block;
+}
+
+.daterangepicker.show-calendar .drp-buttons {
+  display: block;
+}
+
+.daterangepicker.auto-apply .drp-buttons {
+  display: none;
+}
+
+.daterangepicker .drp-calendar {
+  display: none;
+  max-width: 270px;
+}
+
+.daterangepicker .drp-calendar.left {
+  padding: 8px 0 8px 8px;
+}
+
+.daterangepicker .drp-calendar.right {
+  padding: 8px;
+}
+
+.daterangepicker .drp-calendar.single .calendar-table {
+  border: none;
+}
+
+.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
+  color: #fff;
+  border: solid black;
+  border-width: 0 2px 2px 0;
+  border-radius: 0;
+  display: inline-block;
+  padding: 3px;
+}
+
+.daterangepicker .calendar-table .next span {
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+}
+
+.daterangepicker .calendar-table .prev span {
+  transform: rotate(135deg);
+  -webkit-transform: rotate(135deg);
+}
+
+.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: middle;
+  min-width: 32px;
+  width: 32px;
+  height: 24px;
+  line-height: 24px;
+  font-size: 12px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.daterangepicker .calendar-table {
+  border: 1px solid #fff;
+  border-radius: 4px;
+  background-color: #fff;
+}
+
+.daterangepicker .calendar-table table {
+  width: 100%;
+  margin: 0;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+.daterangepicker td.available:hover, .daterangepicker th.available:hover {
+  background-color: #eee;
+  border-color: transparent;
+  color: inherit;
+}
+
+.daterangepicker td.week, .daterangepicker th.week {
+  font-size: 80%;
+  color: #ccc;
+}
+
+.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
+  background-color: #fff;
+  border-color: transparent;
+  color: #999;
+}
+
+.daterangepicker td.in-range {
+  background-color: #ebf4f8;
+  border-color: transparent;
+  color: #000;
+  border-radius: 0;
+}
+
+.daterangepicker td.start-date {
+  border-radius: 4px 0 0 4px;
+}
+
+.daterangepicker td.end-date {
+  border-radius: 0 4px 4px 0;
+}
+
+.daterangepicker td.start-date.end-date {
+  border-radius: 4px;
+}
+
+.daterangepicker td.active, .daterangepicker td.active:hover {
+  background-color: #357ebd;
+  border-color: transparent;
+  color: #fff;
+}
+
+.daterangepicker th.month {
+  width: auto;
+}
+
+.daterangepicker td.disabled, .daterangepicker option.disabled {
+  color: #999;
+  cursor: not-allowed;
+  text-decoration: line-through;
+}
+
+.daterangepicker select.monthselect, .daterangepicker select.yearselect {
+  font-size: 12px;
+  padding: 1px;
+  height: auto;
+  margin: 0;
+  cursor: default;
+}
+
+.daterangepicker select.monthselect {
+  margin-right: 2%;
+  width: 56%;
+}
+
+.daterangepicker select.yearselect {
+  width: 40%;
+}
+
+.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
+  width: 50px;
+  margin: 0 auto;
+  background: #eee;
+  border: 1px solid #eee;
+  padding: 2px;
+  outline: 0;
+  font-size: 12px;
+}
+
+.daterangepicker .calendar-time {
+  text-align: center;
+  margin: 4px auto 0 auto;
+  line-height: 30px;
+  position: relative;
+}
+
+.daterangepicker .calendar-time select.disabled {
+  color: #ccc;
+  cursor: not-allowed;
+}
+
+.daterangepicker .drp-buttons {
+  clear: both;
+  text-align: right;
+  padding: 8px;
+  border-top: 1px solid #ddd;
+  display: none;
+  line-height: 12px;
+  vertical-align: middle;
+}
+
+.daterangepicker .drp-selected {
+  display: inline-block;
+  font-size: 12px;
+  padding-right: 8px;
+}
+
+.daterangepicker .drp-buttons .btn {
+  margin-left: 8px;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 4px 8px;
+}
+
+.daterangepicker.show-ranges .drp-calendar.left {
+  border-left: 1px solid #ddd;
+}
+
+.daterangepicker .ranges {
+  float: none;
+  text-align: left;
+  margin: 0;
+}
+
+.daterangepicker.show-calendar .ranges {
+  margin-top: 8px;
+}
+
+.daterangepicker .ranges ul {
+  list-style: none;
+  margin: 0 auto;
+  padding: 0;
+  width: 100%;
+}
+
+.daterangepicker .ranges li {
+  font-size: 12px;
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.daterangepicker .ranges li:hover {
+  background-color: #eee;
+}
+
+.daterangepicker .ranges li.active {
+  background-color: #08c;
+  color: #fff;
+}
+
+/*  Larger Screen Styling */
+@media (min-width: 564px) {
+  .daterangepicker {
+    width: auto; }
+    .daterangepicker .ranges ul {
+      width: 140px; }
+    .daterangepicker.single .ranges ul {
+      width: 100%; }
+    .daterangepicker.single .drp-calendar.left {
+      clear: none; }
+    .daterangepicker.single.ltr .ranges, .daterangepicker.single.ltr .drp-calendar {
+      float: left; }
+    .daterangepicker.single.rtl .ranges, .daterangepicker.single.rtl .drp-calendar {
+      float: right; }
+    .daterangepicker.ltr {
+      direction: ltr;
+      text-align: left; }
+      .daterangepicker.ltr .drp-calendar.left {
+        clear: left;
+        margin-right: 0; }
+        .daterangepicker.ltr .drp-calendar.left .calendar-table {
+          border-right: none;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0; }
+      .daterangepicker.ltr .drp-calendar.right {
+        margin-left: 0; }
+        .daterangepicker.ltr .drp-calendar.right .calendar-table {
+          border-left: none;
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0; }
+      .daterangepicker.ltr .drp-calendar.left .calendar-table {
+        padding-right: 8px; }
+      .daterangepicker.ltr .ranges, .daterangepicker.ltr .drp-calendar {
+        float: left; }
+    .daterangepicker.rtl {
+      direction: rtl;
+      text-align: right; }
+      .daterangepicker.rtl .drp-calendar.left {
+        clear: right;
+        margin-left: 0; }
+        .daterangepicker.rtl .drp-calendar.left .calendar-table {
+          border-left: none;
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0; }
+      .daterangepicker.rtl .drp-calendar.right {
+        margin-right: 0; }
+        .daterangepicker.rtl .drp-calendar.right .calendar-table {
+          border-right: none;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0; }
+      .daterangepicker.rtl .drp-calendar.left .calendar-table {
+        padding-left: 12px; }
+      .daterangepicker.rtl .ranges, .daterangepicker.rtl .drp-calendar {
+        text-align: right;
+        float: right; } }
+@media (min-width: 730px) {
+  .daterangepicker .ranges {
+    width: auto; }
+  .daterangepicker.ltr .ranges {
+    float: left; }
+  .daterangepicker.rtl .ranges {
+    float: right; }
+  .daterangepicker .drp-calendar.left {
+    clear: none !important; } }

pdb-ui/src/main/resources/resources/js/air-datepicker-2.2.3.en.js

@@ -1,12 +0,0 @@
-;(function ($) { $.fn.datepicker.language['en'] = {
-    days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
-    daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-    daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
-    months: ['January','February','March','April','May','June', 'July','August','September','October','November','December'],
-    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-    today: 'Today',
-    clear: 'Clear',
-    dateFormat: 'mm/dd/yyyy',
-    timeFormat: 'hh:ii aa',
-    firstDay: 0
-}; })(jQuery);

pdb-ui/src/main/resources/resources/js/ui.js

@@ -18,6 +18,12 @@ const gnuplotRMargin = 110; // The right margin configured for gnuplot
 const gnuplotTMargin = 57; // The top margin configured for gnuplot
 const gnuplotBMargin = 76; // The bottom margin configured for gnuplot
 
+moment.locale('en', {
+    week: {
+        dow : 1 // monday is the first day of week
+    }
+});
+
 Vue.config.keyCodes.arrowUp = 38;
 Vue.config.keyCodes.arrowDown = 40;
 
@@ -281,7 +287,7 @@ Vue.component('result-view', {
 		shiftDateBySeconds: function(date, shiftInSeconds) {
 		    var oldDate = Date.parse(date);
             var newDate = oldDate.add({seconds: shiftInSeconds});
-            return newDate.toString("yyyy-MM-dd HH:mm");
+            return newDate.toString("yyyy-MM-dd HH:mm:ss");
 		},
 		dateRangeToSeconds: function(dateRange){
             var tokens = dateRange.split(/ +/,2);
@@ -637,7 +643,7 @@ Vue.component('navigation-bar', {
 		{
 			var dateBefore = Date.parse(data.searchBar.dateFrom);
 			var newDate = this.shiftByInterval(dateBefore, directionalFactor);
-			data.searchBar.dateFrom = newDate.toString("yyyy-MM-dd HH:mm");
+			data.searchBar.dateFrom = newDate.toString("yyyy-MM-dd HH:mm:ss");
 		},
 		shiftByInterval: function(date, directionalFactor)
 		{
@@ -727,22 +733,40 @@ Vue.component('group-by-item', {
 Vue.component('search-bar', {
   props: ['searchBar'],
   mounted: function() {
-  	$('#search-date-from').datepicker({
+  	$('#search-date-from').daterangepicker({
-		language: 'en',
+        timePicker: true,
-		timepicker: true,
+        singleDatePicker: true,
-		dateFormat: 'yyyy-mm-dd',
+        startDate: Date.parse(data.searchBar.dateFrom),
-		timeFormat: 'hh:ii',
+        minDate: "2017-01-01",
-		onSelect: function onSelect(dateAsString, dateObject) {
+        maxDate: moment(),
-	        data.searchBar.dateFrom = dateAsString;
+        maxYear: parseInt(moment().format('YYYY'),10),
-	    }
+        timePicker24Hour: true,
-	});
+        timePickerSeconds: true,
-	$('#search-date-from').data('datepicker').selectDate(Date.parse(data.searchBar.dateFrom));
+        showDropdowns: true, // drop downs for selecting year and month
+        locale: {
+          format: 'YYYY-MM-DD HH:mm:ss',
+          "firstDay": 1 // monday is the first day of the week
+        },
+        ranges: {
+            'Today': [moment().startOf('day'), moment().endOf('day')],
+            'Yesterday': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
+            'Last 7 Days': [moment().subtract(6, 'days').startOf('day'), moment().endOf('day')],
+            'This Week': [moment().startOf('week'), moment().endOf('day')],
+            'Last Week': [moment().subtract(7, 'days').startOf('week'), moment().subtract(7, 'days').endOf('week')],
+            'Last 30 Days': [moment().subtract(29, 'days').startOf('day'), moment().endOf('day')],
+            'This Month': [moment().startOf('month'), moment().endOf('month').endOf('day')],
+            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+        },
+      });
+      $('#search-date-from').on('apply.daterangepicker', function(ev, picker) {
+          data.searchBar.dateFrom = picker.startDate.format('YYYY-MM-DD HH:mm:ss');
+      });
   },
   watch: {
     // whenever searchBar.dateFrom changes, this function will run
     'searchBar.dateFrom': function (newDateFrom, oldDateFrom) {
       const newDate = Date.parse(newDateFrom);
-      $('#search-date-from').data('datepicker').selectDate(newDate);
+      $('#search-date-from').data('daterangepicker').setStartDate(newDate);
     }
   },
   methods: {
@@ -867,10 +891,9 @@ Vue.component('search-bar', {
 				<label for="search-date-from">From Date:</label>
 				<input type='text'
 					id="search-date-from" 
-					class='datepicker-here input_date'
 					v-model="searchBar.dateFrom"
 					required="required" 
-					pattern="\\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2]\\d|3[0-1]) [0-2]\\d:[0-5]\\d"
+					pattern="\\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2]\\d|3[0-1]) [0-2]\\d:[0-5]\\d:[0-5]\\d"
 					 />
 				<!--
 				<input 
@@ -1026,7 +1049,7 @@ var data = {
 	    	'selected': GetURLParameter('limitBy.selected','NO_LIMIT'),
 	    	'number': GetURLParameter('limitBy.number',10)
 	    },
-	    dateFrom: GetURLParameter('dateFrom', Date.now().add({ days: -7 }).toString("yyyy-MM-dd HH:mm")), // '2018-01-05 09:03'
+	    dateFrom: GetURLParameter('dateFrom', Date.now().add({ days: -7 }).toString("yyyy-MM-dd HH:mm:ss")), // '2018-01-05 09:03'
 	    dateRange: GetURLParameter('dateRange','1 week'),
 	    axisScale: GetURLParameter('axisScale','LOG10'),
 	    aggregate: GetURLParameter('aggregate','NONE'),

pdb-ui/src/main/resources/templates/main.mustache

@@ -3,8 +3,8 @@
 <head>
 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
 <script type="text/javascript" src="js/date.js"></script>
-<script type="text/javascript" src="js/air-datepicker-2.2.3.min.js"></script>
+<script type="text/javascript" src="js/moment.min.js"></script>
-<script type="text/javascript" src="js/air-datepicker-2.2.3.en.js"></script>
+<script type="text/javascript" src="js/daterangepicker-3.0.3.js"></script>
 <script type="text/javascript" src="js/invaders.js"></script>
 {{#isProduction}}
 <script type="text/javascript" src="js/vue-2.5.16.min.js"></script>
@@ -16,7 +16,9 @@
 <link rel="stylesheet" type="text/css" href="css/design.css">
 <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
 <link rel="stylesheet" type="text/css" href="css/invaders.css">
-<link rel="stylesheet" type="text/css" href="css/air-datepicker-2.2.3.min.css">
+<link rel="stylesheet" type="text/css" href="css/daterangepicker-3.0.3.css" />
+
+
 </head>
 <body>
 	<div id="app">