> 웹 프론트엔드 > JS 튜토리얼 > jquery 달력 플러그인 datepicker 사용 분석_jquery

jquery 달력 플러그인 datepicker 사용 분석_jquery

WBOY
풀어 주다: 2016-05-16 15:18:43
원래의
1836명이 탐색했습니다.

이 기사의 예에서는 jquery 캘린더 플러그인 datepicker의 사용법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

여러 개의 캘린더 플러그인을 사용해 보았는데 일부는 너무 화려하고 일부는 너무 단순하며 일부는 브라우저와 호환되지 않습니다. 나중에 동료가 jquery.datepick을 추천하여 다운로드했습니다. 공식 홈페이지에서 플러그인을 받아 직접 사용해 보니 느낌이 꽤 좋습니다. 로직과 스타일이 완전히 분리될 수 있고 매우 유연하며 30개국의 언어를 지원하며 기본적으로 내 요구 사항을 충족할 수 있습니다.

이 웹사이트의 다운로드 주소는 다음과 같습니다: http://www.jb51.net/jiaoben/19622.html

jquery.datepick.package-3.5.2.zip을 압축 해제하세요. 기본값은 영어 달력입니다. 여기에 jquery.datepick-zh-CN.js가 있습니다. 이를 추가하면 영어 달력이 중국어로 변경됩니다. 🎜>http://demo.jb51.net/js/2011/jQuery_calendar/index.html

샘플 코드는 다음과 같습니다.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Datepicker</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.datepick.js"></script>
<script type="text/javascript" src="jquery.datepick-zh-CN.js"></script>
<script type="text/javascript">
$(function() {
var nowdays = new Date();
var dateConfig = {
 showOn: 'both',        //二个都显示
 buttonImage: 'calendar.gif', //加载图片
 buttonImageOnly: true,    //显示图片的地方有一个突出部分,这个就是隐藏那玩意的
 changeFirstDay: false,    //这个参数干什么的呢,星期一是日历的第一个,不可以改动的
 numberOfMonths: 2,      //显示二个月,默认一个月
 minDate: nowdays,       //显示最小时间是今天
 dateFormat: 'yy-mm-dd',    //日期格式
 yearRange: '-20:+20'     //前后20年,不过这根minDate是今天有冲突,自己去试吧。
};
 $('#goodplugin').datepick(dateConfig);
 $('#showdate').datepick(dateConfig);
});
</script>
<link type="text/css" href="smoothness.datepick.css" rel="stylesheet" />
</head>
<body>
<h1>jquery 日历插件举例</h1>
<br>
<a href="datepick1.html">样式1</a>
<br>
<a href="datepick2.html">样式2</a>
<br>
<a href="datepick3.html">样式3</a>
<br><br><br>
<div id="showdate"></div>
<br>
<br>
<div>左边直接显示,右边要点击<input type="text" id="goodplugin"/></div>
</body>
</html>

로그인 후 복사
참고: datepick 플러그인에는 개인적인 필요에 따라 설정할 매개변수가 많이 있습니다. 자세한 내용은 jquery 공식 홈페이지

http://docs.jquery.com/UI/Datepicker#options를 참고하세요.

jQuery 플러그인과 관련된 더 많은 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제인 "

일반적인 jQuery 플러그인 및 사용법 요약"을 확인할 수 있습니다.

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿