Как проверить валидацию между двумя датами в DatePicker

Question

Я использую DatePicker, чтобы получить дату, мне нужно сделать проверку, например, если дата начала больше, чем дата окончания, то нужно отобразить ошибку

Я пробовал с приведенным ниже кодом, но он не работает

    $('body').on('focus', ".datepicker", function () {
        $(this).datepicker({
            autoclose: true,
            format: '<?php echo date_format_datepicker(); ?>',
            language: '<?php _trans('cldr'); ?>',
            weekStart: '<?php echo get_setting('first_day_of_week'); ?>',
            todayBtn: "linked"
        });

        var sDate;
        $("#product_start").datepicker().on('changeDate',function (ev) {
            sDate = $(this).val();
        });


        $("#product_end").datepicker().on('changeDate',function (ev) {
        var edate = $(this).val();
            if (sDate > edate) {
                // $('#edate').datepicker("setDate", sdate);
                $('#date_error').append("Date should lesser than start date")
            }

    });

HTML код

//Start date 
<input name="product_start" id="product_start" class="form-control input-sm datepicker">

//end date
<input name="product_end" id="product_start" class="form-control input-sm datepicker">

Печатает ошибку печати несколько раз, если дата начала больше, чем дата окончания.

Answer 1

Это работает.

1. Вы используете один и тот же идентификатор для 2 сборщиков дат, чего не следует делать.

2. Несколько строк напечатано, потому что

   а. Состояние в основном false. Даты не должны сравниваться как strings. Преобразуйте их в объекты даты и подтвердите.

   б. Вы просто добавляете текст. Старые сообщения не будут очищены и будут сложены. Заменяйте весь контент каждый раз или получите сообщение об ошибке по умолчанию и покажите / скройте div на основе проверки.

$('.datepicker').each(function (){
    $(this).datepicker({
        autoclose: true,
        format: 'dd-mm-yyyy',
        todayBtn: "linked"
    });
});
var sDate,eDate;
$("#product_start").datepicker().on('changeDate',function(e){
    sDate = new Date($(this).datepicker('getUTCDate'));
    checkDate();
});

$("#product_end").datepicker().on('changeDate',function(date){
    eDate = new Date($(this).datepicker('getUTCDate'));
    checkDate();
});

function checkDate()
{
    if(sDate && eDate && (eDate<sDate))
    {
        $('#error').text("Date should lesser than start date");
    }
    else
    {
        $('#error').text("");
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

<input name="product_start" id="product_start" class="form-control input-sm datepicker">
<input name="product_end" id="product_end" class="form-control input-sm datepicker">
<div id="error"></div>