时间戳

首页 > 解决方案 > 如何在日期选择器中检查两个日期之间的验证

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

问题描述

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

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

标签： jquerydatepicker

解决方案

这行得通。

  1. 您对 2 个日期选择器使用相同的 id，这是不应该的。

  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>

推荐阅读