jQuery 캘린더 플러그인 날짜 선택기 사용법_jquery에 대한 자세한 설명

jQuery는 드물고 우수한 JavaScript 스크립트 개발 라이브러리이며, 이를 기반으로 하는 많은 플러그인도 매우 표준화되어 있으며 datepicker 플러그인과 같은 아름다움을 놓치면 아쉽습니다.

일반적으로 MIS 시스템의 프런트 엔드, 특히 사용자 등록 페이지에는 "생년월일"과 같은 날짜 입력 상자가 있습니다. 가장 간단한 방법은 태그를 사용하면 많은 단점이 있습니다. 첫째, 데이터베이스 필드 유형과의 일치, 둘째, "13번째 달" 또는 윤년과 같은 입력 날짜의 적법성 등입니다. 고려해 볼 가치가 있는 장소. 현재 널리 사용되는 접근법은 드롭다운 메뉴를 사용하는 것이지만 이 접근법은 상호작용성, 복잡성 및 이식성 측면에서 만족스럽지 않습니다. 다운 메뉴를 구축해야 하고, 날짜 유효성을 처리하기 위해 수많은 스크립트를 작성해야 합니다.

Datepicker가 멋진 봄을 선사합니다. 기본 스타일을 사용할 때의 모습을 살펴보겠습니다.

완전히 GUI와 유사한 사용자 경험, 눈부신 동적 디스플레이 효과, 정확한 날짜 제어 및 매우 유연한 매개변수 구성 등 이 모든 기능 덕분에 유명한 Google을 비롯한 많은 개발자가 Google Calendar 프로젝트에서 datepicker를 선호합니다. 이 스크립트는 에서 사용됩니다. 관심이 있으시면 확인해 보실 수 있습니다. 그런데, 위 그림의 기본 효과는 자바스크립트로 문장을 작성하면 얻을 수 있습니다. 궁금하신 분들은 저를 따라오세요:

1. 말할 것도 없이 jQuery 코어 파일을 다운로드하세요. Datepicker는 최소 버전의 jQuery만 필요합니다. 그런 다음 jQuery1.2.6_min을 포함하여 다운로드할 수도 있습니다. 공식 웹사이트: http://marcgrabanski.com/pages/code/jquery-ui-datepicker.

2. 다운로드한 두 개의 js를 HTML로 인용하세요.

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" src="js/ui.datepicker.js"></script>

3. 기본 스타일 시트 파일을 HTML에 도입합니다. 이 파일은 현재 압축 패키지에도 있습니다. 홈페이지에서 이 CSS 파일을 다운로드할 수도 있습니다. 다른 스킨:

<link rel="stylesheet" href="js/ui.datepicker.css" type="text/css" media="screen" title="core css file" charset="utf-8" />

4. HTML에 텍스트 필드를 삽입하고 형식 혼동을 방지하려면 읽기 전용으로 설정하는 것이 가장 좋습니다.

<input id="dateinput" type="text" readonly="readonly"/>

5. 최종 효과를 얻으려면 js 코드를 작성하세요.

<script language="javascript">
$(document).ready(function() { 
 $('#dateinput').datepicker(); 
 }); 
</script>

기본적으로 날짜 입력 텍스트 필드가 완성되지만, 다른 MIS 시스템에 따라 일부 대상 그룹은 중국어로 변경하는 것이 좋습니다. 현재 기능은 다음과 같습니다.

<script language="javascript">
$(document).ready(function() { 
 $('#dateinput').datepicker({ 
  dateFormat: 'yy-mm-dd', //日期格式，自己设置
  buttonImage: 'calendar.gif', //按钮的图片路径，自己设置
  buttonImageOnly: true, //Show an image trigger without any button.
  showOn: 'both',//触发条件，both表示点击文本域和图片按钮都生效
 yearRange: '1990:2008',//年份范围
 clearText:'清除',//下面的就不用详细写注释了吧，呵呵，都是些文本设置
 closeText:'关闭',
 prevText:'前一月',
 nextText:'后一月',
 currentText:' ',
 monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
 }); 
 }); 
</script>

자, 제 요구 사항에 따라 작성한 페이지의 코드는 다음과 같습니다.

<link rel="stylesheet" href="js/ui.datepicker.css" type="text/css" media="screen" title="core css file" charset="utf-8" />
<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" src="js/ui.datepicker.js"></script>



<input id="dateinput" type="text" readonly="readonly"/>

이상은 jQuery 캘린더 플러그인 datepicker의 사용법을 자세히 소개한 내용이므로 모든 분들의 학습에 도움이 되기를 바랍니다.