如何检查日期选择器中两个日期之间的验证

用户8758118

我正在使用 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">

如果开始日期大于结束日期，它会多次打印打印错误..

维涅什·拉贾

这有效。

您对 2 个日期选择器使用相同的 ID，您不应该这样做。
打印多行是因为

一种。情况主要是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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。