Detaillierte Erläuterung der Verwendung des jQuery-Kalender-Plug-Ins datepicker_jquery

jQuery ist eine seltene und hervorragende JavaScript-Skriptentwicklungsbibliothek, und viele darauf basierende Plug-Ins sind ebenfalls sehr standardisiert und ausgezeichnet. Es wäre schade, diese Schönheit zu verpassen, wie zum Beispiel das Datepicker-Plug-In.

Im Allgemeinen verfügt das Frontend des MIS-Systems, insbesondere die Benutzerregistrierungsseite, über ein Datumseingabefeld wie „Geburtsmonat und -jahr“. Am einfachsten ist es, einen -Tag, um dies zu tun. Es gibt viele Nachteile: erstens die Übereinstimmung mit dem Datenbankfeldtyp, zweitens die Rechtmäßigkeit des Eingabedatums wie „13. Monat“ oder Schaltjahr usw. Wenn wir tiefer gehen, gibt es viele Orte, die eine Überlegung wert sind. Der derzeit beliebte Ansatz ist die Verwendung von Dropdown-Menüs, dieser Ansatz ist jedoch im Hinblick auf Interaktivität, Komplexität und Portabilität unbefriedigend, da mindestens drei verknüpfte Dropdown-Menüs erforderlich sind. Es müssen Abwärtsmenüs erstellt und eine große Anzahl von Skripten geschrieben werden, um die Datumsgültigkeit zu handhaben.

Datepicker bringt wundervollen Frühling, schauen wir uns an, wie es aussieht, wenn wir den Standardstil verwenden:

Komplett GUI-ähnliche Benutzererfahrung, umwerfende dynamische Anzeigeeffekte, präzise Datumssteuerung und hochflexible Parameterkonfiguration machen Datepicker zu einem Favoriten vieler Entwickler, darunter auch des berühmten Google, in seinem Google Kalender-Projekt. Dieses Skript wird in verwendet. Wenn Sie interessiert sind, können Sie es sich ansehen. Der Standardeffekt im Bild oben kann übrigens durch das Schreiben eines Satzes in Javascript erreicht werden. Wenn Sie aufgeregt sind, folgen Sie mir:

1. Laden Sie die jQuery-Kerndatei herunter. Sie benötigen nur die Min-Version von jQuery. Sie können sie auch von herunterladen Offizielle Website: http://marcgrabanski.com/pages/code/jquery-ui-datepicker.

2. Zitieren Sie die beiden heruntergeladenen JS in HTML:

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" src="js/ui.datepicker.js"></script>

3. Führen Sie die Standard-Stylesheet-Datei jetzt auch in das komprimierte Paket ein. Sie können diese CSS-Datei auch auf der Homepage herunterladen andere Skins:

<link rel="stylesheet" href="js/ui.datepicker.css" type="text/css" media="screen" title="core css file" charset="utf-8" />

4. Fügen Sie ein Textfeld in HTML ein. Stellen Sie es am besten auf schreibgeschützt ein und akzeptieren Sie keine manuellen Eingaben von Benutzern, um eine Formatierungsverwechslung zu vermeiden.

<input id="dateinput" type="text" readonly="readonly"/>

5. Schreiben Sie js-Code, um den endgültigen Effekt zu erzielen.

<script language="javascript">
$(document).ready(function() { 
 $('#dateinput').datepicker(); 
 }); 
</script>

Dies vervollständigt grundsätzlich ein Datumseingabe-Textfeld, es ist jedoch auf Englisch, einige Zielgruppen sind ältere Benutzer. Es wird empfohlen, dies mit ein paar Änderungen zu tun. Die Funktion gerade so:

<script language="javascript">
$(document).ready(function() { 
 $('#dateinput').datepicker({ 
  dateFormat: 'yy-mm-dd', //日期格式，自己设置
  buttonImage: 'calendar.gif', //按钮的图片路径，自己设置
  buttonImageOnly: true, //Show an image trigger without any button.
  showOn: 'both',//触发条件，both表示点击文本域和图片按钮都生效
 yearRange: '1990:2008',//年份范围
 clearText:'清除',//下面的就不用详细写注释了吧，呵呵，都是些文本设置
 closeText:'关闭',
 prevText:'前一月',
 nextText:'后一月',
 currentText:' ',
 monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
 }); 
 }); 
</script>

OK, Sie sind fertig. Der Code der Seite, die ich gemäß meinen eigenen Anforderungen geschrieben habe, dient nur als Referenz:

<link rel="stylesheet" href="js/ui.datepicker.css" type="text/css" media="screen" title="core css file" charset="utf-8" />
<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" src="js/ui.datepicker.js"></script>



<input id="dateinput" type="text" readonly="readonly"/>

Das Obige ist eine detaillierte Einführung in die Verwendung des jQuery-Kalender-Plug-Ins zur Datumsauswahl. Ich hoffe, es wird für das Lernen aller hilfreich sein.