jquery UI Datepicker 시간 제어 사용 방법(향상된 버전)_jquery

먼저 Datepicker 플러그인의 속성 테이블을 살펴보겠습니다.

캘린더 플러그인 첫 번째 사용예
먼저 필요한 클래스 라이브러리 파일을 가져옵니다.

<</SPAN>scripttype="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.7.1.min.js"></</SPAN>script>
<</SPAN>scripttype="text/javascript" src="${pageContext.request.contextPath }/js/jquery.ui.datepicker-zh-CN.js"></</SPAN>script>
<</SPAN>scripttype="text/javascript"src="${pageContext.request.contextPath }/js/jquery-ui-1.8.18.custom.min.js"></</SPAN>script>
<</SPAN>linkrel="stylesheet"type="text/css"href="${pageContext.request.contextPath }/css/ui-lightness/jquery-ui-1.8.18.custom.css">

먼저 페이지 코드를 작성하세요:

<</SPAN>div class="demo">
<</SPAN>p>Date:<</SPAN>input type="text" id="datepicker"></</SPAN>p>
</</SPAN>div>

그런 다음 js 코드를 사용하여 플러그인을 호출하세요

효과 스크린샷:

다음은 예시를 통해 몇 가지 공통 속성을 검증한 것입니다.
1. altField: 대체 출력 필드를 사용합니다. 즉, 선택한 날짜를 다른 형식으로 다른 컨트롤에 출력하고 값은 선택자, 즉 출력할 컨트롤입니다.
altFormat: altField 출력 형식
확인 예시:
페이지 코드:

<</SPAN>div class="demo">
<</SPAN>p>Date: <</SPAN>input type="text" id="datepicker">
<</SPAN>input type="text" id="alternate" size="30"/></</SPAN>p>
</</SPAN>div>

JS 코드:

$(function() {
$( "#datepicker" ).datepicker({
altField: "#alternate",
altFormat: "DD, d MM, yy"
});
});

효과 스크린샷:

2. showAnim: 날짜 패널에 표시되거나 숨겨지는 애니메이션 이름 설정
JS 코드 작성:

$(function() {
$( "#datepicker" ).datepicker();
$( "#anim" ).change(function() {
$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
});
});

3. showButtonPanel: 버튼 패널 표시 여부
JS 코드:
[javascript] 일반 카피프린트를 보시겠습니까?
$( "#datepicker" ).datepicker({
showButtonPanel:true
});

그림과 같이 패널 아래에는 두 개의 버튼이 있습니다. '오늘'을 클릭하면 오늘 날짜로 이동하고, '닫기'를 클릭하면 패널이 닫힙니다.

4. 날짜 형식: 날짜 표시 형식을 지정합니다
JS 코드:

$( "#datepicker" ).datepicker({
dateFormat:"yy/mm/dd"
});

효과 스크린샷:

이미지에서 볼 수 있듯이 텍스트 상자의 날짜 형식이 'yy-mm-dd'에서 'by/mm/dd'로 변경되었습니다. 물론, 자신의 취향에 따라 설정할 수 있는 다른 형식도 있습니다.
5.changeMonth: 드롭다운 목록을 사용하여 월을 선택할지 여부
ChangeYear: 드롭다운 목록을 사용하여 연도를 선택할지 여부
js 코드에 이 속성을 추가하세요:changeMonth:true 또는changeYear:true
제목 표시줄의 월 또는 연도가 드롭다운 메뉴 형태로 나타납니다.

6. yearRange: 드롭다운 목록 상자에 표시되는 연도 범위를 설정합니다. 이 범위는 올해(-nn: nn) 또는 선택한 연도(c-nn:)를 기준으로 할 수 있습니다. c nn) 또는 절대 연도(nnnn:nnnn)
JS 코드에 속성 추가:

$( "#datepicker" ).datepicker({
changeYear: true,
yearRange:"2011:2012"
});

효과 스크린샷:

사진에서 보시다시피, 연도 위치가 드롭다운 메뉴 형태로 되어 있고, 드롭다운 메뉴에는 2011년과 2012년에 대한 옵션만 나타나게 됩니다.
참고: yearRange 속성은 ChangeYear가 true인 경우에만 사용됩니다.

7. numberOfMonths: 한 번에 표시할 개월 수를 설정합니다. 표시된 행과 열의 수를 나타내는 두 개의 숫자를 포함하는 배열일 수 있습니다
JS 코드:

$( "#datepicker" ).datepicker({
numberOfMonths: 3
});

上面指定numberOfMonths为3，那么弹出的日历面板就会显示当前以及以后两个月，如图：

8、showOn：设置触发选择器的事件名称
buttonText：指定触发按钮上显示的文本，showOn属性应设置为button或both
buttonImage：指定弹出按钮图像的URL，若设置则buttonText将成为alt值
buttonImageOnly：是否将图像放在控件后面，作为触发器，如果设置为true那么按钮将只剩下图片作为按钮，是页面更加美观
这里我编写三个文本框进行以上属性的对比：
1) Js代码：

$( "#datepicker2" ).datepicker({
showOn: "both",
buttonText:"日历按钮"
});

效果截图：

2）将按钮设置为图片：
Js代码：

$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});

通过以上对比，可以理解buttonImageOnly属性的作用。
9、minDate：可以选择的最小日期，null表示无限制
maxDate：可以选择的最大日期。null表示无限制
两者都是根据以当天日期为基础的。
Js代码：

$(function() {
$( "#datepicker" ).datepicker({
//表示以当天为准，只有在20天之前和10天之后的日期之间的时间可以选择
minDate: -20,
maxDate: "+10D"
});
});

如下图在7号之前都不可选择（当前日期为27）：

以上就是对jquery UI Datepicker时间控件的使用方法深入学习，为之后的学习打下了基础，希望大家继续关注jquery UI Datepicker时间控件终结篇学习。