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="https://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="https://www.snaphost.com/jquery/Calendar.aspx"></script>
To: <script type="text/javascript">
$(function () {
$("#SnapHost_Calendar2")
.datepicker({ showOn: 'both', buttonImage: 'https://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="https://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.