Expected: on changing the datepickers selected date ajax sends the new date
what happens now: the initially setted date gets send even though the datepicker has a different date selected (image). javascript also logs just the setted date
I need to reload data on the change of the date. I tried using a form but formatting made it impossible to use since java couldnt convert its own date back idk.
@Controller
public class WelcomeController {
private Date dat = new Date(); //Wed Nov 29 14:01:31 CET 2023
@GetMapping("/welcome")
public String mainWithParam(String name, Model model) {
model.addAttribute("date", dat);
return "welcome";
}
@PostMapping("/welcome/a")
public String datePickerOnChange(Model model,
@RequestParam String date) {
System.out.println(date); //Wed Nov 29 14:01:31 CET 2023
// TODO: date = newDate;
return "welcome";
}
}
<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<title>Spring Boot Thymeleaf Hello World Example</title>
</head>
<body>
<form>
<td th:text="${#dates.format(date, 'dd.mm.yyyy HH:mm')}"></td>
<div id="datetimepicker1" data-target-input="nearest">
<div data-target="#date" data-toggle="datetimepicker">
<input type="datetime-local" class="form-control datetimepicker-input" data-target="#datetimepicker1"
th:value="${#dates.format(date, 'yyyy-MM-dd HH:mm')}" id="datetimepicker1" placeholder="Date"
th:onchange="reloadAlleyOptions(this.getAttribute('data-date'))" th:data-date="*{date}"/>
<div class="input-group-text"><i class="fa fa-calendar-alt"></i></div>
</div>
</div>
</form>
</body>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
$(document).bind("ajaxSend", function () {
console.log("waiting for all requests to complete...");
}).bind("ajaxStop", function () {
location.reload();
});
function reloadAlleyOptions(date) {
console.log(date)
console.log("---")
$.ajax({
method: "post",
type: "POST",
url: "/welcome/a?date=" + date,
success: function (response) {
},
error: function (e) {}
});
}
</script>
</html>
