suchen

Heim >Web-Frontend >Bootstrap-Tutorial >Verfügt Bootstrap über eine Kalendersteuerung?

Verfügt Bootstrap über eine Kalendersteuerung?

藏色散人
藏色散人Original
2021-02-05 09:03:404700Durchsuche

Bootstrap verfügt über ein Kalendersteuerelement, ein Zeit- und Datumskalendersteuerelement mit dem Namen „datetimepicker“. Es handelt sich um eine Bootstrap-Komponente, die die Eingabe von Datum und Uhrzeit auf der Seite vereinfachen kann. Das Datetimepicker-Steuerelement unterstützt die Datumsauswahl und Formateinstellung sowie die Steuerung der Zeitraumauswahl. Sie müssen lediglich Skript- und Link-Tags verwenden, um relevante Dateien auf der erforderlichen Seite einzuführen, um sie zu verwenden.

Verfügt Bootstrap über eine Kalendersteuerung?

Die Betriebsumgebung dieses Artikels: Windows 7-System, Bootstrap3, Dell G3-Computer.

Verfügt Bootstrap über eine Kalendersteuerung?

bootstrap verfügt über ein Zeit- und Datumskalender-Steuerelement namens datetimepicker, eine Bootstrap-Komponente, die die Eingabe von Datum und Uhrzeit auf der Seite vereinfachen kann.

Verwendung der Bootstrap-Datetimepicker-Steuerung

1. Unterstützung der Zeitauswahl

3. Unterstützung der Zeitfensterauswahl

Beteiligte Stile und js:

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
 
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="static/js/moment-with-locales.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

Lass uns Gehen Sie direkt zum Beispiel. 

<div class="row">
    <div class=&#39;col-sm-6&#39;>
        <div class="form-group">
            <label>选择日期：</label>
            <!--指定 date标记-->
            <div class=&#39;input-group date&#39; id=&#39;datetimepicker1&#39;>
                <input type=&#39;text&#39; class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class=&#39;col-sm-6&#39;>
        <div class="form-group">
            <label>选择日期+时间：</label>
            <!--指定 date标记-->
            <div class=&#39;input-group date&#39; id=&#39;datetimepicker2&#39;>
                <input type=&#39;text&#39; class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>
$(function () {
    $(&#39;#datetimepicker1&#39;).datetimepicker({
        format: &#39;YYYY-MM-DD&#39;,
        locale: moment.locale(&#39;zh-cn&#39;)
    });
    $(&#39;#datetimepicker2&#39;).datetimepicker({
        format: &#39;YYYY-MM-DD hh:mm&#39;,
        locale: moment.locale(&#39;zh-cn&#39;)
    });
});
 
 
 
/*4.17版本一些可能用得到的方法参数*/
/*
        showClose:true//是否显示关闭 按钮
        /*viewMode: &#39;days&#39;,//天数模块展示，months则为以月展示
        daysOfWeekDisabled: false,//星期几 禁止选择,参数 [num],多个逗号隔开
        calendarWeeks: false,//显示 周 是 今年第几周
        toolbarPlacement:&#39;default&#39;, //工具摆放的位置，top 则为上，默认为底
        showTodayButton:false,//是否工具栏 显示 直达今天天数的 按钮，默认false
        showClear:false, //是否 工具栏显示  清空 输入框  的按钮。默认false
*/

Screenshot:

Beispiel für die Startzeit: 

<div class="row">
    <div class=&#39;col-sm-6&#39;>
        <div class="form-group">
            <label>选择开始时间：</label>
            <!--指定 date标记-->
            <div class=&#39;input-group date&#39; id=&#39;datetimepicker1&#39;>
                <input type=&#39;text&#39; class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class=&#39;col-sm-6&#39;>
        <div class="form-group">
            <label>选择结束时间：</label>
            <!--指定 date标记-->
            <div class=&#39;input-group date&#39; id=&#39;datetimepicker2&#39;>
                <input type=&#39;text&#39; class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>
$(function () {
    var picker1 = $(&#39;#datetimepicker1&#39;).datetimepicker({
        format: &#39;YYYY-MM-DD&#39;,
        locale: moment.locale(&#39;zh-cn&#39;),
        //minDate: &#39;2016-7-1&#39;
    });
    var picker2 = $(&#39;#datetimepicker2&#39;).datetimepicker({
        format: &#39;YYYY-MM-DD&#39;,
        locale: moment.locale(&#39;zh-cn&#39;)
    });
    //动态设置最小值
    picker1.on(&#39;dp.change&#39;, function (e) {
        picker2.data(&#39;DateTimePicker&#39;).minDate(e.date);
    });
    //动态设置最大值
    picker2.on(&#39;dp.change&#39;, function (e) {
        picker1.data(&#39;DateTimePicker&#39;).maxDate(e.date);
    });
});
Verfügt Bootstrap über eine Kalendersteuerung?Screenshot:

Während der Initialisierung verwenden Sie defaultDate, um die Standardzeit anzugeben: 

 $(&#39;#datetimepicker1&#39;).datetimepicker({
            format: &#39;YYYY-MM-DD&#39;,
            locale: moment.locale(&#39;zh-cn&#39;),
            defaultDate: "1990-1-1"
        });
Verfügt Bootstrap über eine Kalendersteuerung?Natürlich können Sie auch JS.-Code verwenden zu kontrollieren der Standardwert des Eingabefelds.

Spezifisches Beispiel: 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>datetimpicker测试</title>
<!--图标样式-->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment-with-locales.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class=&#39;col-sm-6&#39;>
<div class="form-group">
<label>选择日期：</label>
<!--指定 date标记-->
<div class=&#39;input-group date&#39; id=&#39;datetimepicker1&#39;>
<input type=&#39;text&#39; class="form-control" />
<span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class=&#39;col-sm-6&#39;>
<div class="form-group">
<label>选择日期+时间：</label>
<!--指定 date标记-->
<div class=&#39;input-group date&#39; id=&#39;datetimepicker2&#39;>
<input type=&#39;text&#39; class="form-control" />
<span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$(&#39;#datetimepicker1&#39;).datetimepicker({
format: &#39;YYYY-MM-DD&#39;,
locale: moment.locale(&#39;zh-cn&#39;)
});
$(&#39;#datetimepicker2&#39;).datetimepicker({
format: &#39;YYYY-MM-DD hh:mm&#39;,
locale: moment.locale(&#39;zh-cn&#39;)
});
});
</script>
    </body>
</html>

Empfohlen: „

Bootstrap-TutorialVerfügt Bootstrap über eine Kalendersteuerung?“

Das obige ist der detaillierte Inhalt vonVerfügt Bootstrap über eine Kalendersteuerung?. 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：So schließen Sie die Registerkarte im BootstrapNächster Artikel：So schließen Sie die Registerkarte im Bootstrap

In Verbindung stehende Artikel

Mehr sehen