Question

我遇到了bootstrap验证datetimepicker的问题。 endDate必须小于startDate并显示消息或强制endDate输入大于startDate。

我有这样的datetimepicker格式：

$(document).ready(function() {
$(".datetimepicker").datetimepicker({
     format: "YYYY-MM-DD",
});

这是我的表单代码：

<div class="col-xs-4 col-sm-4 col-md-4">
   <div class="form-group">
      <label>Date In:</label>
      {!! Form::text('date_in', null, array( 'id' => 'date_in', 'class' => 'form-control datetimepicker' )) !!}
   </div>
</div>

<div class="col-xs-4 col-sm-4 col-md-4">
   <div class="form-group">
      <label>Date Out:</label>
      {!! Form::text('date_out', null, array('id' => 'date_out', 'class' => 'form-control datetimepicker' )) !!}
   </div>
</div>

到目前为止，这是我的jquery：

$.each(inputFormEle, function(index, value) {
var getElByName = $(value).attr('name')

switch(getElByName) {
case 'date_in':

    $('#accidentForm').bootstrapValidator('addField', getElByName, {
        validators: {
            date: {
                format: 'YYYY-MM-DD'
            },
            callback: {
                callback: function(value, validator, $field) {
                    var dateIn = moment(value);
                    var dateOut = moment($('input[name="date_in"]').val());
                    console.log(dateIn, dateOut);
                    if ( dateIn.isBefore(dateOut) ) { 
                        return {
                            valid: true,
                        }
                    }
                    else {
                        return {
                            valid: false,
                            message: 'The Date in must be less than Date out'
                        }
                    }
                }
            }
        },
    });

break;

case 'date_out':

    $('#accidentForm').bootstrapValidator('addField', getElByName, {
        validators: {
            date: {
                format: 'YYYY-MM-DD'
            },
            callback: {
                callback: function(value, validator, $field) {
                    var dateOut = moment(value);
                    var dateIn = moment($('input[name="date_out"]').val());

                    if ( dateOut.isAfter(dateIn) ) { 
                        return {
                            valid: true,
                        }
                    }
                    else {
                        return {
                            valid: false,
                            message: 'The Date out must be greater than Date in'
                        }
                    }
                }
            }
        }
    });
break;
  }
});

它根本不起作用，任何想法？感谢。

Answer 1

$("#endDate").change(function(){

    var startDate = new Date($("#startDate").val());

    var endtDate = new Date($("#endDate").val());

    if(startDate < endtDate ){

        /* your validation and error message */

    }else{

        /* your piece of code*/

    }
});


/* similarly you can write for start date also */

datetimepicker startDate不能大于endDate

1 个答案: