Heim > Artikel > Web-Frontend > Beispiel für die gemeinsame Nutzung von JQuery, das den Zeit-/Datumsauswahleffekt von Apple imitiert

Beispiel für die gemeinsame Nutzung von JQuery, das den Zeit-/Datumsauswahleffekt von Apple imitiert

小云云Original: 2018-01-23 09:31:592503Durchsuche

In diesem Artikel werden hauptsächlich Beispiele für die Zeit-/Datumsauswahleffekte von JQuery vorgestellt, die Apple imitieren, was einen guten Referenzwert hat. Werfen wir einen Blick mit dem folgenden Editor. Ich hoffe, er kann allen helfen.

1.html-Datei, index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="./jquery-1.12.4.min.js"></script>
 <script src="./pickDater.js"></script>
 <style>
 body{position: absolute;width: 100%;height: 100%}
 ul{list-style: none;margin: 0}
 </style>
</head>
<body>
<input id="pickDater" style="font-size: 50px;">
</body>
</html>

Schalten Sie beim Anzeigen des Effekts den Browser auf Mobiltelefonmodus

2. Plug-in-Link-Adresse: http://files.cnblogs.com/files/jiebba/pickDater.js ,

Referenz-Plug-in

3. Aufruf-Plug-in

var opt={
 startY:1990, //开始时间
 endY:2050, //结束事件
 mPickerType:1, 
 separator:&#39;/&#39; //日期分割符
 }
 $(&#39;#pickDater&#39;).mPickDater(opt);

2. Anrufzeit

var opt={
 startY:1990, //开始时间
 endY:2050, //结束事件
 mPickerType:2,
 separator:&#39;/&#39; //日期分割符
 }
 $(&#39;#pickDater&#39;).mPickDater(opt);

3. Datum und Uhrzeit des Anrufs

var opt={
 startY:1990, //开始时间
 endY:2050, //结束事件
 mPickerType:3,
 separator:&#39;/&#39; //日期分割符
 }
 $(&#39;#pickDater&#39;).mPickDater(opt);

Der Code dient nur als Referenz, die spezifischen Funktionen können selbst erweitert werden.

Verwandte Empfehlungen:

Beispiel-Tutorial zum Schreiben einer Datumsauswahl in jQuery

Ausführliche Erklärung zur Datumsauswahl in der jQuery-Benutzeroberfläche

So entwickeln Sie eine Datumsauswahl für das WeChat-Applet

Das obige ist der detaillierte Inhalt vonBeispiel für die gemeinsame Nutzung von JQuery, das den Zeit-/Datumsauswahleffekt von Apple imitiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Supereinfache Implementierungsmethode für das Wasserfall-Flow-LayoutNächster Artikel：Supereinfache Implementierungsmethode für das Wasserfall-Flow-Layout

In Verbindung stehende Artikel

Mehr sehen