Ready-to-use Calendar for choosing a date

This is a ready-to-use Calendar or a Datepicker which can be used with any online HTML form. Click on the icon or on the text field to see how it works:


Date:


Copy and paste the following code to your HTML form where you want the Calendar to appear:

<script type="text/javascript"
src="http://www.snaphost.com/jquery/Calendar.aspx"></script>



Sometimes it is required to have two Date fields, for example "From" and "To" dates. Use this code then:

From: <script type="text/javascript"
src="http://www.snaphost.com/jquery/Calendar.aspx"></script> &nbsp;
To: <script type="text/javascript">
$(function () {
$("#SnapHost_Calendar2")
.datepicker({ showOn: 'both', buttonImage: 'http://www.snaphost.com/jquery/calendar.gif',
buttonImageOnly: true, changeMonth: true, showOtherMonths: true, selectOtherMonths: true
});});</script>
<input name="SnapHost_Calendar2" id="SnapHost_Calendar2" type="text" />



The Calendar can be used as a Date field within:


To change a date format, please use the following code instead:

<script type="text/javascript"
src="http://www.snaphost.com/jquery/Calendar.aspx?dateFormat=dd/mm/yy"></script>


Change dd/mm/yy as desired:
  • d - day of month (no leading zero)
  • dd - day of month (two digit)
  • o - day of the year (no leading zeros)
  • oo - day of the year (three digit)
  • D - day name short
  • DD - day name long
  • m - month of year (no leading zero)
  • mm - month of year (two digit)
  • M - month name short
  • MM - month name long
  • y - year (two digit)
  • yy - year (four digit)

You can use keyboard shortcuts to drive the Calendar:
  • page up/down - previous/next month
  • ctrl+page up/down - previous/next year
  • ctrl+home - current month
  • ctrl+left/right - previous/next day
  • ctrl+up/down - previous/next week
  • enter - accept the selected date
  • ctrl+end - close and erase the date
  • escape - close without selection

The Calendar will display a label "JQuery Calendar loaded from www.SnapHost.com".
If you are a ProCaptcha user or you host your website with us then the label will not be shown.
Otherwise contact us to remove this label.