Heim > Web-Frontend > js-Tutorial > Hauptteil

Verwendung des Bootstrap-Datatimepicker-Plug-Ins

PHPz
Freigeben: 2018-10-16 16:09:15
Original
2423 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Verwendung des Bootstrap-Datatimepicker-Plug-Ins vor. Jetzt kann ich ihn mit Ihnen teilen. [Ähnliche Videoempfehlungen: Bootstrap-Tutorial]

        1、引入相关的css、js文件(因为是bootstrap的,首先应该引入bootstrap.css和bootstrap.js);
         <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
         <link rel="stylesheet" href="/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
        <script type="text/javascript" src="/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
         <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>

        2、主要是设置开始时间从今天开始,今天之前的时间不能选;结束时间要大于开始时间
        $(&#39;#start_time&#39;).datetimepicker({
        format: &#39;yyyy-mm-dd hh:ii&#39;,
        autoclose: true,
        todayBtn: true,
        todayHighlight: true,
        startDate: new Date()
    }).on(&#39;changeDate&#39;,function(ev){
        var start_time=$("#start_time").val();
        $("#end_time").datetimepicker(&#39;setStartDate&#39;,start_time);
        $("#start_time").datetimepicker(&#39;hide&#39;);
    });

    $(&#39;#end_time&#39;).datetimepicker({
        format: &#39;yyyy-mm-dd hh:ii&#39;,
        autoclose: true,
        todayBtn: true,
        todayHighlight: true,
    }).on(&#39;changeDate&#39;,function(ev){
        var end_time=$("#end_time").val();
        $("#start_time").datetimepicker(&#39;setEndDate&#39;,end_time);
        $("#end_time").datetimepicker(&#39;hide&#39;);
    });
Nach dem Login kopieren

Ich hoffe, dass es für alle hilfreich ist Inhalt, achten Sie bitte auf die chinesische PHP-Website!

Verwandte Empfehlungen:

js-Betragsverarbeitung plus zwei Dezimalstellen

Node.js verwendet Superagent, um GET/POST-Anfragen zu simulieren

AngularJS-Front-End-Paging-Implementierung

Das obige ist der detaillierte Inhalt vonVerwendung des Bootstrap-Datatimepicker-Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage