recherche

Maison >interface Web >Tutoriel d'amorçage >Bootstrap a-t-il un contrôle de calendrier ?

Bootstrap a-t-il un contrôle de calendrier ?

藏色散人
藏色散人original
2021-02-05 09:03:404703parcourir

Bootstrap possède un contrôle de calendrier, un contrôle de calendrier d'heure et de date, nommé "datetimepicker". C'est un composant Bootstrap qui peut simplifier la saisie de la date et de l'heure sur la page. Le contrôle datetimepicker prend en charge la sélection de date et le paramètre de format, ainsi que le contrôle de sélection de période de temps. Il vous suffit d'utiliser des balises de script et de lien pour introduire les fichiers pertinents sur la page requise pour l'utiliser.

Bootstrap a-t-il un contrôle de calendrier ?

L'environnement d'exploitation de cet article : système Windows 7, bootstrap3, ordinateur Dell G3.

Le bootstrap a-t-il un contrôle de calendrier ?

Bootstrap dispose d'un contrôle de calendrier d'heure et de date, nommé datetimepicker, qui est un composant Bootstrap qui peut simplifier la saisie de la date et de l'heure sur la page.

Utilisation du contrôle Bootstrap datetimepicker

1. Prise en charge de la sélection de la date et du réglage du format

2. Prise en charge de la sélection de l'heure

3. 🎜>

4. Support chinois

Styles et js impliqués : 

<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>

Passons directement à l'exemple. 

<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
*/

Capture d'écran :

Bootstrap a-t-il un contrôle de calendrier ?

Exemple d'heure de début : 

<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);
    });
});

Capture d'écran :

Bootstrap a-t-il un contrôle de calendrier ?

Lors de l'initialisation, utilisez defaultDate pour spécifier l'heure par défaut : 

 $(&#39;#datetimepicker1&#39;).datetimepicker({
            format: &#39;YYYY-MM-DD&#39;,
            locale: moment.locale(&#39;zh-cn&#39;),
            defaultDate: "1990-1-1"
        });

Bien sûr, vous pouvez également utiliser le code JS pour contrôler la valeur par défaut de la zone de saisie.

Exemple spécifique : 

<!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>

Bootstrap a-t-il un contrôle de calendrier ?

Recommandé : "

tutoriel bootstrap"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment fermer l'onglet dans bootstrapArticle suivant：Comment fermer l'onglet dans bootstrap

Articles Liés

Voir plus