모바일 단말에 적합한 JavaScript 날짜 및 시간 선택기_javascript 기술

모바일 기기 WEB 애플리케이션에 적합한 날짜 및 시간 선택기입니다. 데스크톱 버전의 날짜 선택기의 경우 일반적으로 jQuery UI의 날짜 선택기 플러그인을 사용하고, 날짜 선택기의 모바일 버전의 경우 다음을 수행할 수 있습니다. 프로젝트 필요에 따라 jQuery를 사용하도록 선택하세요. Mobile에서 제공하는 mobiscroll.js 플러그인은 친숙한 날짜 및 시간 선택 작업 인터페이스를 제공하며 구성 및 사용이 쉽습니다.

HTML
먼저 관련 플러그인과 스타일 파일을 로드합니다. 플러그인은 jQuery 및 jQuery.mobile을 기반으로 하므로 먼저 이 두 라이브러리 파일을 로드한 다음 mobiscroll.js 플러그인 및 관련 CSS 파일을 로드해야 합니다. .

<script src="js/jquery.min.js"></script> 
<script src="js/jquery.mobile-1.3.0.min.js"></script> 
<script src="js/mobiscroll.js" type="text/javascript"></script> 
<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" /> 

그런 다음 일반 텍스트 입력 상자인 입력 상자를 본문에 배치합니다. 입력 상자를 마우스로 클릭하여 커서를 가져오면 mobiscroll이 실행되어 날짜 선택기가 팝업됩니다.

<input id="date" name="date" /> 

자바스크립트
mobiscroll은 팝업 패널 표시 방법 정의, 최대 날짜, 최소 날짜, 날짜 형식, 종료 연도 등을 포함하여 설정할 수 있는 다양한 옵션을 제공합니다. 중국어 버튼 및 지침 설정을 포함하여 플러그인을 현지화할 수도 있습니다. 호출도 매우 간단합니다. 샘플 코드는 다음과 같습니다.

$(function(){ 
 var opt = { 
 preset: 'date', //日期 
 theme: 'sense-ui', //皮肤样式 
 display: 'modal', //显示方式 
 mode: 'scroller', //日期选择模式 
 dateFormat: 'yy-mm-dd', // 日期格式 
 setText: '确定', //确认按钮名称 
 cancelText: '取消',//取消按钮名籍我 
 dateOrder: 'yymmdd', //面板中日期排列格式 
 dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字 
 hourText: '时',minuteText: "分",ampmText:"上午/下午", 
 endYear:2020 //结束年份 
 }; 
 $("#date").mobiscroll().date(opt); 
}); 

시간만 선택하시면 이렇게 작성하실 수 있습니다.

$("#time").mobiscroll().time(opt); 

패널에 날짜와 시간을 표시하려면 다음을 호출하세요.

$("#datetime").mobiscroll().datetime(opt); 

소스 코드 다운로드: 모바일 단말기에 적합한 자바스크립트 날짜 및 시간 선택기

모바일 단말기에 적합한 간단하고 우아한 JavaScript 날짜 및 시간 선택기가 만들어졌습니다.