Parsley Date Format

Question

I am currently setting up a form with a <input type=date> field with Parsley to validate that the date cannot be in the past. However, I am unable to get it to validate despite giving it the correct values(in the future). It seems to read the minimum value from the min field but I tried changing the formats around(e.g Y/m/d) but the error still pops up. Can I know what is the issue behind this and what is the workaround to it? Thanks in advance.

The error is This value should be greater than or equal to 10/21/2014. even though I gave it a date later than that.

<input type="date" name="contact-date" id="contact-date" placeholder="MM/DD/YYYY" data-date-format="mm/dd/yyyy" min="<?php echo date('m/d/Y'); ?>" parsley-type="dateIso">

I looked through K D's answer and realized that the regex was for DD/MM/YYYY so I changed it from

/^([12]\d|0[1-9]|3[01])\D?(0[1-9]|1[0-2])\D?(\d{4})$/ to

/^(0[1-9]|1[0-2])\D?([12]\d|0[1-9]|3[01])\D?(\d{4})$/

Somehow this changed to any date passed is a valid date despite the min value being specified.

Code is now:

<input type="date" class="contact-input" name="contact-date" id="contact-date" placeholder="MM/DD/YYYY" data-type="dateIso" data-parsley-min="<?php echo date('m/d/Y'); ?>">

Answer 1

parsley-type="dateIso" tells me that you are using Parsley v1.* which is deprecated. data-date-format="mm/dd/yyyy" tells me that you are using Bootstrap Datetimepicker.

I suggest you use Parsley 2.x (even if it you need to craft the validator for min date) and use the attribute data-date-minDate of Datetimepicker.

For this solution, you need the following code (working jsfiddle):

<div class='input-group date' id='datetimepicker'>
    <input type='text' name="contact-date" id="contact-date"
        placeholder="MM/DD/YYYY"
        data-date-format="MM/DD/YYYY"
        data-date-minDate="<?php echo date('m/d/Y'); ?>"
        data-parsley-mindate="<?php echo date('m/d/Y'); ?>" />
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>

<script>
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', 'This date should be greater than %s');

$('#myForm').parsley();

$('#datetimepicker').datetimepicker({
    language:'en'
});
</script>

Notes:

• data-date-format should be MM/DD/YYYY (uppercase, check momentjs docs);
• Replace parsley-type="dateIso" with data-parsley-mindate="<?php echo date('m/d/Y'); ?>" /> so the custom validator is executed