JavaScript-Datums- und Zeitauswahl, geeignet für mobile Endgeräte_Javascript-Kenntnisse

Dies ist eine Datums- und Zeitauswahl, die für WEB-Anwendungen für mobile Geräte geeignet ist. Für die Desktop-Version der Datumsauswahl verwenden wir im Allgemeinen das Datumsauswahl-Plug-in von jQuery UI, während Sie dies für die mobile Version der Datumsauswahl tun können Wählen Sie je nach Projektanforderungen die Verwendung von jQuery. Das von Mobile bereitgestellte Plug-in mobiscroll.js bietet eine benutzerfreundliche Bedienoberfläche für die Datums- und Uhrzeitauswahl und ist einfach zu konfigurieren und zu verwenden.

HTML
Zuerst laden wir die relevanten Plug-Ins und Stildateien. Das Plug-In basiert auf jQuery und jQuery.mobile. Daher müssen wir zuerst diese beiden Bibliotheksdateien laden und dann das Plug-In mobiscroll.js und die zugehörigen CSS-Dateien laden .

<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" /> 

Platzieren Sie dann ein Eingabefeld im Textkörper, bei dem es sich um ein normales Texteingabefeld handelt. Wenn Sie mit der Maus auf das Eingabefeld klicken, um den Cursor anzuzeigen, wird Mobiscroll ausgelöst, um die Datumsauswahl anzuzeigen.

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

JavaScript
mobiscroll bietet viele Optionen, die eingestellt werden können, einschließlich der Definition der Popup-Panel-Anzeigemethode, des maximalen Datums, des minimalen Datums, des Datumsformats, des Endjahres usw. Sie können das Plug-in auch lokalisieren, einschließlich der Einstellung chinesischer Schaltflächen und Anweisungen. Der Aufruf ist ebenfalls sehr einfach, das Folgende ist der Beispielcode:

$(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); 
}); 

Wenn Sie nur die Zeit auswählen, können Sie so schreiben:

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

Wenn Sie Datum und Uhrzeit auf dem Panel anzeigen möchten, rufen Sie dies auf:

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

Quellcode-Download: Javascript-Datums- und Zeitauswahl für mobile Endgeräte

Es wurde eine einfache und elegante JavaScript-Datums- und Zeitauswahl für mobile Endgeräte erstellt. Ich hoffe, sie gefällt Ihnen.