Wednesday, August 6, 2014

Jquery DatePicker example 2

<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>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

  <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>
</head>
<body>

<p>
From Date: <input type="text" id="fromdatepicker" style="font-size:11px"  />
To Date: <input type="text" id="todatepicker" style="font-size:11px"  /> &nbsp;&nbsp;&nbsp;
<input type="button" id="btnFilter" value="Generate Report">
</p>


</body>
</html>
jQuery UI Datepicker - Default functionality From Date: To Date:    

No comments:

Post a Comment