First you have to download the JS files and modify & upload in SharePoint Asset Library:-
Download CSS File:-
http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css
Download JQuery File:-
http://code.jquery.com/jquery-1.8.3.js
http://code.jquery.com/ui/1.10.0/jquery-ui.js
Go to any SharePoint page - Edit the page - Add Content Editor web part - Paste below code.
Note- Before paste the below code just the CSS and JQuery
<html lang="en">
<head>
<style>
div.ui-datepicker{
font-size:11px;
}
</style>
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"/>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"/>
<script>
$(function() {
$( "#fromdatepicker" ).datepicker();
$( "#todatepicker" ).datepicker();
});
$(function() {
$("#btnFilter").click(function() {
var startDate = $("#fromdatepicker").datepicker("getDate");
startDate = startDate.getFullYear()+"-"+(startDate.getMonth()+1)+"-"+startDate.getDate();
var endDate = $("#todatepicker").datepicker("getDate");
endDate = endDate.getFullYear()+"-"+(endDate.getMonth()+1)+"-"+endDate.getDate();
alert(startDate +"-"+ endDate);
});
});
</script>
<body>
From Date: <input id="fromdatepicker" style="font-size: 11px;" type="text" />
To Date: <input id="todatepicker" style="font-size: 11px;" type="text" />
<input id="btnFilter" type="button" value="Generate Report" />
</body>
</html>
Output:-
