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:


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

<script type="text/javascript"

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=""></script> &nbsp;
To: <script type="text/javascript">
$(function () {
.datepicker({ showOn: 'both', buttonImage: '',
buttonImageOnly: true, changeMonth: true, showOtherMonths: true, selectOtherMonths: true
<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"

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".
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.