JQuery 날짜 선택기 사용법에 대한 자세한 설명
- WBOY원래의
- 2016-05-16 15:23:271792검색
jQuery UI는 매우 강력합니다. 날짜 선택 플러그인 Datepicker는 날짜 형식, 언어, 선택한 날짜 범위 제한, 관련 버튼 추가 및 기타 탐색을 포함한 표시 방법을 사용자 정의할 수 있는 유연한 플러그인입니다.
공식 주소: http://docs.jquery.com/UI/Datepicker, 공식 예: http://jqueryui.com/demos/datepicker/.
DIY jQuery UI 인터페이스 효과 사이트 좋은 주소http://jqueryui.com/themeroller/
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 : ''
선택한 날짜를 다른 도메인과 동기화하고 altFormat을 사용하여 날짜 문자열을 다른 형식으로 표시합니다.
초기: $('.selector').datepicker({ altField: '#actualDate' });
가져오기: var altField = $('.selector').datepicker('option', 'altField');
설정: $('.selector').datepicker('option', 'altField', '#actualDate')
altFormat : 문자열 : ''
altField를 설정하면 날짜 형식이 다른 필드에 표시됩니다.
초기: $('.selector').datepicker({ altFormat: 'yy-mm-dd' });
가져오기: var altFormat = $('.selector').datepicker('option', 'altFormat');
설정: $('.selector').datepicker('option', 'altFormat', 'yy-mm-dd')
appendText : 문자열 : ''
날짜 플러그인의 도메인 뒤에 지정된 문자열을 추가합니다.
초기: $('.selector').datepicker({appendText: '(yyyy-mm-dd)' });
가져오기: varappendText = $('.selector').datepicker('option', 'appendText');
설정: $('.selector').datepicker('option', 'appendText', '(yyyy-mm-dd)')
buttonImage : 문자열 : ''
팝업 버튼의 그림을 설정합니다. 비어 있지 않으면 버튼의 텍스트가 alt 속성이 되어 직접 표시되지 않습니다.
초기: $('.selector').datepicker({buttonImage: '/images/datepicker.gif' });
가져오기: var 버튼이미지 = $('.selector').datepicker('option', 'buttonImage');
설정: $('.selector').datepicker('option', 'buttonImage', '/images/datepicker.gif')
buttonImageOnly : 부울 : false
버튼에 표시되지 않고 트리거로 사용하기 위해 필드 뒤에 이미지를 배치하려면 true로 설정하세요.
초기: $('.selector').datepicker({buttonImageOnly: true });
가져오기: var ButtonImageOnly = $('.selector').datepicker('option', 'buttonImageOnly');
설정: $('.selector').datepicker('option', 'buttonImageOnly', true)
buttonText : 문자열 : '...'
트리거 버튼의 텍스트 내용을 설정합니다.
초기: $('.selector').datepicker({buttonText: 'Choose' });
가져오기: var ButtonText = $('.selector').datepicker('option', 'buttonText');
설정: $('.selector').datepicker('option', 'buttonText', 'Choose')
changeMonth : 부울 : false
설정에서는 드롭다운 목록을 통해 월을 선택할 수 있습니다.
초기: $('.selector').datepicker({changeMonth: true });
가져오기: varchangeMonth = $('.selector').datepicker('option', 'changeMonth');
설정: $('.selector').datepicker('option', 'changeMonth', true)
changeYear : 부울 : false
드롭다운 목록을 통해 연도를 선택할 수 있는 설정입니다.
초기: $('.selector').datepicker({changeYear: true });
가져오기: varchangeYear = $('.selector').datepicker('option', 'changeYear');
설정: $('.selector').datepicker('option', 'changeYear', true)
closeTextType: StringDefault: '완료'
닫기 버튼의 텍스트 내용을 설정합니다. 이 버튼은 showButtonPanel 매개변수 설정을 통해 표시되어야 합니다.
초기: $('.selector').datepicker({ closeText: 'X' });
가져오기: var closeText = $('.selector').datepicker('option', 'closeText');
설정: $('.selector').datepicker('option', 'closeText', 'X')
constrainInput : Boolean : true
true로 설정하면 현재 입력 날짜 형식을 제한합니다.
초기: $('.selector').datepicker({ constrainInput: false });
가져오기: var constrainInput = $('.selector').datepicker('option', 'constrainInput');
설정: $('.selector').datepicker('option', 'constrainInput', false)
currentText : 문자열 : '오늘'
해당 날짜의 버튼 텍스트 내용을 설정합니다. 이 버튼은 showButtonPanel 매개변수 설정을 통해 표시되어야 합니다.
초기: $('.selector').datepicker({ currentText: 'Now' });
가져오기: var currentText = $('.selector').datepicker('option', 'currentText');
설정: $('.selector').datepicker('option', 'currentText', 'Now')
dateFormat : 문자열 : 'mm/dd/yy'
날짜 문자열의 표시 형식을 설정합니다.
초기: $('.selector').datepicker({ dateFormat: 'yy-mm-dd' });
가져오기: var dateFormat = $('.selector').datepicker('option', 'dateFormat');
설정: $('.selector').datepicker('option', 'dateFormat', 'yy-mm-dd')
dayNames : 배열 : ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일']
設定一星期中每天的名稱，從星期日開始。此內容用於dateFormat時顯示，以及日曆中當滑鼠移至行頭時顯示。
初始：$('.selector').datepicker({ dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] });
取得：var dayNames = $('.selector').datepicker('option', 'dayNames');
設定：$('.selector').datepicker('option', 'dayNames', ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']) ;
dayNamesMin : Array : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
設定一星期中每天的縮寫，從星期日開始，此內容用於dateFormat時顯示，以前日曆中的行頭顯示。
初始：$('.selector').datepicker({ dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] });
取得：var dayNamesMin = $('.selector').datepicker('option', 'dayNamesMin');
設定：$('.selector').datepicker('option', 'dayNamesMin', ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa']) ;
dayNamesShort : Array : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
設定一星期中每天的縮寫，從星期日開始，此內容用於dateFormat時顯示，以前日曆中的行頭顯示。
初始：$('.selector').datepicker({ dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] });
取得：var dayNamesShort = $('.selector').datepicker('option', 'dayNamesShort');
設定：$('.selector').datepicker('option', 'dayNamesShort', ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam']) ;
defaultDate : Date, Number, String : null
設定預設載入完後第一次顯示時選取的日期。可以是Date對象，或是數字（從今天算起，例如+7），或有效的字串('y'代表年, 'm'代表月, 'w'代表週, 'd'代表日, 例如：'+1m +7d')。
初始：$('.selector').datepicker({ defaultDate: +7 });
取得：var defaultDate = $('.selector').datepicker('option', 'defaultDate');
設定：$('.selector').datepicker('option', 'defaultDate', +7);
duration : String, Number : 'normal'
設定日期控制展開動畫的顯示時間，可選是"slow", "normal", "fast"，''代表立刻，數字代表毫秒數。
初始：$('.selector').datepicker({ duration: 'slow' });
取得：var duration = $('.selector').datepicker('option', 'duration');
設定：$('.selector').datepicker('option', 'duration', 'slow');
firstDay : Number : 0
設定一週中的第一天。星期日為0，星期一為1，以此類推。
初始：$('.selector').datepicker({ firstDay: 1 });
取得：var firstDay = $('.selector').datepicker('option', 'firstDay');
設定：$('.selector').datepicker('option', 'firstDay', 1);
gotoCurrent : Boolean : false
若設定為true，點選當天按鈕時，將移至目前已選取的日期，而非今天。
初始：$('.selector').datepicker({ gotoCurrent: true });
取得：var gotoCurrent = $('.selector').datepicker('option', 'gotoCurrent');
設定：$('.selector').datepicker('option', 'gotoCurrent', true);
hideIfNoPrevNext : Boolean : false
設定當沒有上一個/下一個可選擇的情況下，請隱藏掉對應的按鈕。 （預設為不可用）
初始：$('.selector').datepicker({ hideIfNoPrevNext: true });
取得：var hideIfNoPrevNext = $('.selector').datepicker('option', 'hideIfNoPrevNext');
設定：$('.selector').datepicker('option', 'hideIfNoPrevNext', true);
isRTL : Boolean : false
如果設定為true，則所有文字是從右自左。
初始：$('.selector').datepicker({ isRTL: true });
取得：var isRTL = $('.selector').datepicker('option', 'isRTL');
設定：$('.selector').datepicker('option', 'isRTL', true);
maxDate : Date, Number, String : null
設定一個最大的可選日期。可以是Date對象，或是數字（從今天算起，例如+7），或有效的字串('y'代表年, 'm'代表月, 'w'代表週, 'd'代表日, 例如：'+1m +7d')。
初始：$('.selector').datepicker({ maxDate: '+1m +1w' });
取得：var maxDate = $('.selector').datepicker('option', 'maxDate');
設定：$('.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.