Home >Web Front-end >JS Tutorial >Detailed explanation of JQuery datepicker usage_jquery
Detailed explanation of JQuery datepicker usage_jquery
- WBOYOriginal
- 2016-05-16 15:23:271787browse
jQuery UI is very powerful. The date selection plug-in Datepicker is a plug-in with flexible configuration. We can customize its display method, including date format, language, limit the selected 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 effect sitehttp://jqueryui.com/themeroller/
Basic usage of DatePicker:
<!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>
page up/down - 上一月、下一月
ctrl+page up/down - 上一年、下一年
ctrl+home - 当前月或最后一次打开的日期
ctrl+left/right - 上一天、下一天
ctrl+up/down - 上一周、下一周
enter - 确定选择日期
ctrl+end - 关闭并清除已选择的日期
escape - 关闭并取消选择
$.datepicker.setDefaults( settings ) - 全局设置日期选择插件的参数.
$.datepicker.formatDate( format, date, settings ) - 格式化显示的日期字符串
$.datepicker.iso8601Week( date ) - 给出一个日期，确实他是一年中的第几周
$.datepicker.parseDate( format, value, settings ) - 按照指定格式获取日期字符串
d - 每月的第几天 (没有前导零)
dd - 每月的第几天 (两位数字)
o - 一年中的第几天 (没有前导零)
oo - 一年中的第几天 (三位数字)
D - day name short
DD - day name long
m - 月份 (没有前导零)
mm - 月份 (两位数字)
M - month name short
MM - month name long
y - 年份 (两位数字)
yy - 年份 (四位数字)
@ - Unix 时间戳 (从 01/01/1970 开始)
'...' - 文本
'' - 单引号
（其它） - 文本
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'
altField : String : ''
Synchronize the selected date to another domain, and use altFormat to display date strings in 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 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 of the date plug-in.
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 picture 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', '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.
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
Settings allow month selection via drop-down list.
Initial: $('.selector').datepicker({ changeMonth: true });
Get: var changeMonth = $('.selector').datepicker('option', 'changeMonth');
Setting: $('.selector').datepicker('option', 'changeMonth', true);
changeYear : Boolean : false
The setting allows selecting the year through the drop-down list.
Initial: $('.selector').datepicker({ changeYear: true });
Get: var changeYear = $('.selector').datepicker('option', 'changeYear');
Setting: $('.selector').datepicker('option', 'changeYear', true);
closeTextType: StringDefault: 'Done'
Set the text content of the close button. This button needs to be displayed through the setting of the showButtonPanel parameter.
Initial: $('.selector').datepicker({ closeText: 'X' });
Get: var closeText = $('.selector').datepicker('option', 'closeText');
Settings: $('.selector').datepicker('option', 'closeText', 'X');
constrainInput : Boolean : true
If set to true, constrains the current input date format.
Initial: $('.selector').datepicker({ constrainInput: false });
Get: var constrainInput = $('.selector').datepicker('option', 'constrainInput');
Settings: $('.selector').datepicker('option', 'constrainInput', false);
currentText : String : 'Today'
Set the text content of the button for the day. This button needs to be displayed through the setting of the showButtonPanel parameter.
Initial: $('.selector').datepicker({ currentText: 'Now' });
Get: var currentText = $('.selector').datepicker('option', 'currentText');
Settings: $('.selector').datepicker('option', 'currentText', 'Now');
dateFormat : String : 'mm/dd/yy'
Set the display format of 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 of the week, starting from Sunday. This content is displayed when the dateFormat is used, and when the mouse moves to the head of the row in the calendar.
Initial: $('.selector').datepicker({ dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] });
Get: 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 the abbreviation for each day of the week, starting from Sunday, this content is displayed when used in dateFormat, and displayed in the line header in the previous calendar.
Initial: $('.selector').datepicker({ dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] });
Get: 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 the abbreviation for each day of the week, starting from Sunday, this content is displayed when used in dateFormat, and displayed in the line header in the previous calendar.
Initial: $('.selector').datepicker({ dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] });
Get: var dayNamesShort = $('.selector').datepicker('option', 'dayNamesShort');
Settings: $('.selector').datepicker('option', 'dayNamesShort', ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam']) ;
defaultDate : Date, Number, String : null
Set the default date selected when it is displayed for the first time after loading. It can be a Date object, a number (counting from today, for example +7), or a valid string ('y' represents year, 'm' represents month, 'w' represents week, 'd' represents day, for example :'+1m +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 display time of the date control expansion animation, the options are "slow", "normal", "fast", '' represents immediately, and the number represents the number of milliseconds.
Initial: $('.selector').datepicker({ duration: 'slow' });
Get: var duration = $('.selector').datepicker('option', 'duration');
Settings: $('.selector').datepicker('option', 'duration', 'slow');
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');
Setting: $('.selector').datepicker('option', 'firstDay', 1);
gotoCurrent : Boolean : false
If set to true, when clicking the today button, it will move to the currently selected date instead of today.
Initial: $('.selector').datepicker({ gotoCurrent: true });
Get: var gotoCurrent = $('.selector').datepicker('option', 'gotoCurrent');
Setting: $('.selector').datepicker('option', 'gotoCurrent', true);
hideIfNoPrevNext : Boolean : false
Set the corresponding button to be hidden when there is no previous/next option. (Default is not available)
Initial: $('.selector').datepicker({ hideIfNoPrevNext: true });
Get: var hideIfNoPrevNext = $('.selector').datepicker('option', 'hideIfNoPrevNext');
Settings: $('.selector').datepicker('option', 'hideIfNoPrevNext', true);
isRTL : Boolean : false
If set to true, all text will be from right to left.
Initial: $('.selector').datepicker({ isRTL: true });
Get: var isRTL = $('.selector').datepicker('option', 'isRTL');
Setting: $('.selector').datepicker('option', 'isRTL', true);
maxDate : Date, Number, String : null
Set a maximum selectable date. It can be a Date object, a number (counting from today, for example +7), or a valid string ('y' represents year, 'm' represents month, 'w' represents week, 'd' represents day, for example :'+1m +7d').
Initial: $('.selector').datepicker({ maxDate: '+1m +1w' });
Get: var maxDate = $('.selector').datepicker('option', 'maxDate');
Setting: $('.selector').datepicker('option', 'maxDate', '+1m +1w');
$('.selector').datepicker('option', 'maxDate', '12/25/2012');
minDate : Date, Number, String : null
Set a minimum selectable date. It can be a Date object, a number (counting from today, for example +7), or a valid string ('y' represents year, 'm' represents month, 'w' represents week, 'd' represents day, for example :'+1m +7d').
Initial: $('.selector').datepicker({ minDate: new Date(2007, 1 - 1, 1) });
Get: var minDate = $('.selector').datepicker('option', 'minDate');
Setting: $('.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']
Set the names of all months.
Initial: $('.selector').datepicker({monthNames:['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September ','Oktober','November','December']});
Get: 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.
Initial: $('.selector').datepicker({monthNamesShort:['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug' ,'Sep','Okt','Nov','Dec']});
Get: 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, the formatDate function will be applied to the values of prevText, nextText and currentText to display, for example, as the month name.
Initial: $('.selector').datepicker({ navigationAsDateFormat: true });
Get: var navigationAsDateFormat = $('.selector').datepicker('option', 'navigationAsDateFormat');
Settings: $('.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 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.
Initial: $('.selector').datepicker({ numberOfMonths: [2, 3] });
Get: var numberOfMonths = $('.selector').datepicker('option', 'numberOfMonths');
Setting: $('.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 cut-off year. If it is a number (0-99), it will be counted from the current year. If it is a string, it will be converted into a number and then added to the current year. When the cutoff year is exceeded, it is considered to be the previous century.
Initial: $('.selector').datepicker({ shortYearCutoff: 50 });
Get: var shortYearCutoff = $('.selector').datepicker('option', 'shortYearCutoff');
Setting: $('.selector').datepicker('option', 'shortYearCutoff', 50);
showAnim : String : 'show'
Set the name of the animation that shows and hides 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 });
Get: var showButtonPanel = $('.selector').datepicker('option', 'showButtonPanel');
Settings: $('.selector').datepicker('option', 'showButtonPanel', true);
showCurrentAtPos : Number : 0
Set the display position of the current month when multiple months are displayed. Starting at the xth position 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 to display the month after the year in the header of the panel.
Initial: $('.selector').datepicker({ showMonthAfterYear: true });
Get: 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. Optional values: focus, button, 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 animation effects, you can use this parameter to add some additional parameter settings.
Initial: $('.selector').datepicker({ showOptions: {direction: 'up' });
Get: var showOptions = $('.selector').datepicker('option', 'showOptions');
Settings: $('.selector').datepicker('option', 'showOptions', {direction: 'up');
showOtherMonths : Boolean : false
Whether to display some date numbers in the previous and next two months in the current panel (not optional).
Initial: $('.selector').datepicker({ showOtherMonths: true });
Get: var showOtherMonths = $('.selector').datepicker('option', 'showOtherMonths');
Settings: $('.selector').datepicker('option', 'showOtherMonths', true);
stepMonths : Number : 1
When clicking on the previous/next month, it will scroll through 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'
Controls the number of years displayed in the drop-down list of years, which can be relative to the current year (-nn:+nn) or absolute (-nnnn:+nnnn)
Initial: $('.selector').datepicker({ yearRange: '2000:2010' });
Get: var yearRange = $('.selector').datepicker('option', 'yearRange');
Setting: $('.selector').datepicker('option', 'yearRange', '2000:2010');
beforeShow : function(input)
This event is triggered before the date control displays the panel, and returns the instance object of the control that currently triggers the event.
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, and the parameter is the date that triggered the event. After calling the function, an array must be returned: [0] Whether this date is optional (true/false), [1] The CSS style name of this date ("" means default), [2] A prompt will appear when the mouse is moved above content.
Initial: $('.selector').datepicker({ beforeShowDay: function(date) { ... } });
onChangeMonthYear : function(year, month, inst)
This event is triggered when the year or month changes. The parameters are the changed year and month and the instance of the current 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 a date is selected), and the parameters are the selected date and the instance of the 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 parameters are the selected date and the instance of the current date plug-in.
$('.selector').datepicker({ onSelect: function(dateText, inst) { ... } });
The above content introduces you to the usage of JQuery datepicker. I hope you like it.
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills