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!
