>웹 프론트엔드 >JS 튜토리얼 >Apple의 시간/날짜 선택 효과를 모방한 jquery 공유 예

Apple의 시간/날짜 선택 효과를 모방한 jquery 공유 예

小云云
小云云원래의
2018-01-23 09:31:592587검색

이 글에서는 참고할만한 가치가 있는 Apple을 모방한 jquery의 시간/날짜 선택 효과 사례를 주로 소개합니다. 아래 편집기를 살펴보겠습니다. 모든 사람에게 도움이 되기를 바랍니다.

1.html 파일, index.html


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="./jquery-1.12.4.min.js"></script>
 <script src="./pickDater.js"></script>
 <style>
 body{position: absolute;width: 100%;height: 100%}
 ul{list-style: none;margin: 0}
 </style>
</head>
<body>
<input id="pickDater" style="font-size: 50px;">
</body>
</html>

효과를 볼 때 브라우저를 모바일 모드로 전환하세요

2. 플러그인 링크 주소: http://files.cnblogs. com/files/jiebba/pickDater.js ,

참조 플러그인

3. 호출 플러그인

1. 호출 날짜


var opt={
 startY:1990, //开始时间
 endY:2050, //结束事件
 mPickerType:1, 
 separator:&#39;/&#39; //日期分割符
 }
 $(&#39;#pickDater&#39;).mPickDater(opt);

2. 호출 시간

var opt={
 startY:1990, //开始时间
 endY:2050, //结束事件
 mPickerType:2,
 separator:&#39;/&#39; //日期分割符
 }
 $(&#39;#pickDater&#39;).mPickDater(opt);

3. 관련 권장 사항:

jquery 작성 날짜 선택기 예제 튜토리얼

jQuery UI Datepicker Datepicker에 대한 자세한 설명

WeChat 애플릿용 날짜 선택기를 개발하는 방법

위 내용은 Apple의 시간/날짜 선택 효과를 모방한 jquery 공유 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.