Is it possible to specify a specific date range to validate using Parsley.js

Question

I am using a date picker that has a set range 1999:2005 however I only want from 08-01-1999 to be valid to 07-31-2005 so if the user selects outside of these dates I don't want my form to submit but instead prompt the user to add correct dates, I'm using parsley.js and was wondering if it is possible to add a date range in there to take care of this? If not I can add in my own validation.

Answer 1

You can fake it by using the parsley-beforedate="#elem" and parsley-afterdate="#elem" to refer to hidden, non-submitted fields which have these boundary values in them.

Alternatively, write a custom validator in JavaScript which you apply to these date fields along with the standard date validation. Here's one I wrote to prevent dates in the future. You can adapt it for your date range validation (note: it uses the datepicker routine from jqueryui).

$( '#formUpdate' ).parsley( {
    validateIfUnchanged: true,
    validators: {
        // checks that a date is not in the future
        // try needed because datepicker can throw an exception
        notfuturedate: function ( fieldValue ) {
            try {
                var d1 = $.datepicker.parseDate("dd/mm/yy", fieldValue); // convert string to date
            } catch (e) {
                // if date is invalid, let the date check routine report it
                return true;
            }
            var d0 = new Date(); // today
            return (d1<=d0);
        }
    }
 // some other irrelevant lines omitted
});

Having declared this new validator, you just put parsley-notfuturedate="true" on the input field and it works like a built-in parsley validation.

Also, if you are using a datepicker like the jqueryUI one , there are options (minDate, maxDate) to limit the range available.

Answer 2

<input type="text" placeholder="MM/DD/YYYY" required="" data-parsley-required-message="Date is required." data-parsley-pattern="^[0-9]{2}/[0-9]{2}/[0-9]{4}$" data-parsley-pattern-message="Invalid Date." data-parsley-maxdate="12/31/2019" data-parsley-mindate="01/01/2018" data-date-format="MM/DD/YYYY">
<script type="text/javascript">
    window.ParsleyValidator
        .addValidator('mindate', function(value, requirement) {
            // is valid date?
            var timestamp = Date.parse(value),
                minTs = Date.parse(requirement);

            return isNaN(timestamp) ? false : timestamp >= minTs;
        }, 32)
        .addMessage('en', 'mindate', '<div class="date-error">Date should be greater than or equal to %s</div>');

    window.ParsleyValidator
        .addValidator('maxdate', function(value, requirement) {
            // is valid date?
            var timestamp = Date.parse(value),
                minTs = Date.parse(requirement);

            return isNaN(timestamp) ? false : timestamp <= minTs;
        }, 32)
        .addMessage('en', 'maxdate', '<div class="date-error">Date should be less than or equal to %s </div>');
</script>