2

如何使用 Jquery Validation 设置最大日期（当前日期）？

$('#form').validate({
        rules: {
            reportDate: {
                date: true
                //Max date rule of current date...
            }
        }
    });
4

3 回答 3

14

您可以使用addMethod添加验证方法以将最大日期设置为当前日期

$.validator.addMethod("maxDate", function(value, element) {
    var curDate = new Date();
    var inputDate = new Date(value);
    if (inputDate < curDate)
        return true;
    return false;
}, "Invalid Date!");   // error message

然后将此方法添加到规则中以设置验证

$("#frm").validate({
    rules: {
        reportDate: {
            required: true,
            date: true,
            maxDate: true
        }
    }
});

注意：日期'12/03/2013'被解释为 this 'mm/dd/yyyy'，
因此12/03/2013 > 06/26/2013 (today's date)无效。

演示

于 2013-06-26T06:14:33.567 回答
1

您需要一种验证方法，并且日期格式至关重要。使用日期选择器格式化功能会有所帮助。这是您可以将要检查的日期和日期格式作为参数传递的代码。传递“0”作为日期需要“今天”。

/**
 * Requires Datepicker and Validator
 *
 * Params: 
 * 0...dateformat. see datepicker
 * 1...date. Value "0" is "today"
 * 2...(optional). date to display. will be automatically filled if 0 and 1 are set.
 * usage:
 * myfield: { maxDate: ['m/d/yy', 0] }
 */
jQuery.validator.addMethod("maxDate", 
    function(value, element, params) {
        if (!params[0])
            throw 'params missing dateFormat';
        if (typeof(params[1]) == 'undefined' )
            throw 'params missing maxDate';

        var dateFormat = params[0];
        var maxDate = params[1];
        if (maxDate == 0) {
            maxDate = new Date();
            maxDate.setHours(0); // make it 00:00:0
            maxDate.setMinutes(0);
            maxDate.setSeconds(0);
            maxDate.setMilliseconds(0);
        }
        if (typeof(params[2]) == 'undefined' )
            params[2] = $.datepicker.formatDate(dateFormat, maxDate);

        try {
            var valueAsDate = $.datepicker.parseDate( dateFormat, value )
            return (valueAsDate < maxDate);
        } catch (x) {
            return false;
        }

    },'Must be before {2}.');


$("#myform").validate({
    rules: {
        datepicker : { 
            maxDate ['m/d/yy', 0]
        }
    }
});

HTML：

<input name="datepicker" class="datepicker" type="text"/>
于 2014-09-26T13:24:37.523 回答
1

我认为这是更优雅的解决方案，因为您可以根据需要更改日期格式并将其与 datepicker 一起使用。

// Datepicker
$('#date_start').datepicker({
    dateFormat: 'dd.mm.yy',
    maxDate: "+0",
    onClose: function() {$(this).valid();},
}).datepicker("setDate", new Date());


// Validation method
$.validator.addMethod("maxDate", function(e) {
    var curDate = $('#date_start').datepicker("getDate");
    var maxDate = new Date();
    maxDate.setDate(maxDate.getDate());
    maxDate.setHours(0, 0, 0, 0); // clear time portion for correct results
    console.log(this.value, curDate, maxDate);
    if (curDate > maxDate) {
        $(this).datepicker("setDate", maxDate);
        return false;
    }
    return true;
});


//Date validation
$("#form").validate({
    // Rules for form validation
    rules: {
        date_start:{
            required: true,
            maxDate: true
        },
    },

    messages: {
        date_start:{
            required: 'Enter date_start',
            maxDate: 'Must be today date or less',
        },
    },
    //Error placement
    errorPlacement: function (error, element) {
       error.insertAfter(element.parent());
    }
});

//HTML
<input type="text" name="date_start" id="date_start">
于 2015-02-12T15:45:15.217 回答