Home > Web Front-end > JS Tutorial > body text

Use of bootstrap-datatimepicker plug-in

PHPz
Release: 2018-10-16 16:09:15
Original
2416 people have browsed it

This article mainly introduces the use of bootstrap-datatimepicker plug-in, which has certain reference value. Now I share it with you. Friends in need can refer to it. [Related video recommendation: 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;);
    });
Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone’s learning. For more related content, please pay attention to PHP Chinese website!

Related recommendations:

js amount processing plus two decimal places

Node.js uses superagent to simulate GET/POST requests

AngularJS front-end paging implementation

The above is the detailed content of Use of bootstrap-datatimepicker plug-in. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template