Of Stack

Introduction and examples of jquery datepicker parameters

  • 2020-03-30 02:38:32
  • OfStack 


<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body style="font-size:62.5%;">
<div type="text" id="datepicker"></div>
</body>
</html>

Parameters of 2. 


altField : String : ''
 Synchronize the selected date into another field, match altFormat You can display date strings in different formats. 
 The original: $('.selector').datepicker({ altField: '#actualDate' });
 Access to: var altField = $('.selector').datepicker('option', 'altField');
 Settings: $('.selector').datepicker('option', 'altField', '#actualDate');
altFormat : String : ''
 When setting the altField The format of the date displayed in another field. 
 The original: $('.selector').datepicker({ altFormat: 'yy-mm-dd' });
 Access to: var altFormat = $('.selector').datepicker('option', 'altFormat');
 Settings: $('.selector').datepicker('option', 'altFormat', 'yy-mm-dd');
appendText : String : ''
 Adds the specified string after the field of the date plug-in. 
 The original: $('.selector').datepicker({ appendText: '(yyyy-mm-dd)' });
 Access to: var appendText = $('.selector').datepicker('option', 'appendText');
 Settings: $('.selector').datepicker('option', 'appendText', '(yyyy-mm-dd)');
buttonImage : String : ''
 Set the picture of the pop-up button, if not empty, the text of the button will become alt Property, not directly displayed. 
 The original: $('.selector').datepicker({ buttonImage: '/images/datepicker.gif' });
 Access to: var buttonImage = $('.selector').datepicker('option', 'buttonImage');
 Settings: $('.selector').datepicker('option', 'buttonImage', '/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.
 The original: $('.selector').datepicker({ buttonImageOnly: true });
 Access to: var buttonImageOnly = $('.selector').datepicker('option', 'buttonImageOnly');
 Settings: $('.selector').datepicker('option', 'buttonImageOnly', true);
buttonText : String : '...'
 Sets the text content of the trigger button. 
 The original: $('.selector').datepicker({ buttonText: 'Choose' });
 Access to: var buttonText = $('.selector').datepicker('option', 'buttonText');
 Settings: $('.selector').datepicker('option', 'buttonText', 'Choose');
changeMonth : Boolean : false
 The Settings allow you to select months from a drop-down list. 
 The original: $('.selector').datepicker({ changeMonth: true });
 Access to: var changeMonth = $('.selector').datepicker('option', 'changeMonth');
 Settings: $('.selector').datepicker('option', 'changeMonth', true);
changeYear : Boolean : false
 Setting allows the year to be selected through a drop-down list. 
 The original: $('.selector').datepicker({ changeYear: true });
 Access to: var changeYear = $('.selector').datepicker('option', 'changeYear');
 Settings: $('.selector').datepicker('option', 'changeYear', true);
closeTextType: StringDefault: 'Done'
 Sets the text content of the close button that needs to go through showButtonPanel Parameter Settings are displayed. 
 The original: $('.selector').datepicker({ closeText: 'X' });
 Access to: var closeText = $('.selector').datepicker('option', 'closeText');
 Settings: $('.selector').datepicker('option', 'closeText', 'X');
constrainInput : Boolean : true
 If set to true , then constrain the date format of the current input. 
 The original: $('.selector').datepicker({ constrainInput: false });
 Access to: var constrainInput = $('.selector').datepicker('option', 'constrainInput');
 Settings: $('.selector').datepicker('option', 'constrainInput', false);
currentText : String : 'Today'
 Sets the text content of the button of the day that needs to be passed showButtonPanel Parameter Settings are displayed. 
 The original: $('.selector').datepicker({ currentText: 'Now' });
 Access to: var currentText = $('.selector').datepicker('option', 'currentText');
 Settings: $('.selector').datepicker('option', 'currentText', 'Now');
dateFormat : String : 'mm/dd/yy'
 Sets the format for the display of the date string. 
 The original: $('.selector').datepicker({ dateFormat: 'yy-mm-dd' });
 Access to: 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 of the week, starting on Sunday. This content is used for dateFormat , and when the mouse moves over the row in the calendar. 
 The original: $('.selector').datepicker({ dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] });
 Access to: var dayNames = $('.selector').datepicker('option', 'dayNames');
 Settings: $('.selector').datepicker('option', 'dayNames', ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']);
dayNamesMin : Array : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
 Set abbreviations for each day of the week, starting on Sunday dateFormat Is displayed when the row in the previous calendar is displayed. 
 The original: $('.selector').datepicker({ dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] });
 Access to: var dayNamesMin = $('.selector').datepicker('option', 'dayNamesMin');
 Settings: $('.selector').datepicker('option', 'dayNamesMin', ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa']);
dayNamesShort : Array : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
 Set abbreviations for each day of the week, starting on Sunday dateFormat Is displayed when the row in the previous calendar is displayed. 
 The original: $('.selector').datepicker({ dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] });
 Access to: var dayNamesShort = $('.selector').datepicker('option', 'dayNamesShort');
 Settings: $('.selector').datepicker('option', 'dayNamesShort', ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam']);
defaultDate : Date, Number, String : null
 Sets the default date to be selected when first displayed after loading. Can be Date Objects, or Numbers (from today, for example +7 ), or a valid string ('y' On behalf of the year , 'm' On behalf of the month , 'w' On behalf of the week , 'd' On behalf of the day ,  Such as: '+1m +7d') . 
 The original: $('.selector').datepicker({ defaultDate: +7 });
 Access to: var defaultDate = $('.selector').datepicker('option', 'defaultDate');
 Settings: $('.selector').datepicker('option', 'defaultDate', +7);
duration : String, Number : 'normal'
 Sets the display time for the date control to expand the animation, optionally "slow", "normal", "fast" . '' The number represents the number of milliseconds. 
 The original: $('.selector').datepicker({ duration: 'slow' });
 Access to: var duration = $('.selector').datepicker('option', 'duration');
 Settings: $('.selector').datepicker('option', 'duration', 'slow');
firstDay : Number : 0
 Set the first day of the week. Sunday for 0 , Monday for 1 And so on. 
 The original: $('.selector').datepicker({ firstDay: 1 });
 Access to: var firstDay = $('.selector').datepicker('option', 'firstDay');
 Settings: $('.selector').datepicker('option', 'firstDay', 1);
gotoCurrent : Boolean : false
 If set to true , will move to the currently selected date when the day button is clicked, instead of today. 
 The original: $('.selector').datepicker({ gotoCurrent: true });
 Access to: var gotoCurrent = $('.selector').datepicker('option', 'gotoCurrent');
 Settings: $('.selector').datepicker('option', 'gotoCurrent', true);
hideIfNoPrevNext : Boolean : false
 Set when there is no previous one / In the next optional case, hide the corresponding button. (not available by default) 
 The original: $('.selector').datepicker({ hideIfNoPrevNext: true });
 Access to: var hideIfNoPrevNext = $('.selector').datepicker('option', 'hideIfNoPrevNext');
 Settings: $('.selector').datepicker('option', 'hideIfNoPrevNext', true);
isRTL : Boolean : false
 If set to true , then all text is from right to left. 
 The original: $('.selector').datepicker({ isRTL: true });
 Access to: var isRTL = $('.selector').datepicker('option', 'isRTL');
 Settings: $('.selector').datepicker('option', 'isRTL', true);
maxDate : Date, Number, String : null
 Set a maximum optional date. Can be Date Objects, or Numbers (from today, for example +7 ), or a valid string ('y' On behalf of the year , 'm' On behalf of the month , 'w' On behalf of the week , 'd' On behalf of the day ,  Such as: '+1m +7d') . 
 The original: $('.selector').datepicker({ maxDate: '+1m +1w' });
 Access to: var maxDate = $('.selector').datepicker('option', 'maxDate');
 Settings: $('.selector').datepicker('option', 'maxDate', '+1m +1w');
 $('.selector').datepicker('option', 'maxDate', '12/25/2012');
minDate : Date, Number, String : null
 Set a minimum optional date. Can be Date Objects, or Numbers (from today, for example +7 ), or a valid string ('y' On behalf of the year , 'm' On behalf of the month , 'w' On behalf of the week , 'd' On behalf of the day ,  Such as: '+1m +7d') . 
 The original: $('.selector').datepicker({ minDate: new Date(2007, 1 - 1, 1) });
 Access to: var minDate = $('.selector').datepicker('option', 'minDate');
 Settings: $('.selector').datepicker('option', 'minDate', new Date(2007, 1 - 1, 1));
 $('.selector').datepicker('option', 'minDate', '12/25/2012');
monthNames : Array : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
 Sets the names of all months. 
 The original: $('.selector').datepicker( { monthNames:['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December']});
 Access to: var monthNames = $('.selector').datepicker('option', 'monthNames');
 Settings: $('.selector').datepicker('option', 'monthNames', ['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December']);
monthNamesShort : Array : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
 Set abbreviations for all months. 
 The original: $('.selector').datepicker( { monthNamesShort:['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec']});
 Access to: var monthNamesShort = $('.selector').datepicker('option', 'monthNamesShort');
 Settings: $('.selector').datepicker('option', 'monthNamesShort', ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec']);
navigationAsDateFormat : Boolean : false
 If set to true , formatDate The function will apply to  prevText,nextText and currentText Is displayed in, for example, the month name. 
 The original: $('.selector').datepicker({ navigationAsDateFormat: true });
 Access to: var navigationAsDateFormat = $('.selector').datepicker('option', 'navigationAsDateFormat');
 Settings: $('.selector').datepicker('option', 'navigationAsDateFormat', true);
nextText : String : 'Next'
 Set the display text for the next month link. 
 The original: $('.selector').datepicker({ nextText: 'Later' });
 Access to: var nextText = $('.selector').datepicker('option', 'nextText');
 Settings: $('.selector').datepicker('option', 'nextText', 'Later');
numberOfMonths : Number, Array : 1
 Sets how many months to display at a time. If it is an integer, it is the number of months displayed; if it is an array, it is the number of rows and columns displayed. 
 The original: $('.selector').datepicker({ numberOfMonths: [2, 3] });
 Access to: var numberOfMonths = $('.selector').datepicker('option', 'numberOfMonths');
 Settings: $('.selector').datepicker('option', 'numberOfMonths', [2, 3]);
prevText : String : 'Prev'
 Sets the display text for the "last month" link. 
 The original: $('.selector').datepicker({ prevText: 'Earlier' });
 Access to: var prevText = $('.selector').datepicker('option', 'prevText');
 Settings: $('.selector').datepicker('option', 'prevText', 'Earlier');
shortYearCutoff : String, Number : '+10'
 Sets the value of the cutoff year. If it is, 0-99 ) starts from the current year. If it is a string, it will be converted to a number and then added to the current year. When the cut-off year is passed, it is considered to be the last century. 
 The original: $('.selector').datepicker({ shortYearCutoff: 50 });
 Access to: var shortYearCutoff = $('.selector').datepicker('option', 'shortYearCutoff');
 Settings: $('.selector').datepicker('option', 'shortYearCutoff', 50);
showAnim : String : 'show'
 Sets the name of the animation that shows and hides the date plug-in. 
 The original: $('.selector').datepicker({ showAnim: 'fold' });
 Access to: var showAnim = $('.selector').datepicker('option', 'showAnim');
 Settings: $('.selector').datepicker('option', 'showAnim', 'fold');
showButtonPanel : Boolean : false
 Sets whether to display related buttons on the panel. 
 The original: $('.selector').datepicker({ showButtonPanel: true });
 Access to: var showButtonPanel = $('.selector').datepicker('option', 'showButtonPanel');
 Settings: $('.selector').datepicker('option', 'showButtonPanel', true);
showCurrentAtPos : Number : 0
 Sets the position for the current month when multiple months are displayed. From the top / Start on the left x position 
 The original: $('.selector').datepicker({ showCurrentAtPos: 3 });
 Access to: var showCurrentAtPos = $('.selector').datepicker('option', 'showCurrentAtPos');
 Settings: $('.selector').datepicker('option', 'showCurrentAtPos', 3);
showMonthAfterYear : Boolean : false
 Whether the month is displayed after the year at the top of the panel. 
 The original: $('.selector').datepicker({ showMonthAfterYear: true });
 Access to: var showMonthAfterYear = $('.selector').datepicker('option', 'showMonthAfterYear');
 Settings: $('.selector').datepicker('option', 'showMonthAfterYear', true);
showOn : String : 'focus'
 Set what event triggers the panel that displays the date plug-in, with optional values: focus, button, both
 The original: $('.selector').datepicker({ showOn: 'both' });
 Access to: var showOn = $('.selector').datepicker('option', 'showOn');
 Settings: $('.selector').datepicker('option', 'showOn', 'both');
showOptions : Options : {}
 If you are using showAnim To display the animation effect, you can add some additional parameter Settings with this parameter. 
 The original: $('.selector').datepicker({ showOptions: {direction: 'up' });
 Access to: var showOptions = $('.selector').datepicker('option', 'showOptions');
 Settings: $('.selector').datepicker('option', 'showOptions', {direction: 'up');
showOtherMonths : Boolean : false
 Whether the current panel displays some number of dates for the next two months up or down (not optional). 
 The original: $('.selector').datepicker({ showOtherMonths: true });
 Access to: var showOtherMonths = $('.selector').datepicker('option', 'showOtherMonths');
 Settings: $('.selector').datepicker('option', 'showOtherMonths', true);
stepMonths : Number : 1
 When you click on the / The next month, roll over for months at a time. 
 The original: $('.selector').datepicker({ stepMonths: 3 });
 Access to: var stepMonths = $('.selector').datepicker('option', 'stepMonths');
 Settings: $('.selector').datepicker('option', 'stepMonths', 3);
yearRange : String : '-10:+10'
 The number of years shown in the drop-down list that controls the year, which can be relative to the current year (-nn:+nn) Or it could be the absolute value  (-nnnn:+nnnn)
 The original: $('.selector').datepicker({ yearRange: '2000:2010' });
 Access to: var yearRange = $('.selector').datepicker('option', 'yearRange');
 Settings: $('.selector').datepicker('option', 'yearRange', '2000:2010');

beforeShow : function(input)
 Fires this event and returns the instance object of the control that currently fires the event before the date control displays the panel. 
 The original: $('.selector').datepicker({ beforeShow: function(input) { ... } });
beforeShowDay : function(date)
 Before the date control is displayed on the panel, this event is triggered when a date is bound to each panel with the date of the event. After calling the function, you must return an array: [0] This date is optional (true/false) . [1] The date of CSS The style name ("" Said the default ) . [2] A prompt appears when the mouse moves over it. 
 The original: $('.selector').datepicker({ beforeShowDay: function(date) { ... } });
onChangeMonthYear : function(year, month, inst)
 This event is triggered when the date or month is changed with the changed year month and current date plug-in instance. 
 The original: $('.selector').datepicker({ onChangeMonthYear: function(year, month, inst) { ... } });
onClose : function(dateText, inst)
 This event is triggered when the date panel is closed (whether or not a date is selected) with the selected date and an instance of the current date plug-in. 
 The original: $('.selector').datepicker({ onClose: function(dateText, inst) { ... } });
onSelect : function(dateText, inst)
 This event is triggered when a date is selected in the date panel with the selected date and an instance of the current date plug-in. 
$('.selector').datepicker({ onSelect: function(dateText, inst) { ... } });
$.datepicker.setDefaults( settings ) -  The global setting date selects the parameters of the plug-in .
$.datepicker.formatDate( format, date, settings ) -  Format the displayed date string 
$.datepicker.iso8601Week( date ) -  Given a date, it is true that he is the week of the year 
$.datepicker.parseDate( format, value, settings ) -  Gets the date string in the specified format 

d -  The day of the month  ( There is no leading zero )
dd -  The day of the month  ( Two digits )
o -  The day of the year  ( There is no leading zero )
oo -  The day of the year  ( Three digits )
D - day name short
DD - day name long
m -  in  ( There is no leading zero )
mm -  in  ( Two digits )
M - month name short
MM - month name long
y -  year  ( Two digits )
yy -  year  ( The four digits )
@ - Unix  The time stamp  ( from  01/01/1970  start )
'...' -  The text 
'' -  Single quotes 
 (other)  -  The text 

ATOM - 'yy-mm-dd' (Same as RFC 3339/ISO 8601)
COOKIE - '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 - '@'
W3C - 'yy-mm-dd'

Related articles: