recherche

Maison  >  Article  >  interface Web  >  Explication détaillée de JQuery datepicker utilisation_jquery

Explication détaillée de JQuery datepicker utilisation_jquery

WBOY
WBOYoriginal
2016-05-16 15:23:271760parcourir

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');

altFormat : Chaîne : ''


Lorsque altField est défini, le format de date s'affiche dans un autre champ.

Initiale : $('.selector').datepicker({ altFormat : 'aa-mm-jj' });
Obtenez : var altFormat = $('.selector').datepicker('option', 'altFormat');
Paramètres : $('.selector').datepicker('option', 'altFormat', 'aa-mm-jj');

appendText : Chaîne : ''


Ajoutez la chaîne spécifiée après le domaine du plug-in de date.

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.

Initiale : $('.selector').datepicker({ buttonImage: '/images/datepicker.gif' });

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.

Initiale : $('.selector').datepicker({ buttonImageOnly: true });

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.

Initiale : $('.selector').datepicker({ buttonText : 'Choose' });

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 });

Obtenez : var changeMonth = $('.selector').datepicker('option', 'changeMonth');

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 });

Obtenez : var changeYear = $('.selector').datepicker('option', 'changeYear');

Paramètre : $('.selector').datepicker('option', 'changeYear', true
closeTextType : StringDefault : 'Terminé'

Définissez le contenu du texte du bouton de fermeture. Ce bouton doit être affiché via le réglage du paramètre showButtonPanel.

Initiale : $('.selector').datepicker({ closeText: 'X' });
Obtenez : var closeText = $('.selector').datepicker('option', 'closeText');

Paramètres : $('.selector').datepicker('option', 'closeText', 'X');


constrainInput : Boolean : true


Si défini sur true, contraint le format de date d'entrée actuel.

Initiale : $('.selector').datepicker({ constrainInput: false });

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.

Initiale : $('.selector').datepicker({ currentText : 'Now' });

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' });

Obtenez : var dateFormat = $('.selector').datepicker('option', 'dateFormat');

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');

showOtherMonths : 부울 : false


현재 패널에 이전 및 다음 2개월의 일부 날짜 숫자를 표시할지 여부(선택 사항 아님).

초기: $('.selector').datepicker({ showOtherMonths: true });
가져오기: var showOtherMonths = $('.selector').datepicker('option', 'showOtherMonths');
설정: $('.selector').datepicker('option', 'showOtherMonths', true)

stepMonths : 숫자 : 1


이전/다음 달을 클릭하면 여러 달씩 스크롤됩니다.

초기: $('.selector').datepicker({ stepMonths: 3 });
가져오기: var stepMonths = $('.selector').datepicker('option', 'stepMonths');
설정: $('.selector').datepicker('option', 'stepMonths', 3)

yearRange : 문자열 : '-10: 10'


연도 드롭다운 목록에 표시되는 연도 수를 제어합니다. 연도는 현재 연도 기준(-nn: nn) 또는 절대 연도(-nnnn: nnnn)일 수 있습니다.

초기: $('.selector').datepicker({ yearRange: '2000:2010' });
가져오기: var yearRange = $('.selector').datepicker('option', 'yearRange');
설정: $('.selector').datepicker('option', 'yearRange', '2000:2010');

beforeShow : 함수(입력)


이 이벤트는 날짜 컨트롤이 패널을 표시하기 전에 트리거되며 현재 이벤트를 트리거하는 컨트롤의 인스턴스 개체를 반환합니다.

초기: $('.selector').datepicker({ beforeShow: function(input) { ... } });

beforeShowDay : 함수(날짜)


날짜 컨트롤이 패널을 표시하기 전에 각 패널의 날짜가 바인딩되면 이 이벤트가 트리거되며 매개변수는 이벤트를 트리거한 날짜입니다. 함수를 호출한 후 배열이 반환되어야 합니다. [0] 이 날짜가 선택 사항인지(true/false), [1] 이 날짜의 CSS 스타일 이름(""은 기본값을 의미), [2] 다음과 같은 경우 프롬프트가 나타납니다. 마우스가 콘텐츠 위로 이동합니다.

초기: $('.selector').datepicker({ beforeShowDay: function(date) { ... } });


onChangeMonthYear : 함수(년, 월, 초)

이 이벤트는 연도 또는 월이 변경될 때 발생합니다. 매개 변수는 변경된 연도 및 월과 현재 날짜 플러그인의 인스턴스입니다.
초기: $('.selector').datepicker({ onChangeMonthYear: function(연도, 월, 단위) { ... } });

onClose: 함수(dateText, inst)

이 이벤트는 날짜 패널이 닫힐 때(날짜 선택 여부와 관계없이) 발생하며, 매개변수는 선택한 날짜와 현재 날짜 플러그인의 인스턴스입니다.

초기: $('.selector').datepicker({ onClose: function(dateText, inst) { ... } });

onSelect : 함수(dateText, inst)



이 이벤트는 날짜 패널에서 날짜를 선택하면 트리거됩니다. 매개변수는 선택한 날짜와 현재 날짜 플러그인의 인스턴스입니다.

$('.selector').datepicker({ onSelect: function(dateText, inst) { ... } });


위 콘텐츠에서는 JQuery datepicker 사용법을 소개합니다. 마음에 드셨으면 좋겠습니다.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Une collection de méthodes et de fonctions JavaScript couramment utilisées que je dois partager (Partie 2)_compétences JavascriptArticle suivant：Une collection de méthodes et de fonctions JavaScript couramment utilisées que je dois partager (Partie 2)_compétences Javascript

Articles Liés

Voir plus