Question

我正在使用datepicker获取日期，我需要进行验证，例如，如果开始日期大于结束日期，则需要显示错误

我尝试使用下面的代码，但效果不错

my code

HTML代码

    $('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")
            }

    });

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

Answer 1

这有效。

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

a。条件主要是false。日期不应与strings进行比较。将它们转换为日期对象并进行验证。

b。您只是在添加文本。旧邮件将不会被清除并堆积。每次都替换全部内容，或者有默认错误消息，并根据验证显示/隐藏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>

如何在Datepicker中的两个日期之间检查验证

1 个答案: