Jquery-ui plug-in DatePicker parameters using the detailed

Overview

The date selection plugin is a flexible plug-in that you can define, including date format, language, limit selection date range, add related buttons, and other navigation.

At the same time, you can also use the keyboard to control it:

Page Up/down-Previous month, next month

Ctrl+page Up/down-last year, next year

Ctrl+home-the current month or last open date

Ctrl+left/right-Last day, next day

Ctrl+up/down-Last week, next week

Enter-determine the date of selection

Ctrl+end-closes and clears the dates that have been selected

Escape-closes and cancels the selection

Practical function:

$.datepicker.setdefaults (Settings)-Global Set Date Select the parameters for the plug-in.

$.datepicker.formatdate (format, date, settings)-formatted date string for display

$.datepicker.iso8601week (date)-Give a date, indeed he is the first few weeks of the year

$.datepicker.parsedate (format, value, settings)-Get a date string in the specified format

Date Format:

D-Day ordinal of each month (without leading 0)

DD-Day of the month (two digits)

O-Days of the year (without leading 0)

OO-Day of the year (three digits)

D-Day name Short

Dd-day name Long

M-month (without leading 0)

MM-month (two digits)

M-month name Short

Mm-month name Long

Y-year (two digits)

YY-year (four digits)

@-Unix timestamp (starting from 01/01/1970) ' ... '-text '-Single quotation mark (other)-text

Other standard date formats:

ATOM-' yy-mm-dd ' (Same as RFC 3339/iso 8601)

Cookies-' D, dd M yy '

iso_8601-' yy-mm-dd '

rfc_822-' d, D M y '

rfc_850-' DD, dd-m-y '

rfc_1036-' d, D M y

Rfc_1123-' d, D M yy '

rfc_2822-' d, D M yy '

RSS-' d, D M y '

TIMESTAMP-' @ '

The consortium-' YY-MM-DD '

• Parameters (parameter name: Parameter type: Default value)

altfield:string: '

Synchronizes the selected dates into another domain, with Altformat to display date strings in different formats.

Initial: $ ('. Selector '). DatePicker ({altfield: ' #actualDate '});

Get: var Altfield = $ ('. Selector '). DatePicker (' option ', ' Altfield ');

Set: $ ('. Selector '). DatePicker (' option ', ' Altfield ', ' #actualDate ');

altformat:string: '

The date format that is displayed in another field when Altfield is set.

Initial: $ ('. Selector '). DatePicker ({altformat: ' Yy-mm-dd '});

Get: var Altformat = $ ('. Selector '). DatePicker (' option ', ' Altformat ');

Set: $ ('. Selector '). DatePicker (' option ', ' Altformat ', ' yy-mm-dd ');

appendtext:string: '

Adds the specified string after the owning domain of the date plug-in.

Initial: $ ('. Selector '). DatePicker ({appendtext: ' (YYYY-MM-DD) '});

Get: var AppendText = $ ('. Selector '). DatePicker (' option ', ' appendtext ');

Set: $ ('. Selector '). DatePicker (' option ', ' AppendText ', ' (YYYY-MM-DD) ');

buttonimage:string: '

Sets the picture of the pop-up button, if not null, the text of the button becomes the Alt property and is not displayed directly.

Initial: $ ('. Selector '). DatePicker ({buttonimage: '/images/datepicker.gif '});

Get: var buttonimage = $ ('. Selector '). DatePicker (' option ', ' buttonimage ');

Set: $ ('. Selector '). DatePicker (' option ', ' buttonimage ', '/images/datepicker.gif ');

ButtonImageOnly:Boolean:false

Set to True is the trigger without it appearing on a button.

Initial: $ ('. Selector '). DatePicker ({buttonimageonly:true});

Get: var buttonimageonly = $ ('. Selector '). DatePicker (' option ', ' buttonimageonly ');

Set: $ ('. Selector '). DatePicker (' option ', ' buttonimageonly ', true);

buttontext:string: ' ... '

Sets the text content of the trigger button.

Initial: $ ('. Selector '). DatePicker ({buttontext: ' Choose '});

Get: var ButtonText = $ ('. Selector '). DatePicker (' option ', ' ButtonText ');

Set: $ ('. Selector '). DatePicker (' option ', ' ButtonText ', ' Choose ');

ChangeMonth:Boolean:false

setting allows you to select months from the Drop-down list.

Initial: $ ('. Selector '). DatePicker ({changemonth:true});

Get: var changemonth = $ ('. Selector '). DatePicker (' option ', ' changemonth ');

Set: $ ('. Selector '). DatePicker (' option ', ' Changemonth ', true);

ChangeYear:Boolean:false

setting allows you to select the year by Drop-down list.

Initial: $ ('. Selector '). DatePicker ({changeyear:true});

Get: var changeyear = $ ('. Selector '). DatePicker (' option ', ' changeyear ');

Set: $ ('. Selector '). DatePicker (' option ', ' changeyear ', true);

closetexttype:stringdefault: ' Done '

Sets the text content of the Close button that needs to be displayed by setting the Showbuttonpanel parameter.

Initial: $ ('. Selector '). DatePicker ({closetext: ' X '});

Get: var Closetext = $ ('. Selector '). DatePicker (' option ', ' closetext ');

Set: $ ('. Selector '). DatePicker (' option ', ' closetext ', ' X ');

constrainInput:Boolean:true

If set to true, constrains the date format that is currently entered.

Initial: $ ('. Selector '). DatePicker ({constraininput:false});

Get: var constraininput = $ ('. Selector '). DatePicker (' option ', ' constraininput ');

Set: $ ('. Selector '). DatePicker (' option ', ' Constraininput ', false);

currenttext:string: ' Today '

Sets the text content of the day button, which needs to be displayed by setting the Showbuttonpanel parameter.

Initial: $ ('. Selector '). DatePicker ({currenttext: ' Now '});

Get: var Currenttext = $ ('. Selector '). DatePicker (' option ', ' currenttext ');

Set: $ ('. Selector '). DatePicker (' option ', ' currenttext ', ' now ');

dateformat:string: ' Mm/dd/yy '

Sets the display format for date strings.

Initial: $ ('. Selector '). DatePicker ({dateformat: ' Yy-mm-dd '});

Get: var DateFormat = $ ('. Selector '). DatePicker (' option ', ' DateFormat ');

Set: $ ('. Selector '). DatePicker (' option ', ' DateFormat ', ' yy-mm-dd ');

daynames:array: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday ']

Set the name of the day of the week, starting in Sunday. This content is displayed when DateFormat, and when the mouse is moved to the wardrobe in the calendar.

Initial: $ ('. Selector '). DatePicker ({daynames: [' dimanche ', ' Lundi ', ' Mardi ', ' mercredi ', ' jeudi ', ' vendredi ', ' samedi ']});

Get: var daynames = $ ('. Selector '). DatePicker (' option ', ' daynames ');

Set: $ ('. Selector '). DatePicker (' option ', ' daynames ', [' dimanche ', ' Lundi ', ' Mardi ', ' mercredi ', ' jeudi ', ' vendredi ', '] Samedi ']);

daynamesmin:array: [' Su ', ' Mo ', ' Tu ', ' We ', ' Th ', ' Fr ', ' Sa ']

Sets the daily indent for a week, starting in Sunday, when this content is displayed for DateFormat, and the wardrobe in the previous calendar is displayed.

Initial: $ ('. Selector '). DatePicker ({daynamesmin: [' Di ', ' Lu ', ' Ma ', ' Me ', ' Je ', ' Ve ', ' Sa ']});

Get: var daynamesmin = $ ('. Selector '). DatePicker (' option ', ' daynamesmin ');

Set: $ ('. Selector '). DatePicker (' option ', ' daynamesmin ', [' Di ', ' Lu ', ' Ma ', ' Me ', ' Je ', ' Ve ', ' Sa ']);

daynamesshort:array: [' Sun ', ' Mon ', ' Tue ', ' Wed ', ' Thu ', ' Fri ', ' Sat ']

Sets the daily indent for a week, starting in Sunday, when this content is displayed for DateFormat, and the wardrobe in the previous calendar is displayed.

Initial: $ ('. Selector '). DatePicker ({daynamesshort: [' Dim ', ' Lun ', ' Mar ', ' Mer ', ' jeu ', ' Ven ', ' Sam ']});

Get: var Daynamesshort = $ ('. Selector '). DatePicker (' option ', ' daynamesshort ');

Set: $ ('. Selector '). DatePicker (' option ', ' daynamesshort ', [' Dim ', ' Lun ', ' Mar ', ' Mer ', ' jeu ', ' Ven ', ' Sam ']);

defaultdate:date, number, string:null.

Sets the date that is selected the first time the default load is displayed. Can be a Date object, or a number (from today, for example, +7), or a valid string (' Y ' stands for the year, ' m ' for the month, ' W ' for the week, ' d ' for the day, for example: ' +1m +7d ').

Initial: $ ('. Selector '). DatePicker ({defaultdate: +7});

Get: var defaultdate = $ ('. Selector '). DatePicker (' option ', ' defaultdate ');

Set: $ ('. Selector '). DatePicker (' option ', ' defaultdate ', +7);

duration:string, Number: ' Normal '

Set the date control to expand the display time of the animation, optional is "slow", "normal", "fast", "the representative immediately, the number represents the number of milliseconds."

Initial: $ ('. Selector '). DatePicker ({duration: ' slow '});

Get: var duration = $ ('. Selector '). DatePicker (' option ', ' duration ');

Set: $ ('. Selector '). DatePicker (' option ', ' duration ', ' slow ');

firstday:number:0

Sets the first day of the week. Sunday is 0, Monday is 1, and so on.

Initial: $ ('. Selector '). DatePicker ({firstday:1});

Get: var FirstDay = $ ('. Selector '). DatePicker (' option ', ' firstday ');

Set: $ ('. Selector '). DatePicker (' option ', ' FirstDay ', 1);

GotoCurrent:Boolean:false

If set to true, when the day button is clicked, it is moved to the currently selected date instead of today.

Initial: $ ('. Selector '). DatePicker ({gotocurrent:true});

Get: var gotocurrent = $ ('. Selector '). DatePicker (' option ', ' gotocurrent ');

Set: $ ('. Selector '). DatePicker (' option ', ' gotocurrent ', true);

HideIfNoPrevNext:Boolean:false

Set to hide the corresponding button when there is no previous/next option. (default is not available)

Initial: $ ('. Selector '). DatePicker ({hideifnoprevnext:true});

Get: var Hideifnoprevnext = $ ('. Selector '). DatePicker (' option ', ' hideifnoprevnext ');

Set: $ ('. Selector '). DatePicker (' option ', ' Hideifnoprevnext ', true);

IsRTL:Boolean:false

If set to True, all text is from right to left.

Initial: $ ('. Selector '). DatePicker ({isrtl:true});

Get: var Isrtl = $ ('. Selector '). DatePicker (' option ', ' Isrtl ');

Set: $ ('. Selector '). DatePicker (' option ', ' Isrtl ', true);

maxdate:date, number, string:null.

Set a maximum optional date. Can be a Date object, or a number (from today, for example, +7), or a valid string (' Y ' stands for the year, ' m ' for the month, ' W ' for the week, ' d ' for the day, for example: ' +1m +7d ').

Initial: $ ('. Selector '). DatePicker ({maxdate: ' +1m +1w '});

Get: var maxdate = $ ('. Selector '). DatePicker (' option ', ' maxdate ');

Set: $ ('. Selector '). DatePicker (' option ', ' maxdate ', ' +1m +1w ');

mindate:date, number, string:null.

Set a minimum optional date. Can be a Date object, or a number (from today, for example, +7), or a valid string (' Y ' stands for the year, ' m ' for the month, ' W ' for the week, ' d ' for the day, for example: ' +1m +7d ').

Initial: $ ('. Selector '). DatePicker ({mindate:new Date (2007, 1-1, 1)});

Get: var mindate = $ ('. Selector '). DatePicker (' option ', ' mindate ');

Set: $ ('. Selector '). DatePicker (' option ', ' mindate ', New Date (2007, 1-1, 1));

Monthnames:array: [' January ', ' February ', ' March ', ' April ', ' may ', ' June ', ' July ', ' August ', ' September ', ' October ' , ' November ', ' December '] sets the name of all the months.

Initial:

$ ('. Selector '). DatePicker (

｛

MonthNames:

[' Januar ', ' februar ', ' marts ', ' April ', ' Maj ', ' Juni ', ' Juli ', ' August ', ' September ', ' Oktober ', ' November ', ' December ']};

Get: var monthnames = $ ('. Selector '). DatePicker (' option ', ' monthnames '); Set: $ ('. Selector '). DatePicker (' option ', ' monthnames ', [' Januar ', ' februar ', ' marts ', ' April ', ' Maj ', ' Juni ', ' Juli ', '] ' August ', ' September ', ' Oktober ', ' November ', ' December '];

Monthnamesshort:array: [' Out of the ', ' Feb ', ' Mar ', ' Apr ', ' may ', ' June ', ' o ', ' Aug ', ' Sep ', ' Oct ', ' Nov ', ' Dec ']

Sets the abbreviation for all months.

Initial:

$ ('. Selector '). DatePicker (

｛

Monthnamesshort:

[' Feb ', '] ', ' Mar ', ' Apr ', ' Maj ', ' June ', ' o ', ' Aug ', ' Sep ', ' Okt ', ' Nov ', ' Dec '});

Get: var Monthnamesshort = $ ('. Selector '). DatePicker (' option ', ' monthnamesshort ');

Set: $ ('. Selector '). DatePicker (' option ', ' monthnamesshort ', [' the '], ' Feb ', ' Mar ', ' Apr ', ' Maj ', ' June ', ' the ', ', ' Aug ', ' Sep ' , ' Okt ', ' Nov ', ' Dec ']);

NavigationAsDateFormat:Boolean:false

If set to True, the FormatDate function will be applied to the values in Prevtext,nexttext and currenttext, such as the month name.

Initial: $ ('. Selector '). DatePicker ({navigationasdateformat:true});

Get:

Var

Navigationasdateformat

=

$ ('. Selector '). DatePicker (' option '),

' Navigationasdateformat ');

Set: $ ('. Selector '). DatePicker (' option ', ' Navigationasdateformat ', true);

nexttext:string: ' Next '

Sets the display text for the next month link.

Initial: $ ('. Selector '). DatePicker ({nexttext: ' later '});

Get: var Nexttext = $ ('. Selector '). DatePicker (' option ', ' nexttext ');

Set: $ ('. Selector '). DatePicker (' option ', ' Nexttext ', ' later ');

Numberofmonths:number, Array:1

Set how many months to display at a time. If it is an integer, the number of months is displayed and, if it is an array, the number of rows and columns displayed.

Initial: $ ('. Selector '). DatePicker ({numberofmonths: [2, 3]});

Get: var numberofmonths = $ ('. Selector '). DatePicker (' option ', ' numberofmonths ');

Set: $ ('. Selector '). DatePicker (' option ', ' numberofmonths ', [2, 3]);

prevtext:string: ' Prev '

Sets the display text for the "last month" link.

Initial: $ ('. Selector '). DatePicker ({prevtext: ' earlier '});

Get: var Prevtext = $ ('. Selector '). DatePicker (' option ', ' prevtext ');

Set: $ ('. Selector '). DatePicker (' option ', ' Prevtext ', ' earlier ');

shortyearcutoff:string, Number: ' +10 '

Sets the value of the cutoff year. If the number (0-99) starts with the current year, if it is a string, it is converted to a number and then added to the current year. When the cut-off year is exceeded, it is considered to be the last century.

Initial: $ ('. Selector '). DatePicker ({shortyearcutoff:50});

Get: var Shortyearcutoff = $ ('. Selector '). DatePicker (' option ', ' Shortyearcutoff ');

Set: $ ('. Selector '). DatePicker (' option ', ' Shortyearcutoff ', 50);

showanim:string: ' Show '

Sets the name of the animation that displays and hides the date plug-in.

Initial: $ ('. Selector '). DatePicker ({showanim: ' fold '});

Get: var Showanim = $ ('. Selector '). DatePicker (' option ', ' Showanim ');

Set: $ ('. Selector '). DatePicker (' option ', ' Showanim ', ' fold ');

ShowButtonPanel:Boolean:false

Sets whether the related buttons are displayed on the panel.

Initial: $ ('. Selector '). DatePicker ({showbuttonpanel:true});

Get: var Showbuttonpanel = $ ('. Selector '). DatePicker (' option ', ' Showbuttonpanel ');

Set: $ ('. Selector '). DatePicker (' option ', ' Showbuttonpanel ', true);

showcurrentatpos:number:0

Sets the location where the current month is displayed when multiple months are displayed. Start x bit from top/left.

Initial: $ ('. Selector '). DatePicker ({showcurrentatpos:3});

Get: var Showcurrentatpos = $ ('. Selector '). DatePicker (' option ', ' Showcurrentatpos ');

Set: $ ('. Selector '). DatePicker (' option ', ' Showcurrentatpos ', 3);

ShowMonthAfterYear:Boolean:false

Whether the month is displayed after the head year of the panel.

Initial: $ ('. Selector '). DatePicker ({showmonthafteryear:true});

Get: var showmonthafteryear = $ ('. Selector '). DatePicker (' option ', ' showmonthafteryear ');

Set: $ ('. Selector '). DatePicker (' option ', ' showmonthafteryear ', true);

showon:string: ' Focus '

Set what event triggers the Display date plugin panel, optional value: Focus, Button, both

Initial: $ ('. Selector '). DatePicker ({showon: ' both '});

Get: var Showon = $ ('. Selector '). DatePicker (' option ', ' Showon ');

Set: $ ('. Selector '). DatePicker (' option ', ' Showon ', ' both ');

showoptions:options: {}

If you use Showanim to display animation effects, you can add some additional parameter settings by using this parameter.

Initial: $ ('. Selector '). DatePicker ({showoptions: {direction: ' up '});

Get: var showoptions = $ ('. Selector '). DatePicker (' option ', ' showoptions ');

Set: $ ('. Selector '). DatePicker (' option ', ' showoptions ', {direction: ' Up ');

ShowOtherMonths:Boolean:false

Whether the number of dates (not optional) is displayed on the current panel for the next two months.

Initial: $ ('. Selector '). DatePicker ({showothermonths:true});

Get: var showothermonths = $ ('. Selector '). DatePicker (' option ', ' showothermonths ');

Set: $ ('. Selector '). DatePicker (' option ', ' showothermonths ', true);

stepmonths:number:1

When clicked on/Next January, turn over a few months.

Initial: $ ('. Selector '). DatePicker ({stepmonths:3});

Get: var stepmonths = $ ('. Selector '). DatePicker (' option ', ' stepmonths ');

Set: $ ('. Selector '). DatePicker (' option ', ' stepmonths ', 3);

yearrange:string: ' -10:+10 '

Control the number of years displayed in the Drop-down list for the year, either relative to the current year (-NN:+NN) or absolute (-nnnn:+nnnn)

Initial: $ ('. Selector '). DatePicker ({yearrange: ' 2000:2010 '});

Get: var Yearrange = $ ('. Selector '). DatePicker (' option ', ' yearrange ');

Set: $ ('. Selector '). DatePicker (' option ', ' yearrange ', ' 2000:2010 ');

• Events

beforeshow:function (Input)

Triggers this event before the date control displays the panel, and returns the instance object of the control that is currently triggering the event.

Initial: $ ('. Selector '). DatePicker ({beforeshow:function (input) {...}});

beforeshowday:function (date)

This event is triggered by date binding on each panel before the date control displays the panel, which is the date on which the event was triggered. After calling the function, you must return an array: [0] This date is optional (True/false), [1] The CSS style name for this date ("" is the default), [2] When the mouse is moved to the contents of the hint.

Initial: $ ('. Selector '). DatePicker ({beforeshowday:function (date) {...}});

onchangemonthyear:function (year, month, inst)

This event is triggered when the current year or month changes, and the parameter is an instance of the changed year month and the date plug-in.

Initial: $ ('. Selector '). DatePicker ({onchangemonthyear:function (year, month, inst) {...}});

onclose:function (Datetext, inst)

This event is triggered when the date panel is closed (regardless of whether there is a selection date), and the parameter is the selected date and the current date plug-in instance.

Initial: $ ('. Selector '). DatePicker ({onclose:function (Datetext, inst) {...}});

onselect:function (Datetext, inst)

This event is triggered when a date is selected in the date panel, and the parameter is an instance of the plug-in for the selected date and current date.

$ ('. Selector '). DatePicker ({onselect:function (Datetext, inst) {...}});

Method:

Destory

Removes drag-and-drop functionality from the element.

Usage:. DatePicker (' Destroy ')

Disable

Disables drag-and-drop functionality for elements.

Usage:. DatePicker (' disable ')

Enable

Enables drag-and-drop functionality for elements.

Usage:. DatePicker (' Enable ')

option

Gets or sets the parameters of the element.

Usage:. DatePicker (' option ', Optionname, [value])

Dialog

Open a Date plug-in in the dialog plug-in.

Usage:. DatePicker (' dialog ', Datetext, [onselect], [Settings], [POS])

isdisabled

The exact date plugin has been disabled.

Usage:. DatePicker (' isdisabled ')

Hide

The date panel that was opened before it was hidden (closed).

Usage:. DatePicker (' hide ', [speed])

Show

. DatePicker (' show ')

Displays the date plugin.

Usage:. DatePicker (' show ')

GetDate

Returns the date that the current date plug-in selected.

Usage:. DatePicker (' getDate ')

Setdate

Sets the date plug-in's current date.          The date argument can be a number (from today, for example, +7), or a valid string (' Y ' for the year, ' m ' for the month, ' W ' for the week, ' d ' for the day, for example: ' +1m +7d '), and null for that day. Usage:. DatePicker (' setdate ', date)