ブートストラップのDateTimePickerの使用方法の概要

タイムコントロールリファレンスドキュメント（迂回）ブートストラップ

https://blog.csdn.net/hizzyzzh/article/details/51212867#31-format-%E6%A0%BC%E5%BC%8F

私たちは、JSとCSSファイルを導入する必要があります。

https://files.cnblogs.com/files/likui-bookHouse/datetimepicker.rar

時間の分と秒を選択する場合は、サポートを制御します

htmlコード：

<divのクラス = " フォーム・グループCOL-XS-。6 " > 
                <ラベルクラス = " COL-XS-。1つのコントロール・ラベル"で時間を発行した> </ label>は
                <divのクラス = " COL-XS-。3 "スタイル= " 幅：205px; " > 
                    <divのクラスには、 = " グループ-INPUTコントロール" > 
　　　　　　　　　　　　　　デフォルト//@ViewBag.BeginDateで表示しているページのロードに時間点を     
                        <スパンID = " beginDateCtlを" クラス = "入力グループ日付form_date "データ・日付= " @ ViewBag.BeginDate "データの日付フォーマット= " YYYY-MM-DD HH：I：SS "データ・リンク・フォーマット= " YYYY-MM-DD HH：I： SS 「データリンクフィールド= 」BEGINTIME 「 > 
                            <入力クラス = 」フォームコントロール「 ID = 」searchBeginDate 「スタイル= 」幅：160ピクセル「タイプ= 」テキスト「値= 」@ViewBag。BEGINDATE " >
                            <スパンクラス = " 入力基アドオン" > <スパンクラス = " glyphicon glyphicon番目" > </ span>を</ span>を
                        </スパン> 
                    </ div> 
                </ div> 
                <ラベルクラス = " col- XS-1コントロールラベル"スタイル= " 幅：30px;テキスト整列：センター; " > --- </ label>は

                <divのクラス = " COL-XS-3 " >
                    <divのクラス =" 制御入力グループ" > 
                        <スパンID = " endDateCtl "  クラス = " 入力グループ日付form_date "データ最新= " @ ViewBag.EndDate "データの日付形式= " YYYY-MM-DD HH：私は：SS "データ・リンク形式= " YYYY-MM-DD HH：I：SS "データリンクフィールド= " 終了時刻" > 
                            <入力クラス = " フォームコントロール" ID = "searchEndDate "スタイル=" 幅：160ピクセル"タイプ= " テキスト"値= " @ ViewBag.EndDate " > 
                            <スパンクラス = " 入力基アドオン" > <スパンクラス = " glyphicon glyphicon番目" > </ span>を</スパン> 
                        </ span>を
                    </ div> 
                </ div> 
            </ div>

データ日付形式= "YYYY-MM-DD HH：I：SS" 24時間形式の時間 "YYYY-MM-DD HH：I：SS" 12時間

JSコード：

VaRのDATE = 新しい新しい日付（）;
 $（関数（）{ 
    $（' .form_date ' ）.datetimepicker（{ 
        言語：' ZH-CN ' 、
        CustomFormatプロパティ：' YYYY-MM-DD HH：MM：SS ' 、
        weekStart：1 、
        todayBtn：1 、             //それから、日を選択するために日の時間をクリックし、その日のボタンを表示 
        ：オートクローズ1を、           //時間を選択すると、自動的にシャットダウン終了 
        ：todayHighlight 1 、       //強調し、一日の時間 
        ：startView 2を、           //月ビュー、選挙日から 
        minView：0 、              //分は選択肢景色を眺めることができます 
        forceParse：0 、       
　　　　　たstartDateを：DATE、        //は、現在の時間後の時間を選択 
        minuteStepを：1            //時間のビューを構築するために使用されます。最小は1分間に1つのビューはオプションです。分である 
    ）}; 
    $（「[データ-トグル= 『ポップオーバー』] 」）.popover（）;
     // 終了時間は、空の開始時間よりも大きい、または終了時刻である必要があります 
    $（「#beginDateCtlを」）.on （ ' CHANGEDATE ' 、関数（EV）{ 
        $（' #endDateCtl '）.datetimepicker（ 'setStartDate " 、ev.date）。
        VaRの D = $（' #searchEndDate ' .val）（）;
        もし（D）{
             VARの日付= 新しい日付（d.replace（/ - / gで、' / ' ））;
            もし（！日付= ' 無効な日付' &&日付< ev.date）{ 
                $（' #searchEndDate '）.val（"" ）; 
            } 
        } 
    }）。
   

}）

ブートストラップのDateTimePickerの使用方法の概要

おすすめ