jQuery DatePicker

A  jQuery plugin that attaches a popup calendar to your input fields or shows an inline calendar for selecting individual dates or date ranges.

Required Files : Douwnload Zip file of  :

jquery.datepick.js  &  jquery.datepick.css  & images

include these 2 files in Html page:

<script src=”jquery.datepicker.js” type=”text/javascript”></script>

<script src=”jquery.js” type=”text/javascript”></script>

Example: 1

<script type=”text/javascript”>

jQuery(function() {
jQuery(“#datepicker”).datepicker();
});

</script>

<div class=”demo”>

<p>Date: <input id=”datepicker” type=”text”></p>

</div>

Example : 2

Start Date – End Date

<script>

jQuery(function() {

jQuery(‘selector‘).datepick();
jQuery(‘#startDatepicker,#endDatepicker‘).datepick({beforeShow: customRange,
showOn: ‘both’, buttonImageOnly: true, buttonImage: ‘calendar.gif’});
});
function customRange(input) {
return {minDate: (input.id == “endDatepicker” ?
jQuery(“#startDatepicker“).datepick(“getDate“) : null),
maxDate: (input.id == “startDatepicker” ?
jQuery(“#endDatepicker“).datepick(“getDate“) : null)};
}

</script>

<p><span class=”demoLabel“>Date range with separate fields:</span>
<input type=”text” size=”10″  id=”startDatepicker“/> to
<input type=”text” size=”10″  id=”endDatepicker“/></p>

Note:

If you want to get the data when date is clicked instead of button, add below  onSelect Method.

jQuery(‘#datepicker’).datepick({

showOn: ‘both’, buttonImageOnly: true, buttonImage: ‘calendar-green.gif ‘,
onSelect: function()
{
getInvoiceByDate(jQuery(‘#openBillsDate’).val());
} ,
showStatus : true

});