jQuery 날짜 선택기_jquery에 대한 심층 분석-JS 튜토리얼-php.cn

jQuery 날짜 선택기_jquery에 대한 심층 분석

WBOY

풀어 주다： 2016-05-16 17:31:54

원래의

1214명이 탐색했습니다.

1: 기본적으로 날짜 입력 텍스트 상자가 페이지 포커스를 받으면 날짜 선택기 구성 요소는 날짜 입력 텍스트가 있을 때 오버레이 에서 달력 선택 패널을 엽니다. box 상자가 초점을 잃거나 날짜를 선택하면 달력 선택 패널이 자동으로 닫힙니다.
$(selector).datepicker([options]);
간단한 예:

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

 
< ;html xmlns="http ://www.w3.org/1999/xhtml">

DatePicker 로컬

<스크립트 유형 ="text/javascript" src="JS/jquery.ui.core.js">

< style>
*{font-size:12px; }

날짜를 입력하세요. 
< input type="text" id="inputDate" />

렌더링:

2: 팝업 날짜 선택기의 그림 버튼 지정
응답 리소스 파일 추가 필요:

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

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

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

DatePickerIcon

请选择一个日期：

效果图：

3：显示带年,月份下拉列表및按钮板적日期选择器

复代代码代码如下:

< ;meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
DatePicker Local

<스타일>
*{ 글꼴 크기:12px; }

请输入一个日期：

效果图：

4：同时显示多个月份的日期选择器

复主代码代码如下:

DatePickerButton

날짜를 선택하세요:

렌더링:

5: 날짜 선택기의 일부 방법
dialog, isDisabled, hide, show, Refresh, getDate, setDate

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

DatePicker 대화 상자</ 제목> <br><link rel="stylesheet" type="text/css" href="themes/ui-lightness/jquery.ui.all.css"/><br><script type="text /javascript " src="JS/jquery-1.4.2.min.js"></script><br><script type="text/javascript" src="JS/jquery.ui.core.js "> ;</script><br><script type="text/javascript" src="JS/jquery.ui.datepicker.js"></script><br><script type=" text/ javascript"><br>$(document).ready(function(){<br> $("#inputDate").datepicker(); <br> $("#showDialog").click(function( ){ <br> $("#inputDate").datepicker("dialog","",function(dateText, inst){<br> $("#inputDate").val(dateText);<br> }) ;<br> });<br>});<br></script><br><style><br>*{ 글꼴 크기:12px }<br></style><br>< ;/head><br><body><br>날짜를 입력하세요: <br><input type="text" id="inputDate" /><br><button id="showDialog "> ;표시</button><br></body><br></html><br>
</div>
<br><strong>렌더링: <br></strong> <img alt="" src="http://files.jb51.net/file_images/article/201306/2013061916185926.png"><br> <br><strong><font   style="max-width:90%">6: 날짜 선택기의 일부 이벤트<br></font></strong>6.1 beforeShow 이벤트: 이 이벤트는 날짜 선택기가 표시되기 전에 트리거됩니다. <br>6.2 beforeShowDay 이벤트: 이 이벤트는 날짜 선택기 함수에서 각 날짜가 선택되기 전에 트리거됩니다(date). {}<br>6.3 onChangeMonthYear: 이 이벤트는 날짜 선택기가 새로운 연도 또는 월 함수를 선택할 때 트리거됩니다( year , Month, inst);<br>6.4 onClose 이벤트: 이 이벤트는 날짜 선택 컨트롤이 닫힐 때 트리거됩니다. function(dataText, inst) {}<br>6.5 onSelect 이벤트: 이 이벤트는 날짜 선택기가 날짜를 선택할 때 트리거됩니다. function(dataText, inst) {} //dataText는 선택한 날짜의 문자열이고 inst는 날짜 선택기 인스턴스입니다<br><div class="codetitle">
<span><a style="CURSOR: pointer" data="29229" class="copybut" id="copybut29229" onclick="doCopy('code29229')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다. </div>
<div class="codebody" id="code29229">
<br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><br><html xmlns="http://www.w3.org/1999/xhtml"><br><head><br><meta http-equiv="Content-Type" 콘텐츠 ="text/html; charset=gb2312" /><br><title>DatePicker 대화상자

效果图：