Usage

Datepicker element is defined using p-datepicker tag.

<p-datepicker></p-datepicker>
                                

Attributes

Name	Type	Default	Description
altfield	string	null	Id of an input element that is to be updated with the selected date from the datepicker. Use the altFormat option 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.
autosize	boolean	false	Set to true to automatically resize the input field to accommodate dates in the current dateFormat.
beforeshow	function(Element input,Object inst)	null	Name of the function that takes an input field and current datepicker instance and returns an options object to update the datepicker with. It is called just before the datepicker is displayed.
beforeshowday	function(Date date)	null	Name of the function that takes a date as a parameter and must return an array.
calculateweek	function	jQuery.datepicker.iso8601Week	A name of the function to calculate the week of the year for a given date. The default implementation uses the ISO 8601 definition: weeks start on a Monday; the first week of the year contains the first Thursday of the year.
changemonth	boolean	false	Whether the month should be rendered as a dropdown instead of text.
changeyear	boolean	false	Whether the year should be rendered as a dropdown instead of text.Use the yearRange option to control which years are made available for selection.
constraininput	boolean	true	When true, entry in the input field is constrained to those characters allowed by the current dateFormat option.
dateformat	string	mm/dd/yy	The format for parsed and displayed dates.
defaultdate	string	null	Set the date to highlight on first opening if the field is blank. Specify 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	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").
gotocurrent	booelan	false	When true, the current day link moves to the currently selected date instead of today.
hideifnoprevnext	boolean	false	Normally the previous and next links are disabled when not applicable (see the minDate and maxDate options). You can hide them altogether by setting this attribute to true.
maxdate	string	null	The maximum selectable date as a string in dateformat.
mindate	number,date,string	null	The minimum selectable date as a string in dateformat.
navigationasdateformat	boolean	false	Whether the currentText, prevText and nextText options should be parsed as dates by the formatDate function, allowing them to display the target month names for example.
numberofmonths	number	1	The number of months to show at once.
onchangemonthyear	function(number year, number month, Object inst)	null	Called when the datepicker moves to a new month and/or year. The function receives the selected year, month (1-12), and the datepicker instance as parameters. this refers to the associated input field.
onclose	function(String dateText, Object In)	false	Called when the datepicker is closed, whether or not a date is selected. The function receives the selected date as text ("" if none) and the datepicker instance as parameters. this refers to the associated input field.
onselect	function(String dateText, Object inst)	null	Called when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field.
selectothermonths	boolean	false	Whether days in other months shown before or after the current month are selectable.This only applies if the showOtherMonths option is set to true.
shortyearcutoff	number,string	"+10"	The cutoff year for determining the century for a date (used in conjunction with dateFormat 'y'). Any dates entered with a year value less than or equal to the cutoff year are considered to be in the current century, while those greater than it are deemed to be in the previous century.
showanim	string	show	The name of the animation used to show and hide the datepicker. Use "show" (the default), "slideDown", "fadeIn", any of the jQuery UI effects. Set to an empty string to disable animation.
showbuttonpanel	boolean	false	Whether to display a button pane underneath the calendar. The button pane contains two buttons, a Today button that links to the current day, and a Done button that closes the datepicker. The buttons' text can be customized using the currentText and closeText options respectively.
showcurrentatpos	number	0	When displaying multiple months via the numberOfMonths option, the showCurrentAtPos option defines which position to display the current month in.
showmonthafteryear	boolean	false	Whether to show the month after the year in the header.
showon	string	focus	When the datepicker should appear. The datepicker can appear when the field receives focus ("focus"), when a button is clicked ("button"), or when either event occurs ("both").
showothermonths	boolean	false	Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.
showweek	boolean	false	When true, a column is added to show the week of the year. The calculateWeek option determines how the week of the year is calculated. You may also want to change the firstDay option.
stepmonths	number	1	Set how many months to move when clicking the previous/next links.
yearrange	string	c-10:c+10	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.
yearsuffix	string	""	Additional text to display after the year in the month headers.

Methods

Name	Parameters	Description
enable()	-	Enables the element.
disable()	-	Disables the element.
getDate()	-	Returns the selected date.
setDate()	date: New date (may be a javascript Date object or a string in the current date format)	Sets the selected date.

<h3 class="first">Inline</h3>
<p-datepicker inline></p-datepicker>

<h3>Popup</h3>
<p-datepicker showButtonPanel></p-datepicker>

<h3>DateFormat</h3>
<p-datepicker dateFormat="mm-dd-yy"></p-datepicker>

<h3>Button</h3>
<p-datepicker showOn="button"></p-datepicker>

<h3>Select Event</h3>
<p-growl id="select"></p-growl>
<p-datepicker onSelect="handleSelect"></p-datepicker>