JQuery 날짜 선택기 사용법_jquery

WBOY
풀어 주다: 2016-05-16 18:06:35
원래의
1512명이 탐색했습니다.

공식 주소: http://docs.jquery.com/UI/Datepicker, 공식 예: http://jqueryui.com/demos/datepicker/ .

DIY jQuery UI 인터페이스 효과 사이트 좋은 주소http://jqueryui.com/themeroller/

DatePicker 기본 사용법:

코드 복사 코드는 다음과 같습니다.

< ;!DOCTYPE html>












DatePicker는 날짜를 선택하기 위해 마우스 클릭을 지원하며 선택 항목도 가능합니다. 키보드를 통해 제어하세요:


page up/ 아래쪽 - 이전 달, 다음 달
ctrl 페이지 위/아래 - 이전 연도, 다음 해
ctrl home - 이번 달 또는 마지막으로 연 날짜
ctrl 왼쪽/오른쪽 - 이전 날짜, 다음
ctrl up/down - 이전 주, 다음 주
enter - 선택한 날짜 확인
ctrl end - 선택한 날짜 닫기 및 지우기
esc - 선택 닫기 및 취소


유용함 함수:


$.datepicker.setDefaults(settings ) - 날짜 선택기 플러그인 매개변수에 대한 전역 설정
$.datepicker.formatDate( format, date, settings) - 표시할 날짜 문자열 형식 지정
$.datepicker.iso8601Week( date ) - 날짜 지정 , 그리고 그것은 실제로 한 해의 첫날입니다. Weeks
$.datepicker.parseDate(format, value, settings) - 지정된 형식에 따라 날짜 문자열을 가져옵니다


날짜 형식:


d - 날짜(선행 없음) 0)
dd - 날짜(두 자리)
o - 날짜(앞에 0이 없음)
oo - 날짜(세 자리)
D - 날짜 이름 short
DD - 긴 날짜 이름
m - 월(앞에 0이 없음)
mm - 월(두 자리)
M - 짧은 월 이름
MM - 긴 월 이름
y - 연도(2자리) 숫자)
yy - 연도(4자리)
@ - Unix 타임스탬프(1970년 1월 1일부터)
'...' - 텍스트
'' - 단일 quote
(기타) - 텍스트


기타 표준 날짜 형식:


ATOM - 'yy-mm-dd' (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 : String : ''
altField가 설정된 경우 다른 필드에 날짜 형식을 표시하는 경우.
초기: $('.selector').datepicker({ altFormat: 'yy-mm-dd' })
가져오기: var altFormat = $('.selector').datepicker('option', 'altFormat');
설정: $('.selector').datepicker('option', 'altFormat', 'yy-mm-dd')

appendText : String : ''
날짜 플러그인의 도메인 뒤에 지정된 문자열을 추가합니다.
초기: $('.selector').datepicker({appendText: '(yyyy-mm-dd)' })
가져오기: varappendText = $('.selector').datepicker('option ', 'appendText')
설정: $('.selector').datepicker('option', 'appendText', '(yyyy-mm-dd)')

buttonImage : String : ''
팝업 버튼의 그림을 설정합니다. 비어 있지 않으면 버튼의 텍스트가 alt 속성이 되어 직접 표시되지 않습니다.
초기: $('.selector').datepicker({buttonImage: '/images/datepicker.gif' })
가져오기: varbuttonImage = $('.selector').datepicker('option' , 'buttonImage')
설정: $('.selector').datepicker('option', 'buttonImage', '/images/datepicker.gif')

buttonImageOnly : Boolean : false
버튼에 표시되지 않고 트리거로 사용하기 위해 필드 뒤에 이미지를 배치하려면 true로 설정합니다.
초기: $('.selector').datepicker({buttonImageOnly: true }); 가져오기: var ButtonImageOnly = $('.selector').datepicker('option', 'buttonImageOnly')
설정: $('.selector').datepicker('option', 'buttonImageOnly', true);

buttonText : String : '...'
트리거 버튼의 텍스트 내용을 설정합니다.
초기: $('.selector').datepicker({buttonText: 'Choose' })
가져오기: varbuttonText = $('.selector').datepicker('option', 'buttonText') ;
설정: $('.selector').datepicker('option', 'buttonText', 'Choose')

changeMonth : Boolean : false
설정에서는 드롭을 통해 선택할 수 있습니다. 다운리스트 달.
초기: $('.selector').datepicker({changeMonth: true });
가져오기: varchangeMonth = $('.selector').datepicker('option', 'changeMonth'); 🎜>설정: $('.selector').datepicker('option', 'changeMonth', true)

changeYear : Boolean : false
설정에서는 드롭다운 목록을 통해 연도를 선택할 수 있습니다.
초기: $('.selector').datepicker({changeYear: true });
가져오기: varchangeYear = $('.selector').datepicker('option', 'changeYear'); 🎜>설정: $('.selector').datepicker('option', 'changeYear', true)

closeTextType: StringDefault: 'Done'
닫기 버튼의 텍스트 내용을 설정합니다. 이 버튼은 showButtonPanel 매개변수 설정을 통해 표시되어야 합니다.
초기: $('.selector').datepicker({ closeText: 'X' })
가져오기: var closeText = $('.selector').datepicker('option', 'closeText') ;
설정: $('.selector').datepicker('option', 'closeText', 'X')

constrainInput : Boolean : true
true로 설정하면 제약 조건이 적용됩니다. 현재 입력 날짜 형식입니다.
초기: $('.selector').datepicker({ constrainInput: false })
Get: var constrainInput = $('.selector').datepicker('option', 'constrainInput'); 🎜>설정: $('.selector').datepicker('option', 'constrainInput', false)

currentText : String : 'Today'
오늘 버튼의 텍스트 내용을 설정합니다. 버튼 showButtonPanel 매개변수 설정을 통해 표시되어야 합니다.
초기: $('.selector').datepicker({ currentText: 'Now' });
가져오기: var currentText = $('.selector').datepicker('option', 'currentText') ;
설정: $('.selector').datepicker('option', 'currentText', 'Now')

dateFormat : String : 'mm/dd/yy'
설정 날짜 문자열의 표시 형식입니다.
초기: $('.selector').datepicker({ dateFormat: 'yy-mm-dd' })
가져오기: var dateFormat = $('.selector').datepicker('option', 'dateFormat');
설정: $('.selector').datepicker('option', 'dateFormat', 'yy-mm-dd')

dayNames : 배열: ['Sunday ', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일']
일요일부터 시작하여 각 요일의 이름을 설정합니다. 이 내용은 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', ['디', '루', '마', '나', '제', '베', '사'])

dayNamesShort : 배열 : ['일', '월', '화', '수', '목', '금', '토']
일요일부터 각 요일에 대한 약어를 설정합니다. 이 내용은 dateFormat으로 표시됩니다. 이전 달력의 행 헤더.
초기값: $('.selector').datepicker({ dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] });
가져오기: var dayNamesShort = $('.selector').datepicker('option', 'dayNamesShort')
설정: $('.selector').datepicker('option', 'dayNamesShort', ['딤', '룬', '마르', '메르', '즈', '벤', '샘'])

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)

duration : String, Number : 'normal'
날짜 컨트롤 표시 설정 확장 애니메이션 시간, 옵션 옵션은 "느림", "보통", "빠름"이며, ''는 즉시를 나타내고 숫자는 밀리초를 나타냅니다.
초기: $('.selector').datepicker({ 기간: '느린' });
가져오기: var 기간 = $('.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 })
Get: 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'는 일을 나타냄)일 수 있습니다. : '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 : Date, Number, String : 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월']})
Get: var MonthNames = $('.selector').datepicker('option', 'monthNames')
설정: $('.selector').datepicker('option', 'monthNames', ['Januar','Februar','Marts','April','Maj','Juni','Juli',' 8월','9월','10월','11월','12월'])

monthNamesShort : Array : ['1월', '2월', '3월', '4월', '5월' ', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
모든 달에 대한 약어를 설정합니다.
초기값: $('.selector').datepicker({monthNamesShort:['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug' ,'9월','Okt','11월','12월']});
가져오기: var MonthNamesShort = $('.selector').datepicker('option', 'monthNamesShort')
설정: $('.selector').datepicker('option', 'monthNamesShort', ['Jan','Feb','Mar','Apr','Maj','Jun','Jul',' Aug','Sep','Okt','Nov','Dec']);

navigationAsDateFormat : Boolean : false
true로 설정하면 formatDate 함수가 prevText, nextText에 적용됩니다. currentText 값에 표시됩니다. 예를 들어 월 이름으로 표시됩니다.
초기: $('.selector').datepicker({ NavigationAsDateFormat: true })
Get: var NavigationAsDateFormat = $('.selector').datepicker('option', 'navigationAsDateFormat'); 🎜>설정: $('.selector').datepicker('option', 'navigationAsDateFormat', true)

nextText : String : 'Next'
"다음 달" 표시 설정 링크 워드.
초기: $('.selector').datepicker({ nextText: 'Later' })
가져오기: var nextText = $('.selector').datepicker('option', 'nextText') ;
설정: $('.selector').datepicker('option', 'nextText', 'Later')

numberOfMonths : Number, Array : 1
표시할 개수 설정; 한 번에 몇 달. 정수인 경우 표시되는 월 수입니다. 배열인 경우 표시되는 행과 열의 수입니다.
초기: $('.selector').datepicker({ numberOfMonths: [2, 3] })
가져오기: var numberOfMonths = $('.selector').datepicker('option', 'numberOfMonths ');
설정: $('.selector').datepicker('option', 'numberOfMonths', [2, 3])

prevText : String : 'Prev'
설정 "지난 달" 링크에 대한 텍스트를 표시합니다.
초기: $('.selector').datepicker({ prevText: 'Earlier' })
가져오기: var prevText = $('.selector').datepicker('option', 'prevText') ;
설정: $('.selector').datepicker('option', 'prevText', 'Earlier')

shortYearCutoff : String, Number : ' 10'
컷오프 설정 연도 값. 숫자(0~99)인 경우 현재 연도부터 계산을 시작합니다. 문자열인 경우 숫자로 변환한 후 현재 연도에 추가합니다. 기준 연도를 초과하면 이전 세기로 간주됩니다.
초기: $('.selector').datepicker({ shortYearCutoff: 50 })
가져오기: var shortYearCutoff = $('.selector').datepicker('option', 'shortYearCutoff'); 🎜>설정: $('.selector').datepicker('option', 'shortYearCutoff', 50)

showAnim : String : 'show'
날짜 표시 및 숨기기 애니메이션 설정 플러그인 이름.
초기: $('.selector').datepicker({ showAnim: 'fold' });
가져오기: var showAnim = $('.selector').datepicker('option', 'showAnim') ;
설정: $('.selector').datepicker('option', 'showAnim', 'fold')

showButtonPanel : Boolean : false
표시 여부에 관한 설정 패널 버튼.
초기: $('.selector').datepicker({ showButtonPanel: true })
가져오기: var showButtonPanel = $('.selector').datepicker('option', 'showButtonPanel'); 🎜>설정: $('.selector').datepicker('option', 'showButtonPanel', true)

showCurrentAtPos : Number : 0
여러 달이 표시될 때 현재 달 설정 표시 위치 . 상단/왼쪽에서 x번째 위치부터 시작합니다.
초기: $('.selector').datepicker({ showCurrentAtPos: 3 })
Get: var showCurrentAtPos = $('.selector').datepicker('option', 'showCurrentAtPos'); 🎜>설정: $('.selector').datepicker('option', 'showCurrentAtPos', 3)

showMonthAfterYear : Boolean : false
헤더에 연도 다음 달을 표시할지 여부 패널의.
초기: $('.selector').datepicker({ showMonthAfterYear: true })
가져오기: var showMonthAfterYear = $('.selector').datepicker('option', 'showMonthAfterYear'); 🎜>설정: $('.selector').datepicker('option', 'showMonthAfterYear', true)

showOn : String : 'focus'
날짜 표시 플러그를 트리거하는 이벤트 설정- 패널에서 선택적 값: 포커스, 버튼, 둘 다
초기: $('.selector').datepicker({ showOn: 'both' })
Get: 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 : Boolean : false
예 현재 패널에 이전 및 다음 두 달의 일부 날짜 숫자를 표시합니다(선택할 수 없음).
초기: $('.selector').datepicker({ showOtherMonths: true })
가져오기: var showOtherMonths = $('.selector').datepicker('option', 'showOtherMonths')
설정: $('.selector').datepicker('option', 'showOtherMonths', true);

stepMonths : Number : 1
이전/다음 달을 클릭하면 한 달에 한 번 스크롤하십시오.
초기: $('.selector').datepicker({ stepMonths: 3 });
가져오기: var stepMonths = $('.selector').datepicker('option', 'stepMonths'); 🎜>설정: $('.selector').datepicker('option', 'stepMonths', 3)

yearRange : String : '-10: 10'
드롭의 연도 제어 -다운 목록 표시되는 연도 수는 현재 연도(-nn: nn) 또는 절대(-nnnn: nnnn)를 기준으로 할 수 있습니다.
초기: $('.selector').datepicker({ yearRange: '2000: 2010 ' });
가져오기: var yearRange = $('.selector').datepicker('option', 'yearRange')
설정: $('.selector').datepicker('option' , 'yearRange', '2000:2010');

이벤트

beforeShow : function(input)
날짜 컨트롤이 패널을 표시하기 전에 이 이벤트를 트리거하고 현재 이벤트를 트리거하는 컨트롤의 인스턴스 개체를 반환합니다.
초기: $('.selector').datepicker({ beforeShow: function(input) { ... } })

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

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

onClose : function(dateText, inst)
날짜 패널을 닫으면(날짜 선택 여부와 관계없이) 이 이벤트가 발생하며, 매개변수는 선택한 날짜와 현재 날짜 플러그인의 인스턴스입니다.
초기: $('.selector').datepicker({ onClose: function(dateText, inst) { ... } })

onSelect : function(dateText, inst)
때 이 이벤트는 날짜 패널에서 날짜를 선택한 후 트리거됩니다. 매개변수는 선택한 날짜와 현재 날짜 플러그인의 인스턴스입니다.
$('.selector').datepicker({ onSelect: function(dateText, inst) { ... } })

메서드:

코드 복사 코드는 다음과 같습니다.
destroy
요소에서 드래그 기능을 제거합니다.
사용법: .datepicker( 'destroy' )

disable
요소의 드래그 기능을 비활성화합니다.
사용법: .datepicker( 'disable' )

enable
요소의 드래그 기능을 활성화합니다.
사용법: .datepicker( 'enable' )

옵션
요소의 매개변수를 가져오거나 설정합니다.
사용법: .datepicker( 'option' , optionName , [value] )

dialog
대화 상자 플러그인에서 날짜 플러그인을 엽니다.
사용법: .datepicker( 'dialog' , dateText , [onSelect] , [settings] , [pos] )

isDisabled
날짜 플러그인이 비활성화되었는지 확인하세요.
사용법: .datepicker( 'isDisabled' )

hide
이전에 열린 날짜 패널을 숨깁니다(닫기).
사용법: .datepicker( 'hide' , [speed] )

show
.datepicker( 'show' )
날짜 표시 플러그인.
사용법: .datepicker( 'show' )

getDate
현재 날짜 플러그인에서 선택한 날짜를 반환합니다.
사용법: .datepicker( 'getDate' )

setDate
날짜 플러그인의 현재 날짜를 설정합니다. 날짜 매개변수는 숫자(오늘부터 계산, 예: 7) 또는 유효한 문자열('y'는 연도, 'm'은 월, 'w'는 주, 'd'는 일, 예: ' 1m)일 수 있습니다. 7d'), null은 현재 날짜를 의미합니다.
사용법: .datepicker( 'setDate' , date )




jquery-ui-datepicker 사용법 설명
1: 처음 사용하는 경우 관련 js를 페이지로 가져올 때 소개 순서가 틀릴 수 없으니 주의하세요

jquery-1.4.2.min.js
jquery-ui.min.js
jquery.ui.datepicker .min.js
jquery.ui.datepicker-zh-CN.min.js
jquery.ui.datepicker-fr.min.js
....등등. use)
참고: 언어 팩의 마지막 문장은 날짜 선택기의 기본 현지화를 설정합니다.
이 문장과 유사: setDefaults(....regional[...])
따라서 날짜 선택기의 페이지는 더 이상 자체적으로 설정되지 않습니다. 기본적으로 마지막으로 도입된 언어 패키지의 현지화가 우선합니다.

2: 페이지 예

datepicker의 공식 문서는 매우 명확합니다. datepicker를 먼저 설정한 다음 setter 또는 getter를 설정해야 합니다.

코드 복사 코드는 다음과 같습니다.