Date Picker

AUI Date Picker:

To Use AUI we need to import

<%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui"%>

Then add your input field:

<aui:input type="text" name="datepicker" id="datepicker" />

Then add this script:

<aui:script>

AUI().use('aui-datepicker', function(A) {
new A.DatePicker({
trigger : '#<portlet:namespace/>datepicker',
popover : {
zIndex : 1
}
});
});
</aui:script>


Liferay UI DatePicker:

We need to import:
<%@taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>

Then add your input field
<liferay-ui:input-date formName="dob" yearRangeEnd="2000" yearRangeStart="1950"
yearValue="1990" monthValue="3" dayValue="20" dayParam="d1" monthParam="m1"
yearParam="y1"/>

Jquery DatePicker:

To Use Jquery Date Picker we need to import

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

Then add your input field
   <input type="text" id="datepicker">

Then add this script:
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>