jquery Datepicker日期范围验证

jquery Datepicker date range validation

本文关键字:验证 范围 日期 Datepicker jquery      更新时间:2023-09-26

我有一个类似"出生日期"的字段。我已经使用jquery日期选择器来显示日历,以便用户可以选择日期。现在我有个问题。

在出生日期字段中,可以选择打开两个日期选择器字段(如)

出生日期--------从--------到--------

现在的问题是,如果用户在"收件人字段"中选择了一个小于"发件人字段"的日期,并按下提交按钮,它就会被提交。我需要阻止它提交并显示适当的消息,以便用户输入正确的日期。

请帮忙。

这是我使用的代码

<input id="borndate"  class="dateISO" onchange="checkDate('borndate');">
</input>
<span id="span_borndate" style="display:none">
<input  id="borndate"  class="dateISO"  onchange="checkDate('borndate');">
</span>

这是我使用的Java脚本

function checkdate(fieldname) {
    var comparator = '#comp_' + fieldName;
    var compVal = $(comparator).val();
    Value = $('#' + fieldName).val();
    var fromDate = jQuery.datepicker.parseDate('mm-dd-yy', Value, null);
    Values = $('#' + fieldName + '-to').val();
    var toDate = jQuery.datepicker.parseDate('mm-dd-yy', Values, null);
    $('#span_' + fieldName).find('.error').remove();
    if (compVal == "Between") {
        if (toDate < fromDate) {
            $('#span_' + fieldName).append("<label class='rangeError' generated='false'>Start date should come before end date</label>");
            return false;
        }
    }
    return true;
}

这是在提交时再次调用的函数

function validateforms() {
    var valid = true;
    $('//classnamefor table rows which includes the date td').each(function (index) {
        fieldName = $(this).attr("name");
        if ($('#' + fieldName).hasClass('dateISO')) {
            valid = checkDate(fieldName);
        }
    }
    return valid;
}

试试这个

http://jqueryui.com/demos/datepicker/#date-测距

并使文本框只读="true"

<input type="text" id="from" name="from_date" value="" readonly="true"/>
<input type="text" id="to" name="to_date" value="" readonly="true"/>