Logo
Welcome Smartik
Profile Logout
Date Picker
Color Picker Slider

Date Picker

By default, the datepicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date is selected. For an inline calendar, simply attach the datepicker to a div or span.

How to create a Date picker?

1. Initialize the plugin

jQuery(function() {
	jQuery( "#datepicker" ).datepicker({
		showAnim: 'slide'
	});
});

2. Attach it to a a text input using the ID "datepicker" (for this example)

<input type="text" id="datepicker" />

The result of the code above:

Main Options
OPTION TYPE DEFAULT DESCRIPTION
disabled boolean false Disables (true) or enables (false) the datepicker. Can be set when initialising (first creating) the datepicker.
altField Selector, jQuery, Element '' The jQuery selector for another field that is to be updated with the selected date from the datepicker. Use the altFormat setting to change the format of the date within this field. Leave as blank for no alternate field.
altFormat String '' The dateFormat to be used for the altField option. This allows one date format to be shown to the user for selection purposes, while a different format is actually sent behind the scenes. For a full list of the possible formats see the formatDate function
appendText String '' The text to display after each date field, e.g. to show the required format.
autoSize Boolean false Set to true to automatically resize the input field to accommodate dates in the current dateFormat.
buttonText String '...' The text to display on the trigger button. Use in conjunction with showOn equal to 'button' or 'both'.
changeMonth Boolean false Allows you to change the month by selecting from a drop-down list. You can enable this feature by setting the attribute to true.
changeYear Boolean false Allows you to change the year by selecting from a drop-down list. You can enable this feature by setting the attribute to true. Use the yearRange option to control which years are made available for selection.
dateFormat String 'mm/dd/yy' The format for parsed and displayed dates. This attribute is one of the regionalisation attributes. For a full list of the possible formats see the formatDate function.
defaultDate Date, Number, String null Set the date to highlight on first opening if the field is blank. Specify either an actual date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null for today.
duration String, Number 'normal' Control the speed at which the datepicker appears, it may be a time in milliseconds or a string representing one of the three predefined speeds ("slow", "normal", "fast").
firstDay Number 0 Set the first day of the week: Sunday is 0, Monday is 1, ... This attribute is one of the regionalisation attributes.
maxDate Date, Number, String null Set a maximum selectable date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +1w'), or null for no limit.
minDate Date, Number, String null Set a minimum selectable date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '-1y -1m'), or null for no limit.
showAnim string 'show' Set the name of the animation used to show/hide the datepicker. Use 'show' (the default), 'slideDown', 'fadeIn', any of the show/hide jQuery UI effects, or '' for no animation.
showOn String 'focus' Have the datepicker appear automatically when the field receives focus ('focus'), appear only when a button is clicked ('button'), or appear when either event takes place ('both').
showOptions Options {} If using one of the jQuery UI effects for showAnim, you can provide additional settings for that animation via this option
yearRange String 'c-10:c+10' Control the range of years displayed in the year drop-down: either relative to today's year (-nn:+nn), relative to the currently selected year (c-nn:c+nn), absolute (nnnn:nnnn), or combinations of these formats (nnnn:-nn). Note that this option only affects what appears in the drop-down, to restrict which dates may be selected use the minDate and/or maxDate options.
OPTION TYPE DEFAULT DESCRIPTION
Reference:
Color Picker Slider