Убедитесь, что дата окончания больше даты начала и в правильном диапазоне

Question

У меня есть форма с двумя полями даты start дата и end дата.Форма имеет динамически созданные строки, каждая из которых имеет эти два поля даты.

Я установил дату начала и дату окончания в пределах диапазона, используя функции minDate и maxDate datepicker.Это работает, за исключением случаев, когда я выбираю дату окончания, она должна быть больше даты начала, и она также должна быть в пределах диапазона дат.

Answer 1

Вы можете альтернативно добавить свою собственную проверку в процесс.

Получить значения полей ввода даты, использовать функцию Date(), чтобы получить значение даты, и создать условие вокруг него.

Обратите внимание, что в этом примере используются европейские стандарты: дд / мм / гггг

function validateDates(){
    var result = true;
	
    var start_date = $('#startDate').val();
    start_date = new Date(""+start_date);

    var end_date = $('#endDate').val();
    end_date = new Date(""+end_date);
		
    if(end_date <= start_date)
    {
        result = false;
        $('#dateError').html("End date must be later than start date!");
        $('#additionalText').html("Try changing the dates, and try again.");
    }
    
    return result;
}

function testFunction(){
    if( validateDates() ) {
         $('#additionalText').html("");
         $('#dateError').attr("id","success");
         $('#success').html("Success!");
    }
}

#dateError{
    color: red;
}

#success{
    color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" id="startDate" name="startDate" placeholder="Enter start date" value="12/10/2018">
<input type="text" class="form-control" id="endDate" name="endDate" placeholder="Enter end date" value="10/10/2018">
<br /><br />
<span id="dateError"></span>
<br />
<span id="additionalText"></span>
<br /><br />

<button onclick="testFunction();">Test</button>