소스 코드가 포함된 jQuery 모바일 날짜(datedropper) 및 시간(timedropper) 선택기 download_jquery

우리는 날짜 및 시간 선택기를 자주 사용했습니다. 이전에 가장 많이 사용했던 것은 jQuery UI의 datepicker()였습니다. 그래서 오늘은 날짜 선택기와 날짜 선택기로 구분되는 매우 흥미로운 날짜 및 시간 선택기를 소개하겠습니다. timepicker timedropper는 둘 다 특히 모바일 애플리케이션에 적합합니다.

온라인 시연 소스코드 다운로드

날짜 드로퍼

사용은 세 단계로 매우 간단합니다.

1. 관련 js, css 파일을 소개합니다. datedropper와 timedropper는 모두 jQuery 기반 플러그인이므로 jQuery 라이브러리 파일도 도입해야 합니다.

<script src="jquery.js"></script> 
<script src="datedropper.js"></script> 
<link rel="stylesheet" type="text/css" href="datedropper.css"> 

2. 본문에 html을 정리합니다.

<input type="text" id="pickdate" /> 

3. 데이트 드롭퍼 호출

<script> 
$("#pickdate").dateDropper(); 
</script> 

그런 다음 필요에 따라 일부 옵션을 적절하게 구성할 수 있습니다. datedropper는 다음과 같은 기본 옵션 설정을 제공합니다.

animate: 애니메이션 효과를 표시합니다. true로 설정하면 선택기 패널의 날짜가 애니메이션되고 현재 날짜로 스크롤됩니다. 기본값은 true입니다.

init_animation: 팝업 패널을 클릭할 때 fadeIn(기본값), 바운스 및 dropDown을 포함한 애니메이션 효과입니다.

형식: 날짜 형식을 기본 형식으로 Y-m-d로 변경했습니다.

lang: 언어, 플러그인의 기본 월과 주를 중국어로 번역했습니다.

maxYear: 최대 연도, 기본값은 현재 연도입니다.

minYear: 최소 연도, 기본값은 1970입니다.

yearsRange: 연도 범위, 기본값은 10년입니다.

dateDropper는 스킨 스타일 설정도 제공합니다.

타임드롭퍼 타임드롭퍼

날짜 선택기와 마찬가지로 사용이 쉽습니다.

1. js 및 css 파일을 가져옵니다.

<script src="jquery.js"></script> 
<script src="timedropper.js"></script> 
<link rel="stylesheet" type="text/css" href="timedropper.css"> 

2. 본문에 html을 정리합니다.

<input type="text" id="picktime" /> 

3. 타임드로퍼 호출

<script> 
$("#picktime").timeDropper(); 
</script> 

timeDropper는 다음과 같은 기본 옵션 설정을 제공합니다.

meridians: 12시간 형식 사용 여부. 기본값은 12시간 형식입니다. false로 설정하면 24시간 형식이 됩니다.

형식: 형식, HH:mm(예: 02:12).

init_animation: 애니메이션 형식, fadeIn(기본값), dropDown.

setCurrentTime: 현재 시간을 자동으로 설정합니다.

timeDropper는 스킨 스타일 설정도 제공합니다.

이것은 jQuery 모바일 날짜(datedropper) 및 시간(timedropper) 선택기에 관한 것입니다. 관심 있는 친구는 효과 데모를 보고 소스 코드를 다운로드할 수 있습니다!