JQueryUI - Day 8 (Datepicker)

Option

Description

Example

autoSize

If set to true automatically resize the input field to accommodate dates

$("#datepicker-1").datepicker({

autoSize: true

});

buttonImage

Define URL of an image to use to display the datepicker when the showOn is set to “button” or “both”

$("#datepicker-1").datepicker({

showOn:"button",

buttonImage: "/jquery-ui-1.11.4.custom/images/datepicker.gif"

});

buttonText

Define text to display on the trigger button.

$("#datepicker-1").datepicker({

showOn:"button",

buttonImage: "/jquery-ui-1.11.4.custom/images/datepicker.gif",

buttonText: "Select"

});

changeMonth

Define whether the month should be rendered as a dropdown instead of text.

$("#datepicker-1").datepicker({

changeMonth: true

});

changeYear

Define whether the year should be rendered as a dropdown instead of text.

$("#datepicker-1").datepicker({

changeYear: true

});

currentText

Define text to display for the current day link.

$("#datepicker-1").datepicker({

currentText: "Now"

});

dateFormat

Define the format for parsed and displayed dates.

$("#datepicker-1").datepicker({

dateFormat: "yy-dd--mm"

});

defaultDate

Define initial date for the control, overriding the default value of today.

$("#datepicker-1").datepicker({

defaultDate: +7

});

firstDay

Define the first day of week. 0 for Sunday and 6 for Saturday

$("#datepicker-1").datepicker({

firstDay: 3

});

isRTL

Define whether the current language is drawn from right to left.

$("#datepicker-1").datepicker({

isRTL: true

});

maxDate

Define the maximum selectable date.

$("#datepicker-1").datepicker({

maxDate: "+1m +2w"

});

minDate

Define the minimum selectable date.

$("#datepicker-1").datepicker({

minDate: "-1m -2w"

});

nextText

Define text to display for the next month link.

$("#datepicker-1").datepicker({

nextText: "Next Month"

});

numberOfMonths

Define The number of months to show at once.

$("#datepicker-1").datepicker({

numberOfMonths: 3

});

prevText

Define text to display for the previous month link.

$("#datepicker-1").datepicker({

prevText: "Prev Month"

});

showAnim

Define the name of the animation used to show and hide the datepicker.

$("#datepicker-1").datepicker({

showAnim: "fold"

});

showButtonPanel

Define whether to display a button pane in 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.

$("#datepicker-1").datepicker({

showButtonPanel: true

});

showCurrentAtPos

Define the position the current month if multiple month are defined by numberOfMonths.

$("#datepicker-1").datepicker({

showCurrentAtPos: 2

});

showMonthAfterYear

Define whether to show the month after the year in the header.

$("#datepicker-1").datepicker({

showMonthAfterYear: true

});

showOtherMonths

Define whether to display dates in other months (non-selectable) at the start or end of the current month.

$("#datepicker-1").datepicker({

showOtherMonths: true

});

showWeek

If set to true ,a column is added to show the week of the year.

$("#datepicker-1").datepicker({

showWeek: true

});

yearRange

Define the range of years displayed in the year drop-down.

$("#datepicker-1").datepicker({

yearRange: "2010-2020"

});

yearSuffix

Define the additional text to display after the year in the month headers.

$("#datepicker-1").datepicker({

yearSuffix: " Year"

});