#721 - added datepickers to select date range

BudgetMasterServer/src/main/java/de/deadlocker8/budgetmaster/search/Search.java

 package de.deadlocker8.budgetmaster.search;
 
+import org.springframework.format.annotation.DateTimeFormat;
+
 import java.time.LocalDate;
 
 public class Search
@@ -13,7 +15,9 @@ public class Search
 	private boolean searchTags;
 	private boolean includeHiddenAccounts;
 	private int page;
+	@DateTimeFormat(pattern = "dd.MM.yyyy")
 	private LocalDate startDate;
+	@DateTimeFormat(pattern = "dd.MM.yyyy")
 	private LocalDate endDate;
 
 	public Search()
@@ -127,7 +131,7 @@ public class Search
 
 	public boolean isEmptySearch()
 	{
-		return !searchName && !searchDescription && !searchCategory && !searchTags && startDate == null && endDate == null;
+		return !searchName && !searchDescription && !searchCategory && !searchTags;
 	}
 
 	@Override

BudgetMasterServer/src/main/resources/static/js/charts.js

@@ -21,7 +21,7 @@ $(document).ready(function()
     if($(".datepicker").length)
     {
         chartPickerStartDate = M.Datepicker.init(document.getElementById('chart-datepicker'), {
-            yearRange: 25,
+            yearRange: 50,
             firstDay: 1,
             showClearBtn: false,
             setDefaultDate: true,

BudgetMasterServer/src/main/resources/static/js/search.js

+let searchPickerStartDate;
+let searchPickerEndDate;
+
 $(document).ready(function()
 {
     $('.page-link').click(function()
@@ -10,4 +13,94 @@ $(document).ready(function()
             document.getElementById('searchForm').submit();
         }
     });
+
+    if($(".datepicker").length)
+    {
+        searchPickerStartDate = M.Datepicker.init(document.getElementById('search-datepicker'), {
+            yearRange: 50,
+            firstDay: 1,
+            showClearBtn: false,
+            setDefaultDate: startDate !== null,
+            defaultDate: startDate,
+            autoClose: true,
+
+            i18n: {
+                // Strings and translations
+                months: monthNames,
+                monthsShort: monthNamesShort,
+                weekdays: weekDays,
+                weekdaysShort: weekDaysShort,
+                weekdaysAbbrev: weekDaysLetters,
+
+                // Buttons
+                cancel: buttonCancel,
+                done: buttonClose,
+
+                // Accessibility labels
+                labelMonthNext: '>',
+                labelMonthPrev: '<'
+            },
+
+            // Formats
+            format: 'dd.mm.yyyy',
+            formatSubmit: 'dd.mm.yyyy',
+
+            onSelect: function()
+            {
+                if(typeof searchPickerEndDate !== "undefined")
+                {
+                    let selectedDate = searchPickerEndDate.date;
+                    searchPickerEndDate.destroy();
+                    searchPickerEndDate = createSearchDatePickerEnd(this.date, selectedDate);
+                }
+            }
+        });
+
+        // picker end date
+        if(typeof endDate !== "undefined")
+        {
+            searchPickerEndDate = createSearchDatePickerEnd(searchPickerStartDate.date, endDate);
+        }
+    }
 });
+
+function createSearchDatePickerEnd(minDate, selectedDate)
+{
+    if(selectedDate < minDate)
+    {
+        selectedDate = minDate;
+    }
+
+
+
+    return M.Datepicker.init(document.getElementById('search-datepicker-end'), {
+        yearRange: 50,
+        firstDay: 1,
+        showClearBtn: false,
+        setDefaultDate: true,
+        minDate: minDate,
+        defaultDate: selectedDate,
+        autoClose: true,
+
+        i18n: {
+            // Strings and translations
+            months: monthNames,
+            monthsShort: monthNamesShort,
+            weekdays: weekDays,
+            weekdaysShort: weekDaysShort,
+            weekdaysAbbrev: weekDaysLetters,
+
+            // Buttons
+            cancel: buttonCancel,
+            done: buttonClose,
+
+            // Accessibility labels
+            labelMonthNext: '>',
+            labelMonthPrev: '<'
+        },
+
+        // Formats
+        format: 'dd.mm.yyyy',
+        formatSubmit: 'dd.mm.yyyy'
+    });
+}
\ No newline at end of file

BudgetMasterServer/src/main/resources/templates/search/search.ftl

@@ -3,6 +3,7 @@
         <#import "../helpers/header.ftl" as header>
         <@header.globals/>
         <@header.header "BudgetMaster - ${locale.getString('search')}"/>
+        <@header.style "datepicker"/>
         <@header.style "transactions"/>
         <@header.style "search"/>
         <#import "/spring.ftl" as s>
@@ -26,6 +27,7 @@
                     <form id="searchForm" action="<@s.url '/search'/>" method="get">
                         <@searchMacros.searchTextAndButton search/>
                         <@searchMacros.checkboxes search/>
+                        <@searchMacros.dateRange search/>
                         <input type="hidden" name="page" id="inputPageNumber" value="${page.getNumber()}"/>
                     </form>
 
@@ -83,6 +85,10 @@
             </div>
         </main>
 
+        <!-- Pass localization to JS -->
+        <#import "../helpers/globalDatePicker.ftl" as datePicker>
+        <@datePicker.datePickerLocalization/>
+
         <!--  Scripts-->
         <#import "../helpers/scripts.ftl" as scripts>
         <@scripts.scripts/>

BudgetMasterServer/src/main/resources/templates/search/searchMacros.ftl

@@ -3,19 +3,19 @@
 
 <#macro searchTextAndButton search>
     <div class="row no-margin-bottom valign-wrapper">
-        <div class="col s10 m7 offset-m1 l6 offset-l2">
+        <div class="col s10 m6 offset-m2 l5 offset-l3">
             <div class="input-field">
                 <input id="searchText" type="text" name="searchText" value="${search.getSearchText()}">
                 <label for="searchText">${locale.getString("search")}</label>
             </div>
         </div>
 
-        <div class="col s2 m3 l4">
+        <div class="col s2 m4 l4">
             <div class="hide-on-small-only">
-                <@header.buttonSubmit name='action' icon='search' localizationKey='search.submit' id='button-save-account'/>
+                <@header.buttonSubmit name='action' icon='search' localizationKey='search.submit' id='button-perform-search'/>
             </div>
             <div class="hide-on-med-and-up">
-                <@header.buttonSubmit name='action' icon='search' localizationKey='' id='button-save-account'/>
+                <@header.buttonSubmit name='action' icon='search' localizationKey='' id='button-perform-search'/>
             </div>
         </div>
     </div>
@@ -66,6 +66,48 @@
     </div>
 </#macro>
 
+<#macro dateRange search>
+    <div class="row">
+        <div class="input-field col s6 m4 offset-m2 l3 offset-l3">
+            <#if search.getStartDate()??>
+                <#assign startDate = dateService.getLongDateString(search.getStartDate())/>
+                 <script>
+                    startDate = "${startDate}".split(".");
+                    startDate = new Date(startDate[2], startDate[1] - 1, startDate[0]);
+                 </script>
+            <#else>
+                <#assign startDate = ''/>
+                <script>
+                    startDate = null;
+                </script>
+            </#if>
+
+            <i class="material-icons prefix">today</i>
+            <input id="search-datepicker" type="text" class="datepicker" name="startDate" value="${startDate}">
+            <label for="search-datepicker">${locale.getString("chart.steps.second.label.start")}</label>
+        </div>
+
+        <div class="input-field col s6 m4 l3">
+            <#if search.getEndDate()??>
+                <#assign endDate = dateService.getLongDateString(search.getEndDate())/>
+                <script>
+                    endDate = "${endDate}".split(".");
+                    endDate = new Date(endDate[2], endDate[1] - 1, endDate[0]);
+                </script>
+            <#else>
+                <#assign endDate = ''/>
+                <script>
+                    endDate = null;
+                </script>
+            </#if>
+
+            <i class="material-icons prefix">event</i>
+            <input id="search-datepicker-end" type="text" class="datepicker" name="endDate" value="${endDate}">
+            <label for="search-datepicker-end">${locale.getString("chart.steps.second.label.end")}</label>
+        </div>
+    </div>
+</#macro>
+
 <#macro pagination page position>
     <div class="row pagination-position-${position}">
         <div class="col s12 center-align">