adminlte中使用时间插件

daterangepicker

• 引入文件，语言是由moment控制的

<link rel="stylesheet" href="{% static 'adminlte/plugins/daterangepicker/daterangepicker.css' %}">
<link rel="stylesheet" href="{% static 'adminlte/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css' %}">
<script src="{% static 'adminlte/plugins/moment/moment.min.js' %}"></script>
<script src="{% static 'adminlte/plugins/moment/locale/zh-cn.js' %}"></script>
<script src="{% static 'adminlte/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js' %}"></script>
<script src="{% static 'adminlte/plugins/daterangepicker/daterangepicker.js' %}"></script>

• html

<div class="form-group">
    <label><a style="color: red;">*</a>计划完成时间:</label>
    <div class="input-group date" id="reservationdatetime" data-target-input="nearest" >
        <input type="text" class="form-control datetimepicker-input" data-target="#reservationdatetime" name="event_deadline" id="event_deadline" value="{{ event_deadline }}">
        <div class="input-group-append" data-target="#reservationdatetime" data-toggle="datetimepicker">
            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
        </div>
    </div>
</div>

• 验证，选择的时间不能大于当前时间

// 比较时间
     $.validator.addMethod("compareDate", function(value, element) {  
         var event_deadline = $("#event_deadline").val();                        
         var date1 = new Date(Date.parse(event_deadline.replace("-", "/"))); 
         // 和当前时间比较           
         var date2 = new Date();     
         return date1 >= date2;        
     },"结束时间不能早于当前时间");
       // 表单验证
       $('#editEventForm').validate({
         rules: {
           event_deadline: {
               required: true,
               compareDate: true,
           },
         }