コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > ブートストラップのチュートリアル > ブートストラップにはカレンダー コントロールがありますか?

ブートストラップにはカレンダー コントロールがありますか?

藏色散人
リリース： 2023-02-10 14:34:52
オリジナル
4699 人が閲覧しました

bootstrap には、「datetimepicker」という名前のカレンダー コントロール、時刻と日付のカレンダー コントロールがあり、ページ上での日付と時刻の入力を簡略化できるブートストラップ コンポーネントです。 datetimepicker コントロールは、日付の選択と形式の設定、および期間の選択コントロールをサポートしており、スクリプトとリンク タグを使用して必要なページに関連ファイルを導入するだけで使用できます。

ブートストラップにはカレンダー コントロールがありますか?

#この記事の動作環境: Windows7 システム、bootstrap3、Dell G3 コンピューター。

ブートストラップにはカレンダー コントロールがありますか?

bootstrap には、datetimepicker という名前の時刻と日付のカレンダー コントロールがあります。これは、ページ上での日付と時刻の入力を簡素化できるブートストラップ コンポーネントです。

Bootstrap datetimepicker コントロールの使用法

1. 日付選択と形式設定のサポート

2. 時間選択のサポート

3. 期間選択コントロールのサポート

4. 中国語のサポート

関連するスタイルと 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>
ログイン後にコピー

例に直接進みましょう。 

<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
*/
ログイン後にコピー

スクリーンショット:

ブートストラップにはカレンダー コントロールがありますか?

## 開始時刻の例: 

<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);
    });
});
ログイン後にコピー

スクリーンショット:

ブートストラップにはカレンダー コントロールがありますか?

初期化中に、defaultDate を使用してデフォルト時間を指定します。 

 $(&#39;#datetimepicker1&#39;).datetimepicker({
            format: &#39;YYYY-MM-DD&#39;,
            locale: moment.locale(&#39;zh-cn&#39;),
            defaultDate: "1990-1-1"
        });
ログイン後にコピー

もちろん、JS コードを使用して入力ボックスのデフォルト値を制御することもできます。

具体的な例: 

<!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>
ログイン後にコピー

ブートストラップにはカレンダー コントロールがありますか?

推奨: 「

ブートストラップ チュートリアル」

以上がブートストラップにはカレンダー コントロールがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
bootstrap
ソース：php.cn
前の記事：ブートストラップでタブを閉じる方法 次の記事：ブートストラップでポップアップボックスを閉じる方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...
から 2024-04-06 20:22:15
0
1
454
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
Web ページのサイズを変更するとブートストラップ スイッチが正しく動作しない これはコードです: <navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"clas...
から 2024-04-05 08:45:39
0
1
3443
Laravel のブートストラップ モードで AWS PDF ファイルを表示する https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6557122022151745398XtquBSY.pdf のよ...
から 2024-04-04 22:16:18
0
1
1450
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート