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'); ?>">

Electorate

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

Peltry

Hi. Your fiddle isn't working on my side though. And must the input be a text field instead of a date field? Thanks a lot! – Electorate

My bad, fiddle updated here: jsfiddle.net/milz/ffjb5b31/2. I prefer using text instead of date to prevent the default datepicker of Chrome. – Ring

This worked beautifully. But what happened to editing the regex? Did moment.js handle this? – Electorate

You don't need regex nor you need to edit the source code for Parsley (as a matter of fact, this is not a good idea). All the "magic" is done with return isNaN(timestamp) ? false : timestamp > minTs;. This is where it checks if the given date is greater than data-parsley-mindate. Also, if you enter a non-valid date it will return false as Date.parse() will return not a number. – Ring

Hi @LuísCruz , the parsley website is frustrating. No where on there does it give this information. Is there a better website to get direct knowledge like this? Also what is the string to create a custom date message? Thanks – Standby