JQuery datepicker usage details,

JQuery datepicker usage details,

JQuery UI is very powerful. The date selection plug-in Datepicker is a flexible configuration plug-in. We can customize its display mode, including date format, language, restriction selection date range, add related buttons, and other navigation.

Official Address: http://docs.jquery.com/ui/datepicker,official example: http://jqueryui.com/demos/datepicker /.

A good address for DIY jQuery UI Interface Effects of site http://jqueryui.com/themeroller/

DatePicker basic usage:

<! DOCTYPE html> 
Synchronize the selected date to another domain, and use altFormat to display date strings of different formats.

Initial: $ ('. selector'). datepicker ({altField: '# actualDate '});
Get: var altField = $ ('. selector'). datepicker ('option', 'altfield ');
Settings: $ ('. selector'). datepicker ('option', 'altfield ',' # actualdate ');

AltFormat: String :''

When altField is set, the date format is displayed in another field.
Initial: $ ('. selector'). datepicker ({altFormat: 'yy-mm-dd '});
Get: var altFormat = $ ('. selector'). datepicker ('option', 'altformat ');
Settings: $ ('. selector'). datepicker ('option', 'altformat', 'yy-mm-dd ');

AppendText: String :''

Add the specified string after the domain to which the date plug-in belongs.
Initial: $ ('. selector'). datepicker ({appendText: '(yyyy-mm-dd )'});
Get: var appendText = $ ('. selector'). datepicker ('option', 'appendtext ');
Settings: $ ('. selector'). datepicker ('option', 'appendtext', '(yyyy-mm-dd )');

ButtonImage: String :''

Set the image of the pop-up button. If it is not empty, the text of the button will become the alt attribute and will not be displayed directly.
Initial: $ ('. selector'). datepicker ({buttonImage: '/images/datepicker.gif '});
Get: var buttonImage = $ ('. selector'). datepicker ('option', 'buttonimage ');
Settings: $ ('. selector'). datepicker ('option', 'buttonimag', '/images/datepicker.gif ');

ButtonImageOnly: Boolean: false

Set to true to place an image after the field to use as the trigger without it appearing on a button.
Initial: $ ('. selector'). datepicker ({buttonImageOnly: true });
Get: var buttonImageOnly = $ ('. selector'). datepicker ('option', 'buttonimageonly ');
Settings: $ ('. selector'). datepicker ('option', 'buttonimageonly', true );

ButtonText: String :'...'

Set the text content of the trigger button.
Initial: $ ('. selector'). datepicker ({buttonText: 'choose '});
Get: var buttonText = $ ('. selector'). datepicker ('option', 'buttontext ');
Settings: $ ('. selector'). datepicker ('option', 'buttontext', 'choose ');

ChangeMonth: Boolean: false

Select a month from the drop-down list.
Initial: $ ('. selector'). datepicker ({changeMonth: true });
Get: var changeMonth = $ ('. selector'). datepicker ('option', 'changemonth ');
Settings: $ ('. selector'). datepicker ('option', 'changemonth', true );

ChangeYear: Boolean: false

Select a year from the drop-down list.
Initial: $ ('. selector'). datepicker ({changeYear: true });
Get: var changeYear = $ ('. selector'). datepicker ('option', 'changeyear ');
Set: $ ('. selector'). datepicker ('option', 'changeyear', true );

CloseTextType: StringDefault: 'done'

Set the text content of the close button. This button is displayed only after the showButtonPanel parameter is set.
Initial: $ ('. selector'). datepicker ({closeText: 'X '});
Get: var closeText = $ ('. selector'). datepicker ('option', 'closetext ');
Settings: $ ('. selector'). datepicker ('option', 'closetext ', 'x ');

ConstrainInput: Boolean: true

If this parameter is set to true, the input date format is restricted.
Initial: $ ('. selector'). datepicker ({constrainInput: false });
Get: var constrainInput = $ ('. selector'). datepicker ('option', 'constrainininininput ');
Settings: $ ('. selector'). datepicker ('option', 'constrainininininput', false );

CurrentText: String: 'today'

Set the text content of the button of the current day. This button must be displayed only by setting the showButtonPanel parameter.
Initial: $ ('. selector'). datepicker ({currentText: 'right '});
Get: var currentText = $ ('. selector'). datepicker ('option', 'currenttext ');
Settings: $ ('. selector'). datepicker ('option', 'currenttext', 'right ');

DateFormat: String: 'Mm/dd/yy'

Set the display format of the date string.
Initial: $ ('. selector'). datepicker ({dateFormat: 'yy-mm-dd '});
Get: var dateFormat = $ ('. selector'). datepicker ('option', 'dateformat ');
Settings: $ ('. selector'). datepicker ('option', 'dateformat', 'yy-mm-dd ');

DayNames: Array: ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'Friday', 'saturday']

Set the name of each day in one week, starting from Sunday. This content is displayed when dateFormat is used, and when you move the cursor to the line header in the calendar.
Initial: $ ('. selector '). datepicker ({dayNames: ['dimanch', 'lundi ', 'Mardi', 'mercredi ', 'jeudi', 'vendredi ', 'samedi']});
Get: var dayNames = $ ('. selector'). datepicker ('option', 'daynames ');
Set: $ ('. selector '). datepicker ('option', 'daynames', ['dimanch', 'lundi ', 'Mardi', 'mercredi ', 'jeudi', 'vendredi ', 'sampled']);

DayNamesMin: Array: ['su ', 'mo', 'tu', 'we', 'th', 'Fr', 'sa ']

Set daily dashboard for one week. This content is used for dateFormat display starting from Sunday, and the line header in the previous calendar is displayed.
Initial: $ ('. selector '). datepicker ({dayNamesMin: ['di', 'lu', 'M', 'me', 'Je ', 've', 'sa']});
Get: var dayNamesMin = $ ('. selector'). datepicker ('option', 'daynamesmin ');
Set: $ ('. selector '). datepicker ('option', 'daynamesmin', ['di', 'lu', 'M', 'me', 'Je ', 've ', 'sa ']);

DayNamesShort: Array: ['sun', 'mon', 'tue ', 'wed', 'thu', 'fri', 'sat']

Set daily dashboard for one week. This content is used for dateFormat display starting from Sunday, and the line header in the previous calendar is displayed.
Initial: $ ('. selector '). datepicker ({dayNamesShort: ['dim', 'lun ', 'mar', 'M', '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

Set the date selected for the first display after the default loading. It can be a Date object, a number (from today, for example, + 7), or a valid string ('y' indicates the year, 'M' indicates the month, and 'w' indicates the week, 'D' indicates the day, for example, '+ 1 m + 7d ').
Initial: $ ('. selector'). datepicker ({defaultDate: + 7 });
Get: var defaultDate = $ ('. selector'). datepicker ('option', 'defaultdate ');
Settings: $ ('. selector'). datepicker ('option', 'defaultdate', + 7 );

Duration: String, Number: 'normal'

Set the animation display time of the date control. Optional values: "slow", "normal", "fast", '', indicating instant, and number indicating milliseconds.
Initial: $ ('. selector'). datepicker ({duration: 'low '});
Get: var duration =$ ('. selector'). datepicker ('option', 'duration ');
Settings: $ ('. selector'). datepicker ('option', 'duration', 'low ');

FirstDay: Number: 0

Set 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 ');
Settings: $ ('. selector'). datepicker ('option', 'firstday', 1 );

GotoCurrent: Boolean: false

If it is set to true, when you click the "Today" button, it will be moved to the selected date, instead of today.
Initial: $ ('. selector'). datepicker ({gotoCurrent: true });
Get: var gotoCurrent = $ ('. selector'). datepicker ('option', 'gotocurrent ');
Settings: $ ('. selector'). datepicker ('option', 'gostream', true );

HideIfNoPrevNext: Boolean: false

Hide the corresponding button when no previous or next option is available. (Unavailable by default)
Initial: $ ('. selector'). datepicker ({hideIfNoPrevNext: true });
Get: var hideIfNoPrevNext = $ ('. selector'). datepicker ('option', 'hideifnoprevnext ');
Set: $ ('. selector'). datepicker ('option', 'hideifnoprevnext ', true );

IsRTL: Boolean: false

If it is set to true, all text is from right to left.
Initial: $ ('. selector'). datepicker ({isRTL: true });
Get: var isRTL = $ ('. selector'). datepicker ('option', 'isrtl ');
Settings: $ ('. selector'). datepicker ('option', 'isrtl ', true );

MaxDate: Date, Number, String: null

Set the maximum optional date. It can be a Date object, a number (from today, for example, + 7), or a valid string ('y' indicates the year, 'M' indicates the month, and 'w' indicates the week, 'D' indicates the day, for example, '+ 1 m + 7d ').
Initial: $ ('. selector'). datepicker ({maxDate: '+ 1 m + 1w '});
Obtain: var maxDate = $ ('. selector'). datepicker ('option', 'maxdate ');
Settings: $ ('. selector'). datepicker ('option', 'maxdate', '+ 1 m + 1w ');
$ ('. Selector'). datepicker ('option', 'maxdate', '2017/123 ');

MinDate: Date, Number, String: null

Set a minimum optional date. It can be a Date object, a number (from today, for example, + 7), or a valid string ('y' indicates the year, 'M' indicates the month, and 'w' indicates the week, 'D' indicates the day, for example, '+ 1 m + 7d ').
Initial: $ ('. selector'). datepicker ({minDate: new Date (2007, 1-1, 1 )});
Get: var minDate = $ ('. selector'). datepicker ('option', 'mindate ');
Settings: $ ('. selector'). datepicker ('option', 'mindate', new Date (2007, 1-1, 1 ));

$ ('. Selector'). datepicker ('option', 'mindate', '2017/123 ');
MonthNames: Array: ['january ', 'february', 'march', 'clerl', 'may', 'june', 'july', 'August ', 'September ', 'October', 'november', 'december']

Set the name of all months.
Initial: $ ('. selector '). datepicker ({monthNames: ['januar ', 'februar', 'marts', 'marril', 'maj', 'juni', 'juli', 'August ', 'September ', 'oktober', 'November ', 'december']});
Get: var monthNames = $ ('. selector'). datepicker ('option', 'monthnames ');
Set: $ ('. selector '). datepicker ('option', 'monthnames', ['januar ', 'februar', 'marts', 'marril', 'maj', 'juni', 'juli ', 'August ', 'September', 'oktober ', 'November', 'december ']);
MonthNamesShort: Array: ['Jan ', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug ', 'sept', 'oct', 'nov', 'dec ']

Set the abbreviation of all months.

Initial: $ ('. selector '). datepicker ({monthNamesShort: ['Jan ', 'feb', 'mar', 'apr', 'maj', 'jun', 'jul', 'aug ', 'sept', 'okt', 'nov', 'dec ']});
Get: var monthNamesShort = $ ('. selector'). datepicker ('option', 'monthnamesshort ');
Set: $ ('. selector '). datepicker ('option', 'monthnamesshort ', ['Jan', 'feb', 'mar ', 'apr', 'maj', 'jun', 'jul ', 'aug', 'sep', 'okt', 'nov', 'dec ']);

NavigationAsDateFormat: Boolean: false

If this parameter is set to true, the formatDate function is applied to the values of prevText, nextText, and currentText, for example, the month name.
Initial: $ ('. selector'). datepicker ({navigationAsDateFormat: true });
Get: var navigationAsDateFormat = $ ('. selector'). datepicker ('option', 'navigationasdateformat ');
Set: $ ('. selector'). datepicker ('option', 'navigationasdateformat', true );

NextText: String: 'Next'

Set the display text of the "Next Month" link.
Initial: $ ('. selector'). datepicker ({nextText: 'later '});
Get: var nextText = $ ('. selector'). datepicker ('option', 'nexttext ');
Settings: $ ('. selector'). datepicker ('option', 'nexttext', 'later ');

NumberOfMonths: Number, Array: 1

Set the number of months to be displayed at a time. If the value is an integer, the number of months is displayed. If the value is an array, the number of rows and columns is displayed.
Initial: $ ('. selector'). datepicker ({numberOfMonths: [2, 3]});
Get: var numberOfMonths = $ ('. selector'). datepicker ('option', 'numberofmonths ');
Settings: $ ('. selector'). datepicker ('option', 'numberofmonths', [2, 3]);

PrevText: String: 'prev'

Set the display text of the "last month" link.
Initial: $ ('. selector'). datepicker ({prevText: 'earlier '});
Get: var prevText = $ ('. selector'). datepicker ('option', 'prevtext ');
Settings: $ ('. selector'). datepicker ('option', 'prevtext', 'earlier ');

ShortYearCutoff: String, Number: '+ 10'

Set the value of the End year. If it is a number (0-99), it starts from the current year. If it is a string, convert it to a number and then add it to the current year. When the deadline is exceeded, it is considered as the last century.
Initial: $ ('. selector'). datepicker ({shortYearCutoff: 50 });
Get: var shortYearCutoff = $ ('. selector'). datepicker ('option', 'shortyearcutoff ');
Settings: $ ('. selector'). datepicker ('option', 'shortyearcutoff ', 50 );

ShowAnim: String: 'show'

Set the name of the animation for displaying and hiding the date plug-in.
Initial: $ ('. selector'). datepicker ({showAnim: 'fold '});
Get: var showAnim = $ ('. selector'). datepicker ('option', 'showanim ');
Settings: $ ('. selector'). datepicker ('option', 'showanim ', 'fold ');

ShowButtonPanel: Boolean: false

Set whether to display related buttons on the panel.
Initial: $ ('. selector'). datepicker ({showButtonPanel: true });
Obtain: var showButtonPanel = $ ('. selector'). datepicker ('option', 'showbuttonpanel ');
Settings: $ ('. selector'). datepicker ('option', 'showbuttonpanel ', true );

ShowCurrentAtPos: Number: 0

Set the position of the current month when multiple months are displayed. X digits starting from the top/left.
Initial: $ ('. selector'). datepicker ({showCurrentAtPos: 3 });
Get: var showCurrentAtPos = $ ('. selector'). datepicker ('option', 'showcurrentatpos ');
Settings: $ ('. selector'). datepicker ('option', 'showcurrentatpos', 3 );

ShowMonthAfterYear: Boolean: false

Whether the month is displayed after the first year of the Panel.
Initial: $ ('. selector'). datepicker ({showMonthAfterYear: true });
Get: var showMonthAfterYear = $ ('. selector'). datepicker ('option', 'showmonthafteryear ');
Set: $ ('. selector'). datepicker ('option', 'showmonthafteryear', true );

ShowOn: String: 'focal'
Set the panel of the date plug-in for event triggering display. Optional values: focus, button, and both.
Initial: $ ('. selector'). datepicker ({showOn: 'both '});
Get: var showOn = $ ('. selector'). datepicker ('option', 'showon ');
Settings: $ ('. selector'). datepicker ('option', 'showon', 'both ');

ShowOptions: Options :{}

If you use showAnim to display the animation effect, you can use this parameter to add some additional parameter settings.
Initial: $ ('. selector'). datepicker ({showOptions: {ction: 'up '});
Get: var showOptions = $ ('. selector'). datepicker ('options', 'showoptions ');
Settings: $ ('. selector'). datepicker ('option', 'showoptions', {ction: 'up ');

ShowOtherMonths: Boolean: false

Indicates the number of days displayed on the current Panel or in the next two months (optional ).
Initial: $ ('. selector'). datepicker ({showOtherMonths: true });
Get: var showOtherMonths = $ ('. selector'). datepicker ('option', 'showothermonths ');
Set: $ ('. selector'). datepicker ('option', 'showothermonths', true );

StepMonths: Number: 1

When you click "TOP"/"next month, it will take several months at a time.
Initial: $ ('. selector'). datepicker ({stepMonths: 3 });
Get: var stepMonths = $ ('. selector'). datepicker ('option', 'stepmonths ');
Settings: $ ('. selector'). datepicker ('option', 'stepmonths', 3 );

YearRange: String: '-10: + 10'

The number of years displayed in the drop-down list of the control year can be relative to the current year (-nn: + nn) or absolute value (-nnnn: + nnnn)
Initial: $ ('. selector'). datepicker ({yearRange: '2014: 2000 '});
Get: var yearRange = $ ('. selector'). datepicker ('option', 'earrange ');
Settings: $ ('. selector'). datepicker ('option', 'earrange', '2014: 2000 ');

BeforeShow: function (input)

This event is triggered before the date control display panel, and the Instance Object of the control that currently triggers the event is returned.
Initial: $ ('. selector'). datepicker ({beforeShow: function (input ){...}});

BeforeShowDay: function (date)

Before the date control displays the Panel, this event is triggered when the date on each panel is bound. The parameter is the date on which the event is triggered. After the function is called, an array must be returned: [0] whether the date is optional (true/false), [1] The CSS style name of the date ("" indicates the default value ), [2] A prompt appears when you move the mouse over it.
Initial: $ ('. selector'). datepicker ({beforeShowDay: function (date ){...}});

OnChangeMonthYear: function (year, month, inst)

This event is triggered when the year or month changes. The parameter is the instance of the year month and current date plug-in after the change.
Initial: $ ('. selector'). datepicker ({onChangeMonthYear: function (year, month, inst ){...}});

OnClose: function (dateText, inst)

When the date panel is closed, this event is triggered (whether or not a date is selected). The parameter is the instance of the selected date and current date plug-in.
Initial: $ ('. selector'). datepicker ({onClose: function (dateText, inst ){...}});

OnSelect: function (dateText, inst)

This event is triggered when a date is selected in the date panel. The parameter is the instance of the selected date and current date plug-in.
$ ('. Selector'). datepicker ({onSelect: function (dateText, inst ){...}});
The above content introduces JQuery datepicker usage, and I hope you will like it.
Articles you may be interested in:

 

 
  
The default value of z-index in JQuery UI DatePicker is 1.
 
  
JQuery UI Datepicker length is null or is not an object error Solution
 
  
Simple DatePicker calendar implemented by javascript
 
  
JQuery datepicker usage
 
  
A07_TimePicker & DatePicker & AnalogClock & DigitalClock setting Summary
 
  
Detailed analysis of the datepicker attribute of the jquery date Control
 
  
Jquery datepicker parameter introduction and example
 
  
JQuery ui uses the datepicker plug-in to implement minDate and maxDate)
 
  
Jquery date selection datepicker plug-in usage instance analysis