jQuery UI est très puissant. Le plug-in de sélection de date Datepicker est un plug-in flexible. Nous pouvons personnaliser sa méthode d'affichage, y compris le format de date, la langue, limiter la plage de dates sélectionnée, ajouter des boutons associés et d'autres navigations.
Adresse officielle : http://docs.jquery.com/UI/Datepicker, exemple officiel : http://jqueryui.com/demos/datepicker/.
Une bonne adresse pour le site d'effets d'interface DIY jQuery UIhttp://jqueryui.com/themeroller/
Utilisation de base de 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 : ''
Synchronisez la date sélectionnée avec un autre domaine et utilisez altFormat pour afficher les chaînes de date dans différents formats.
Initiale : $('.selector').datepicker({ altField : '#actualDate' });
Obtenez : var altField = $('.selector').datepicker('option', 'altField');
Paramètres : $('.selector').datepicker('option', 'altField', '#actualDate');
Initiale : $('.selector').datepicker({ altFormat : 'aa-mm-jj' });
Obtenez : var altFormat = $('.selector').datepicker('option', 'altFormat');
Paramètres : $('.selector').datepicker('option', 'altFormat', 'aa-mm-jj');
Initiale : $('.selector').datepicker({ appendText: '(aaaa-mm-jj)' });
Obtenez : var appendText = $('.selector').datepicker('option', 'appendText');
Paramètres : $('.selector').datepicker('option', 'appendText', '(aaaa-mm-jj)');
boutonImage : Chaîne : ''
Définissez l'image du bouton pop-up. S'il n'est pas vide, le texte du bouton deviendra l'attribut alt et ne sera pas affiché directement.
Obtenez : var boutonImage = $('.selector').datepicker('option', 'buttonImage');
Paramètres : $('.selector').datepicker('option', 'buttonImage', '/images/datepicker.gif');
buttonImageOnly : Boolean : false
Définissez sur true pour placer une image après le champ à utiliser comme déclencheur sans qu'elle apparaisse sur un bouton.
Obtenez : var boutonImageOnly = $('.selector').datepicker('option', 'buttonImageOnly');
Paramètres : $('.selector').datepicker('option', 'buttonImageOnly', true
);
buttonText : String : '...'
Définissez le contenu du texte du bouton de déclenchement.
Obtenez : var boutonText = $('.selector').datepicker('option', 'buttonText');
Paramètres : $('.selector').datepicker('option', 'buttonText', 'Choose');
changeMonth : Booléen : faux
Les paramètres permettent la sélection du mois via la liste déroulante.
Initiale : $('.selector').datepicker({ changeMonth: true });
Paramètres : $('.selector').datepicker('option', 'changeMonth', true
);
changeYear : Booléen : faux
Le paramètre permet de sélectionner l'année via la liste déroulante.
Initiale : $('.selector').datepicker({ changeYear: true });
Paramètre : $('.selector').datepicker('option', 'changeYear', true
closeTextType : StringDefault : 'Terminé'
Initiale : $('.selector').datepicker({ closeText: 'X' });
Obtenez : var closeText = $('.selector').datepicker('option', 'closeText');
constrainInput : Boolean : true
Si défini sur true, contraint le format de date d'entrée actuel.
Obtenez : var constrainInput = $('.selector').datepicker('option', 'constrainInput');
Paramètres : $('.selector').datepicker('option', 'constrainInput', false
currentText : String : 'Aujourd'hui'
Définissez le contenu du texte du bouton pour le jour. Ce bouton doit être affiché via le réglage du paramètre showButtonPanel.
Obtenez : var currentText = $('.selector').datepicker('option', 'currentText');
Paramètres : $('.selector').datepicker('option', 'currentText', 'Now');
dateFormat : Chaîne : 'mm/jj/aa'
Définissez le format d'affichage de la chaîne de date.
Initiale : $('.selector').datepicker({ dateFormat : 'aa-mm-jj' });
Paramètres : $('.selector').datepicker('option', 'dateFormat', 'aa-mm-jj');
dayNames : Array : ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']
일요일부터 시작하여 각 요일의 이름을 설정합니다. 이 내용은 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 : 배열 : ['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 : 배열 : ['일', '월', '화', '수', '목', '금', '토']
각 요일에 대한 약어를 설정합니다. 일요일부터 시작하여 이 내용은 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 : 날짜, 숫자, 문자열 : null
로딩 후 처음 표시될 때 선택되는 기본 날짜를 설정합니다. Date 객체, 숫자(오늘부터 계산, 예: 7) 또는 유효한 문자열('y'는 연도를 나타내고, 'm'은 월을 나타내고, 'w'는 주를 나타내고, 'd'는 일을 나타냄)일 수 있습니다. : '1분 7일').
초기: $('.selector').datepicker({ defaultDate: 7 });
가져오기: var defaultDate = $('.selector').datepicker('option', 'defaultDate');
설정: $('.selector').datepicker('option', 'defaultDate', 7)
기간 : 문자열, 숫자 : 'normal'
날짜 제어 확장 애니메이션의 표시 시간을 설정합니다. 옵션은 "느리게", "보통", "빠르게"이며 ''는 즉시를 나타내고 숫자는 밀리초를 나타냅니다.
초기: $('.selector').datepicker({ 기간: 'slow' });
가져오기: var 기간 = $('.selector').datepicker('option', 'duration');
설정: $('.selector').datepicker('option', 'duration', 'slow')
firstDay : 숫자 : 0
한 주의 첫날을 설정합니다. 일요일은 0, 월요일은 1 등입니다.
초기: $('.selector').datepicker({ firstDay: 1 });
가져오기: var firstDay = $('.selector').datepicker('option', 'firstDay');
설정: $('.selector').datepicker('option', 'firstDay', 1)
gotoCurrent : 부울 : false
true로 설정하면 오늘 버튼 클릭 시 오늘이 아닌 현재 선택된 날짜로 이동합니다.
초기: $('.selector').datepicker({ gotoCurrent: true });
가져오기: var gotoCurrent = $('.selector').datepicker('option', 'gotoCurrent');
설정: $('.selector').datepicker('option', 'gotoCurrent', true)
hideIfNoPrevNext : 부울 : false
이전/다음 옵션이 없을 때 해당 버튼이 숨겨지도록 설정합니다. (기본값은 불가능)
초기: $('.selector').datepicker({ hideIfNoPrevNext: true });
가져오기: var hideIfNoPrevNext = $('.selector').datepicker('option', 'hideIfNoPrevNext');
설정: $('.selector').datepicker('option', 'hideIfNoPrevNext', true)
isRTL : 부울 : false
true로 설정하면 모든 텍스트가 오른쪽에서 왼쪽으로 표시됩니다.
초기: $('.selector').datepicker({ isRTL: true });
가져오기: var isRTL = $('.selector').datepicker('option', 'isRTL');
설정: $('.selector').datepicker('option', 'isRTL', true)
maxDate : 날짜, 숫자, 문자열 : null
선택 가능한 최대 날짜를 설정하세요. Date 객체, 숫자(오늘부터 계산, 예: 7) 또는 유효한 문자열('y'는 연도를 나타내고, 'm'은 월을 나타내고, 'w'는 주를 나타내고, 'd'는 일을 나타냄)일 수 있습니다. : '1분 7일').
초기: $('.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 : 날짜, 숫자, 문자열 : null
선택 가능한 최소 날짜를 설정하세요. Date 객체, 숫자(오늘부터 계산, 예: 7) 또는 유효한 문자열('y'는 연도를 나타내고, 'm'은 월을 나타내고, 'w'는 주를 나타내고, 'd'는 일을 나타냄)일 수 있습니다. : '1분 7일').
초기: $('.selector').datepicker({ minDate: new Date(2007, 1 - 1, 1) });
가져오기: var minDate = $('.selector').datepicker('option', 'minDate');
설정: $('.selector').datepicker('option', 'minDate', new Date(2007, 1 - 1, 1));
$('.selector').datepicker('option', 'minDate', '12/25/2012')
MonthNames : 배열 : ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', ' 12월']
모든 달의 이름을 설정합니다.
초기: $('.selector').datepicker({monthNames:['Januar','Februar','Marts','April','Maj','Juni','Juli','August','9월 ','10월','11월','12월']});
가져오기: var MonthNames = $('.selector').datepicker('option', 'monthNames');
설정: $('.selector').datepicker('option', 'monthNames', ['Januar','Februar','Marts','April','Maj','Juni','Juli',' 8월','9월','10월','11월','12월'])
MonthNamesShort : 배열 : ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', ' 12월']
모든 달에 대한 약어를 설정합니다.
초기: $('.selector').datepicker({monthNamesShort:['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug' ,'9월','확인','11월','12월']});
가져오기: var MonthNamesShort = $('.selector').datepicker('option', 'monthNamesShort');
설정: $('.selector').datepicker('option', 'monthNamesShort', ['Jan','Feb','Mar','Apr','Maj','Jun','Jul',' 8월','9월','확인','11월','12월'])
navigationAsDateFormat : 부울 : false
true로 설정하면 prevText, nextText, currentText 값에 formatDate 함수가 적용되어 월 이름 등으로 표시됩니다.
초기: $('.selector').datepicker({ NavigationAsDateFormat: true });
가져오기: var NavigationAsDateFormat = $('.selector').datepicker('option', 'navigationAsDateFormat');
설정: $('.selector').datepicker('option', 'navigationAsDateFormat', true)
nextText : 문자열 : '다음'
"다음 달" 링크의 표시 텍스트를 설정합니다.
초기: $('.selector').datepicker({ nextText: 'Later' });
가져오기: var nextText = $('.selector').datepicker('option', 'nextText');
설정: $('.selector').datepicker('option', 'nextText', 'Later')
numberOfMonths : 숫자, 배열 : 1
한 번에 몇 개월을 표시할지 설정하세요. 정수인 경우 표시되는 월 수입니다. 배열인 경우 표시되는 행과 열의 수입니다.
초기: $('.selector').datepicker({ numberOfMonths: [2, 3] });
가져오기: var numberOfMonths = $('.selector').datepicker('option', 'numberOfMonths');
설정: $('.selector').datepicker('option', 'numberOfMonths', [2, 3])
prevText : 문자열 : '이전'
"지난 달" 링크의 표시 텍스트를 설정합니다.
초기: $('.selector').datepicker({ prevText: 'Earlier' });
가져오기: var prevText = $('.selector').datepicker('option', 'prevText');
설정: $('.selector').datepicker('option', 'prevText', 'Earlier')
shortYearCutoff : 문자열, 숫자 : ' 10'
컷오프 연도 값을 설정합니다. 숫자(0~99)인 경우 현재 연도부터 계산을 시작합니다. 문자열인 경우 숫자로 변환한 후 현재 연도에 추가합니다. 기준 연도를 초과하면 이전 세기로 간주됩니다.
초기: $('.selector').datepicker({ shortYearCutoff: 50 });
가져오기: var shortYearCutoff = $('.selector').datepicker('option', 'shortYearCutoff');
설정: $('.selector').datepicker('option', 'shortYearCutoff', 50)
showAnim : 문자열 : 'show'
날짜 플러그인을 표시하거나 숨기는 애니메이션의 이름을 설정합니다.
초기: $('.selector').datepicker({ showAnim: 'fold' });
가져오기: var showAnim = $('.selector').datepicker('option', 'showAnim');
설정: $('.selector').datepicker('option', 'showAnim', 'fold')
showButtonPanel : 부울 : false
관련 버튼을 패널에 표시할지 여부를 설정합니다.
초기: $('.selector').datepicker({ showButtonPanel: true });
가져오기: var showButtonPanel = $('.selector').datepicker('option', 'showButtonPanel');
설정: $('.selector').datepicker('option', 'showButtonPanel', true)
showCurrentAtPos : 숫자 : 0
여러 달을 표시할 때 현재 달이 표시되는 위치를 설정합니다. 상단/왼쪽에서 x번째 위치부터 시작합니다.
초기: $('.selector').datepicker({ showCurrentAtPos: 3 });
가져오기: var showCurrentAtPos = $('.selector').datepicker('option', 'showCurrentAtPos');
설정: $('.selector').datepicker('option', 'showCurrentAtPos', 3)
showMonthAfterYear : 부울 : false
패널 헤더에 연도 다음 달을 표시할지 여부입니다.
초기: $('.selector').datepicker({ showMonthAfterYear: true });
가져오기: var showMonthAfterYear = $('.selector').datepicker('option', 'showMonthAfterYear');
설정: $('.selector').datepicker('option', 'showMonthAfterYear', true)
showOn : 문자열 : '초점'
날짜 플러그인을 표시하는 패널을 트리거하는 이벤트를 설정합니다. 선택 값: 포커스, 버튼, 모두
초기: $('.selector').datepicker({ showOn: 'both' });
가져오기: var showOn = $('.selector').datepicker('option', 'showOn');
설정: $('.selector').datepicker('option', 'showOn', 'both')
showOptions : 옵션 : {}
showAnim을 사용하여 애니메이션 효과를 표시하는 경우 이 매개변수를 사용하여 몇 가지 추가 매개변수 설정을 추가할 수 있습니다.
초기: $('.selector').datepicker({ showOptions: {direction: 'up' });
가져오기: var showOptions = $('.selector').datepicker('option', 'showOptions');
설정: $('.selector').datepicker('option', 'showOptions', {direction: 'up');
초기: $('.selector').datepicker({ showOtherMonths: true });
가져오기: var showOtherMonths = $('.selector').datepicker('option', 'showOtherMonths');
설정: $('.selector').datepicker('option', 'showOtherMonths', true)
초기: $('.selector').datepicker({ stepMonths: 3 });
가져오기: var stepMonths = $('.selector').datepicker('option', 'stepMonths');
설정: $('.selector').datepicker('option', 'stepMonths', 3)
초기: $('.selector').datepicker({ yearRange: '2000:2010' });
가져오기: var yearRange = $('.selector').datepicker('option', 'yearRange');
설정: $('.selector').datepicker('option', 'yearRange', '2000:2010');
초기: $('.selector').datepicker({ beforeShow: function(input) { ... } });
beforeShowDay : 함수(날짜)
날짜 컨트롤이 패널을 표시하기 전에 각 패널의 날짜가 바인딩되면 이 이벤트가 트리거되며 매개변수는 이벤트를 트리거한 날짜입니다. 함수를 호출한 후 배열이 반환되어야 합니다. [0] 이 날짜가 선택 사항인지(true/false), [1] 이 날짜의 CSS 스타일 이름(""은 기본값을 의미), [2] 다음과 같은 경우 프롬프트가 나타납니다. 마우스가 콘텐츠 위로 이동합니다.
onChangeMonthYear : 함수(년, 월, 초)
이 이벤트는 연도 또는 월이 변경될 때 발생합니다. 매개 변수는 변경된 연도 및 월과 현재 날짜 플러그인의 인스턴스입니다.
초기: $('.selector').datepicker({ onChangeMonthYear: function(연도, 월, 단위) { ... } });
onClose: 함수(dateText, inst)
초기: $('.selector').datepicker({ onClose: function(dateText, inst) { ... } });
이 이벤트는 날짜 패널에서 날짜를 선택하면 트리거됩니다. 매개변수는 선택한 날짜와 현재 날짜 플러그인의 인스턴스입니다.
위 콘텐츠에서는 JQuery datepicker 사용법을 소개합니다. 마음에 드셨으면 좋겠습니다.