jQuery Mobile Datums- (Datedropper) und Uhrzeitauswahl (Timedropper) mit Quellcode download_jquery

Wir verwenden häufig die Datums- und Zeitauswahl, die wir zuvor am häufigsten verwendet haben. Daher stelle ich Ihnen heute eine sehr interessante Datums- und Zeitauswahl vor, die in Datumsauswahl und Datumsauswahl unterteilt ist Timepicker Timedropper, beide eignen sich besonders für mobile Anwendungen.

Online-Demonstration Quellcode-Download

datedropper

Die Verwendung ist sehr einfach, in drei Schritten,

1. Stellen Sie relevante JS- und CSS-Dateien vor. Beachten Sie, dass Datedropper und Timedropper beide jQuery-basierte Plug-Ins sind und daher auch jQuery-Bibliotheksdateien eingeführt werden müssen.

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

2. Ordnen Sie den HTML-Code im Textkörper an.

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

3. Rufen Sie datedropper auf

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

Dann können Sie einige Optionen entsprechend Ihren Anforderungen konfigurieren. datedropper bietet die folgenden grundlegenden Optionseinstellungen:

animieren: Animationseffekt anzeigen Wenn auf „true“ gesetzt, wird das Datum im Auswahlfeld animiert und zum aktuellen Datum gescrollt.

init_animation: Der Animationseffekt beim Klicken auf das Popup-Panel, einschließlich FadeIn (Standard), Bounce und DropDown.

Format: Datum formatieren, ich habe das Standardformat auf Y-m-d geändert.

lang: Sprache, ich habe den Standardmonat und die Standardwoche des Plug-Ins in die chinesische Sprache übersetzt.

maxYear: maximales Jahr, standardmäßig das aktuelle Jahr.

minYear: Mindestjahr, Standard 1970.

yearsRange: Jahresbereich, Standard ist 10 Jahre.

dateDropper bietet auch Einstellungen für den Skin-Stil.

timedropper timedropper

Wie die Datumsauswahl ist sie einfach zu bedienen.

1. JS- und CSS-Dateien importieren.

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

2. Ordnen Sie den HTML-Code im Textkörper an.

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

3. Rufen Sie Timedropper auf

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

timeDropper bietet die folgenden grundlegenden Optionseinstellungen:

Meridiane: Gibt an, ob das 12-Stunden-Format verwendet werden soll. Bei der Einstellung „false“ handelt es sich um das 24-Stunden-Format.

Format: Format, HH:mm wie 02:12.

init_animation: Animationsformular, fadeIn (Standard), dropDown.

setCurrentTime: Aktuelle Uhrzeit automatisch einstellen.

timeDropper bietet auch Einstellungen für den Skin-Stil.

Hier dreht sich alles um die Datums- (Datedropper) und Zeitselektoren (Timedropper) von jQuery Mobile. Interessierte Freunde können sich die Effektdemonstration ansehen und den Quellcode herunterladen!