How to add jQuery datetimepicker in the page?

Today we would be looking at the jQuery datetimepicker implementation. It improves the User Experience. One needs to make a few things in mind for datetimepicker integration like

• Adding the required HTML code snippet in the page for selecting the date & time i.e. adding input element of type text  
• Respective JS & CSS libraries(datetimepicker and jQuery related) should be included in the page
• Activating the datetimepicker using jQuery or JavaScript 

After configuring the datetimepicker, it would look like below:

Implementation:

<html>
<head>
<title>Datetimepicker Demo</title>
<!–– Respective JS & CSS libraries(datetimepicker and jQuery related) should be included in the page ––>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<script>
$(document).ready(function () {
   // Activating the datetimepicker using jQuery or JavaScript 
   $('#datetimepicker1').datetimepicker(); //default    
   $('#datetimepicker2').datetimepicker({ //customized
      format:'d/m/Y H:i',
      minDate:0,
      formatTime:"h:i a",
      step:10,
      // if one would like to take user selected input from datetimepicker and atomatically round off to nearest integral of 10 minutes
      onChangeDateTime:function(dp,$input){
      //27/10/2019 12:01 -> dateTime[0] = date, dateTime[1] = time
 var dateTime = $input.val().split(" "); 
 var time = dateTime[1].split(":");
 var hour = time[0];
 var minutes = time[1];
 var datetimestring;
    
 if(minutes > 0 && minutes < 10) {
         datetimestring = dateTime[0] + ' ' + hour + ':' + 10;
         $input.val(datetimestring);
  }
    ...
  } // end of onChangeDateTime function
   });
   
});
</script>
</head>
<body>
<!–– Adding the required HTML code snippet in the page for selecting the date & time i.e. adding input element of type text  ––>
Default Datetimepicker:
<input type="text" id="datetimepicker1" placeholder="select date time">
Customized Datetimepicker:
<input type="text" id="datetimepicker2" placeholder="select date time">
</body>
</html>

Hoping that it would help you. Happy Learning!! ☺

How to construct dynamic URL using Thymeleaf

While creating a web application, it's very common to sends parameters in the request as query string or as the path variables. Recently, I have tried to achieve the same using Thymeleaf but faced some problem because I was new to Thymeleaf. But later found that Thymeleaf provides very simple and straightforward way to create dynamic URLs. Today we would see How? As it could be useful to anyone who would come across the same problem.

We would be using link expressions, a type of Thymeleaf Standard Epression: @{...} to create URLs in our web application.

1. Passing parameters as Query String
   

   O/P : <a href="/orderdetails?id=3">
   <a th:href="@{/orderdetails(id=3)}"> 
   <a th:href="@{/orderdetails(id=${order.id})}" th:text="${order.id}">Order ID</a>
   
   Would like to pass several parameters,
   O/P: <a href="/orderdetails?id=3&amp;action=show_all">
   <a th:href="@{/orderdetails(id=3,action='show_all')}">
   

2. Passing parameters as Path Variables
   

   O/P : <a href="/orderdetails/3">
   <a th:href="@{/orderdetails/{id}(id=3)}"> 
   <a th:href="@{/orderdetails/{id}(id=${order.id})}" th:text="${order.id}">Order ID</a>
   
   Alternative way:
   <a th:with="id=${order.id}" th:href="@{${'/orderdetails/' + id}}" th:text="${id}">Order ID</a>
   <a th:href="@{${'/orderdetails/' + order.id}}" th:text="${order.id}">Order ID</a>

If you would like to know about how to fetch the data [passed as Query String or as Path Variable using Thymeleaf] from incoming request in your Controller in Sprig MVC then you could checkout my post that describes the Differences between @RequestParam and @PathVariable annotations in Spring MVC? Happy Learning!!