>  기사  >  웹 프론트엔드  >  bootstrap-datatimepicker 플러그인 사용

bootstrap-datatimepicker 플러그인 사용

PHPz
PHPz원래의
2018-07-09 17:24:182420검색

이 글은 주로 bootstrap-datatimepicker 플러그인의 사용법을 소개하고 있으며, 이제 필요한 친구들이 참고할 수 있도록 공유합니다. [관련 영상 추천 : 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;);
    });

위 내용은 모두의 학습에 도움이 되길 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장사항:

js 금액 처리에 소수점 이하 두 자리까지 추가

Node.js는 슈퍼에이전트를 사용하여 GET/POST 요청을 시뮬레이션합니다.

AngularJS 프런트엔드 페이징 구현

위 내용은 bootstrap-datatimepicker 플러그인 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.