Jquery 날짜, 시간 선택 플러그인

Jquery 날짜, 시간 선택 플러그인
 
준비 작업
우선 jqueryui로 오세요.com 홈페이지에서datepicker 플러그인 코드를 다운로드합니다. 홈페이지에서 전체 jquery ui의 모든 플러그인을 다운로드할 수 있습니다. 그러나 이 중 몇 개의 플러그인을 다운로드할 수 있습니다. 본고에서datepicker만 사용하기 때문에 jquery ui 핵심 코드와datepicker 코드만 다운로드할 수 있습니다.본문 위의 Download 다운로드 단추를 직접 눌러서 데모 원본 패키지를 다운로드할 수 있습니다. 여기에datepicker 플러그인 원본 코드가 포함되어 있습니다.
HTML
우선 헤드 사이에 jquery 라이브러리 파일과datepicker 플러그인 및 관련 css를 도입합니다. 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery-ui-datepicker.js"></script> 
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> 

그리고 바디 사이에 입력 상자를 넣으세요. 
<input type="text" id="date_1" /> 

Javscript
datepicker를 호출하는 것은 매우 간단합니다. 다음 코드를 직접 사용하면 됩니다. 
$(function(){ 
    $("#date_1").datepicker(); 
}); 

이렇게 하면 입력 상자를 누르면 자동으로 날짜 선택기가 팝업되고, 날짜를 선택하면 자동으로 선택기를 닫고, 입력 상자에 선택한 날짜를 표시합니다.
   
jQuery
입력 상자가 초점을 얻었을 때datetimepicker를 호출합니다. 
$('#example_1').datetimepicker(); 

시간만 표시하면: 
$('#example_2').timepicker(); 

시간 형식을 정의하려면 다음과 같이 하십시오. 
$('#example_3').datetimepicker({ 
     showSecond: true, 
     showMillisec: true, 
     timeFormat: 'hh:mm:ss:l' 
}); 

 
 
옵션 및 이벤트 사용 설명
datepicker는 다양한 옵션을 제공하여 이벤트 설정 방법을 호출합니다. 필자는 자주 사용하는 관련 속성과 방법을 표로 정리하여 조회와 사용을 편리하게 합니다. 
옵션
묘사
기본값
altField
선택한 날짜를 다른 필드로 동기화합니다.altFormat와 함께 다른 형식의 날짜 문자열을 표시할 수 있습니다.demo
''
altFormat
altField를 설정한 경우 다른 도메인에 표시되는 날짜 형식입니다.
''
appendText
날짜 플러그인의 소속 영역 뒤에 지정한 문자열을 추가합니다.
''
buttonImage
팝업 달력의 단추 그림을 클릭할 수 있도록 설정합니다. 만약 비어 있지 않으면 단추의 텍스트는alt 속성이 되어 직접 보이지 않습니다.demo
''
buttonImageOnly
true로 설정하면 그림이 단추로 되어 팝업 달력을 터치할 수 있습니다
false
buttonText
트리거 단추의 텍스트 내용을 설정합니다.
...
changeMonth
드롭다운 상자 목록에서 월을 선택할 수 있는지 여부를 설정합니다.
false
changeYear
드롭다운 상자 목록에서 연도를 선택할 수 있는지 여부를 설정합니다.
false
closeText
닫기 단추의 텍스트 내용을 설정합니다. 이 단추는 showButtonPanel 매개 변수의 설정을 통해 표시됩니다.
'Done'
constrainInput
true로 설정하면 현재 입력한 날짜 형식이 구속됩니다.
true
currentText
당일 단추의 텍스트 내용을 설정합니다. 이 단추는 showButtonPanel 매개 변수의 설정을 통해 표시됩니다.
'Today'
dateFormat
날짜 문자열의 표시 형식을 설정합니다.demo
'mm/dd/yy'
dayNames
일요일부터 일주일 동안 매일 이름을 설정합니다.이 컨텐트는 dateFormat 및 캘린더에서 마우스가 줄 머리로 이동할 때 표시되는 데 사용됩니다.
['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
dayNamesMin
일요일부터dateFormat에 사용할 때, 이전 달력의 줄 헤더에 사용할 줄임말을 설정합니다.
['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
dayNamesShort
일요일부터dateFormat에 사용할 때, 이전 달력의 줄 헤더에 사용할 줄임말을 설정합니다.
['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
defaultDate
기본 로드가 완료된 후 처음 표시될 때 선택한 날짜를 설정합니다.Date 대상이거나 숫자(예를 들어 +7) 또는 유효한 문자열('y'는 연,'m'는 월,'w'는 주,'d'는 일, 예를 들어'+1m+7d')이 될 수 있습니다.
null
duration
날짜 컨트롤이 애니메이션을 펼칠 시간을 설정합니다. 선택할 수 있는 것은 'slow', 'normal','fast ',' 즉각적이고 숫자는 밀리초 수입니다.
'normal'
firstDay
일주일 중 첫날을 설정합니다.일요일은 0, 월요일은 1로 유추한다.
0
gotoCurrent
true로 설정하면, 당일 단추를 누르면 현재 선택한 날짜로 이동합니다. 오늘이 아니라 현재 선택한 날짜로 이동합니다.
false
hideIfNoPrevNext
이전/다음 선택 사항이 없는 경우 해당 단추를 숨기도록 설정합니다.
false
isRTL
true로 설정하면 모든 문자가 오른쪽에서 왼쪽으로 이동합니다.
false
maxDate
선택할 수 있는 최대 날짜를 설정합니다.Date 대상이거나 숫자(예를 들어 +7) 또는 유효한 문자열('y'는 연,'m'는 월,'w'는 주,'d'는 일, 예를 들어'+1m+7d')이 될 수 있습니다.demo
null
minDate
선택할 수 있는 최소 날짜를 설정합니다.Date 대상이거나 숫자(예를 들어 +7) 또는 유효한 문자열('y'는 연,'m'는 월,'w'는 주,'d'는 일, 예를 들어'+1m+7d')이 될 수 있습니다.
null
monthNames
모든 월의 이름을 설정합니다.
['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
monthNamesShort
모든 월의 약어를 설정합니다.
['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
navigationAsDateFormat
true로 설정하면formatDate 함수는prevText,nextText,currentText의 값에 적용됩니다. 예를 들어 월 이름으로 표시됩니다.
false
nextText
다음 달 링크의 표시 문자를 설정합니다.
'Next'
numberOfMonths
한 번에 표시할 달을 설정합니다.정수인 경우 월의 수를 표시하고 배열인 경우 행과 열의 수를 표시합니다.demo
1
prevText
"지난달"링크의 표시 문자를 설정합니다.
'Prev'
shortYearCutoff
기한 연도의 값을 설정합니다.(0-99)의 숫자는 현재 연도부터 계산하고 문자열이면 상응하는 숫자로 전환한 후 현재 연도와 더한다.마감 연도를 넘으면 지난 세기로 여겨진다.
'+10'
showAnim
날짜 플러그인을 표시하고 숨기는 애니메이션의 이름을 설정합니다.
'show'
showButtonPanel
패널에 관련 버튼을 표시할지 여부를 설정합니다.
false
showCurrentAtPos
여러 달에 표시되는 경우 현재 달에 표시되는 위치를 설정합니다.맨 위/왼쪽에서 x위를 시작합니다.
0
showMonthAfterYear
패널의 첫 번째 연도 뒤에 월을 표시할지 여부입니다.
false
showOn
이벤트 트리거 디스플레이 날짜 플러그인 패널을 설정합니다. 선택할 수 있는 값:focus,button,both
'focus'
showOptions
showAnim을 사용하여 애니메이션 효과를 표시하는 경우 이 매개변수를 사용하여 추가 매개변수 설정을 추가할 수 있습니다.
{}
showOtherMonths
현재 패널에 위, 아래 두 달의 날짜 수를 표시할 지 여부입니다. (선택할 수 없습니다.)
false
stepMonths
위/다음 달을 클릭하면 한 번에 몇 달씩 뒤집는다.
1
yearRange
연도의 하단 목록에 표시되는 연도의 수량을 제어합니다. 현재 연도(-nn:+nn)와 절대값(-nnn:+nnn)이 될 수도 있습니다.
'-10:+10'
beforeShow
날짜 컨트롤이 패널을 표시하기 전에 이 이벤트를 터치하고 현재 터치 이벤트를 터치한 컨트롤의 실례 대상을 되돌려줍니다.
function(input)
beforeShowDay
날짜 컨트롤이 패널을 표시하기 전에 모든 패널의 날짜가 귀속될 때 이 이벤트를 터치합니다. 파라미터는 이벤트를 터치하는 날짜입니다.함수를 호출한 후, [0] 이 날짜를 선택할 수 있는지 (true/false), [1] 이 날짜의 CSS 스타일 이름 ("는 기본값을 표시함), [2] 마우스를 위로 이동하면 프롬프트의 내용이 나타납니다.
function(date)
onChangeMonthYear
해당 년도 또는 월이 변경되었을 때 이 이벤트를 터치합니다. 파라미터는 변경된 년도 월과 현재 날짜 플러그인의 실례입니다.
function(year, month, inst)
onClose
날짜 패널이 닫힌 후 이 이벤트를 터치합니다. 선택한 날짜와 현재 날짜 플러그인의 실례입니다.demo
function(dateText, inst)
onSelect
날짜 패널에서 날짜를 선택한 후에 이 이벤트를 터치합니다. 파라미터는 선택한 날짜와 현재 날짜 플러그인의 예입니다.
function(dateText, inst)