Heim > Web-Frontend > js-Tutorial > Bootstrap muss jeden Tag die Datumskontrolle erlernen_Javascript-Fähigkeiten

Bootstrap muss jeden Tag die Datumskontrolle erlernen_Javascript-Fähigkeiten

WBOY
Freigeben: 2016-05-16 15:11:40
Original
1274 Leute haben es durchsucht

Da es sich um ein ausgereiftes Framework handelt, ist die Datumssteuerung unverzichtbar. Es gibt viele Datumssteuerungen, aus denen Sie online auswählen können, und das Hauptframework verwendet Bootstrap. Die Datumssteuerung muss derzeit auch ihre eigene verwenden.

Kontrolladresse: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

Open-Source-Adresse auf GitHub: https://github.com/smalot/bootstrap-datetimepicker

Bevor Sie datetimepicker verwenden, müssen Sie zunächst die folgenden Schritte ausführen

1 Referenz JS-Skriptbibliothek

<script src="/Content/bootstraps/js/bootstrap.js"></script>
<script src="/Content/bootstraps/js/bootstrap-datetimepicker.js"></script>
<script src="/Content/bootstraps/js/bootstrap-datetimepicker.zh-CN.js"></script>
Nach dem Login kopieren

bootstrap-datetimepicker.zh-CN.js gibt an, dass Datum und Uhrzeit in chinesischer Sprache angezeigt werden können

2 Einführung in die CSS-Bibliothek

<link href="/Content/bootstraps/css/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstraps/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
Nach dem Login kopieren

3Definition von HTML-Tags

<input class="form_datetime form-control" type="text" value="2016-03-07" size="16">
Nach dem Login kopieren

4Datetimepicker-Event schreiben

<script type="text/javascript">
 $(".form_datetime").datetimepicker({
 format: "yyyy-mm-dd",
 autoclose: true,
 todayBtn: true,
 todayHighlight: true,
 showMeridian: true,
 pickerPosition: "bottom-left",
 language: 'zh-CN',//中文,需要引用zh-CN.js包
 startView: 2,//月视图
 minView: 2//日期时间选择器所能够提供的最精确的时间选择视图
 }); 
</script>
Nach dem Login kopieren

Beachten Sie, dass viele Freunde im Internet gefragt haben, wie man nur das Datum oder nicht die Uhrzeit verwendet, da standardmäßig jedes Mal, wenn Sie die Datums- und Uhrzeitauswahl verwenden, die Tageszeit ausgewählt werden muss, was sehr unangenehm ist, Onkel Nach Untersuchungen wurde dieses Problem durch die Verwendung des Parameters minView gelöst, der der minimalen Anzeigegenauigkeit in der Steuerung entspricht,

0 steht für Minuten (Standard), 1 steht für Stunden und 2 steht für Tage. Wenn wir den Wert auf 2 setzen, wird die Seite zur Auswahl der Stunden nicht mehr angezeigt!

Freunde, die mehr über Bootstrap erfahren möchten, können auf "Bootstrap Learning Tutorial" klicken, um sich eingehend damit zu befassen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage