Dieser Artikel stellt die Verwendung des Bootstrap-Datepicker-Plugins in Bootstrap vor. Ich hoffe, dass er für Freunde hilfreich ist.
Bei der Boosttrap-basierten Webentwicklung ist es häufig erforderlich, Datumsinhalte einzugeben. In Boosttrap-basierten Plug-Ins können Sie Bootstrap-Datepicker, ein sehr gutes Plug-In, verwenden, um Datumsangaben einzugeben, um die zu ersetzen Standardtyp=Datum. Eine unfreundliche Datumseintragssteuerung. In diesem Artikel wird beschrieben, wie ich das Bootstrap-Datepicker-Plugin verwende, um die Datumseintragsverarbeitung in meinem Boostrap-Entwicklungsframework zu implementieren.
Die zugehörige Projektadresse des Bootstrap-Datepicker-Plugins lautet wie folgt:
http://www.bootcss .com/ p/bootstrap-datetimepicker
https://github.com/uxsolutions/bootstrap-datepicker
Die Verwendung dieses Plug-Ins ist ähnlich wie bei anderen Plug-Ins. Sie müssen es nur tun Führen Sie die entsprechenden JS-Dateien und CSS-Stile ein. Das Folgende ist die Referenzdatei des Plug-Ins.
<script src="/js/bootstrap-datepicker.js"></script> <script src="/css/bootstrap-datepicker3.min.css"></script>
Wenn Sie die Landessprache verwenden müssen, importieren Sie einfach die Sprachdatei.
<script src="/locales/bootstrap-datepicker.zh-CN.js"></script>
Das Dateiverzeichnis des Plug-Ins ist wie folgt:
Der Nutzungsschnittstelleneffekt des Plug-Ins ist wie folgt:
Wenn wir Plug-Ins im MVC-Framework verwenden, führen wir häufig das entsprechende CSS und JS durch Paketierung ein. Der Code von BundleConfig.cs im C#-Code lautet beispielsweise wie folgt :
Die CSS-Datei führt den folgenden Code ein:
Die JS-Datei ist ähnlich, wie unten gezeigt:
Und wir sind in Bei der Entwicklung eines Boostrap-Projekts können wir die Master-Methode verwenden, um die entsprechenden JS- und CSS-Dateien einzuführen, und es besteht keine Notwendigkeit, auf diese Anwendungen auf der Unterseite zu achten Prozesse für die MVC-basierte Boosttrap-Entwicklung, auf die wir hier nicht näher eingehen.
Das Initialisieren des Bootstrap-Datepicker-Plug-Ins ist ebenfalls relativ einfach.
<input type="text" id="datetimepicker">
oder
$('#datetimepicker').datetimepicker({
format: 'yyyy-mm-dd hh:ii'
});Im Allgemeinen müssen wir die Sprache, das Format, die Schaltfläche und andere Attribute festlegen, wie unten gezeigt
<script type="text/javascript">
$(".form_datetime").datetimepicker();
</script>In der Schnittstelle zum Abfragen von Daten Im Allgemeinen ist ein Zeitintervall erforderlich, wie unten gezeigt.
Der Code für diese Schnittstelle lautet wie folgt.
$('.input-daterange input').each(function () {
$(this).datepicker({
language: 'zh-CN', //语言
autoclose: true, //选择后自动关闭
clearBtn: true,//清除按钮
format: "yyyy-mm-dd"//日期格式
});
});Bei der Eingabe von Schnittstellendetails sieht die Schnittstelle zur Auswahl eines einzelnen Datums wie folgt aus.
<p class="input-group input-daterange"> <input id="WHC_PayDate" name="WHC_PayDate" type="text" placeholder="付款日期(起)" data-date-format="yyyy-mm-dd" class="form-control"/> <p class="input-group-addon">~</p> <input id="WHC_PayDate2" name="WHC_PayDate" type="text" placeholder="付款日期(止)" data-date-format="yyyy-mm-dd" class="form-control"/> </p>
Bei Verwendung des Plug-Ins ist es uns unmöglich, das Bootstrap-Datepicker-Plug-In für jede Eingabe zu initialisieren, daher verwenden wir dazu die Verarbeitungsmethode des Klassenselektors Initialisieren Sie alle Datums-Plug-Ins.
Plug-in optionales Datumsformat:
jjjj-mm-tt
jjjj-mm-tt hh:ii
jjjj-mm-ttThh:ii
jjjj-mm-tt hh:ii:ss
jjjj-mm-ttThh:ii:ssZ
Schließlich werfen wir einen Blick auf den gesamten Schnittstelleneffekt.
Zusammenfassung: Das Obige dreht sich alles um die Verwendung des Bootstrap-Datepicker-Plug-Ins in Bootstrap. Ich hoffe, es wird für das Lernen aller hilfreich sein. Weitere verwandte Tutorials finden Sie unter Bootstrap-Video-Tutorial, Bootstrap-Online-Handbuch!
Das obige ist der detaillierte Inhalt vonWie verwende ich das Bootstrap-Datepicker-Plugin (ausführliche Erklärung)?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
