Regex to validate date dd-mm-yyyy while typing (on keyup)

Question

Screenshot How to validate dd-mm-yyyy with regex, currently I have got yyyy-mm-dd but not able to find for dd-mm-yyyy. Please help as I need on validate on every keyup

jsFiddle

$("#date").on("keyup", function()
{
    let valid = /^\d{0,4}$|^\d{4}-0?$|^\d{4}-(?:0?[1-9]|1[012])(?:-(?:0?[1-9]?|[12]\d|3[01])?)?$/.test(this.value), input = this.value;
    
    if(!valid) {
        this.value = input.substring(0, input.length - 1);
        this.style.backgroundColor = '#EEA39C';
    }
    setTimeout(() => { this.style.backgroundColor = '#88DD85'; }, 700);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input id="date" style="font-size: 20px" maxlength="10" type="text" />

It's not job for RegEx. E.g. you allow `2023-02-31` with initial regex. It's valid as pattern, but e.g. February has drifting end-date based on year and that can't be validated with regex-only — Justinas, Feb 06 '23 at 14:05
Consider not using regex to validate dates. The current regex allows `2020-2-2` which is not valid — evolutionxbox, Feb 06 '23 at 14:08
Why it's already working for yyyy-mm-dd. Pls chk js fiddle link — shenoy, Feb 06 '23 at 14:09
The code will validate yyyy-mm-dd but I need to validate dd-mm-yyyy what changes I need to make — shenoy, Feb 06 '23 at 14:10
@shenoy The OP actually does not want to use an input-element of [`type="text"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text) and be responsible for a regex based validation on this element's [`input`-event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) (which is the preferred event over `keyup`); instead the OP wants to either use a [`type="date"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date) or a [`type="datetime-local"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local) input-element. — Peter Seliger, Feb 06 '23 at 14:25

score 0 · Answer 1 · answered Feb 06 '23 at 14:16

You should not use Regex to validate if date is actually valid. Use JS logic for that, e.g. momentJs library

function validateDate(el) {
  let date = $('#date').val();
  let format = $('#format').val();
  let isValid = moment(date, format).isValid();

  alert('Date ' + date + ' is ' + (isValid ? 'valid' : 'invalid') + ' for format ' + format);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

<select id="format" onChange="validateDate()">
  <option value="YYYY-MM-DD">yyyy-mm-dd</option>
  <option value="DD/MM/YYYY">dd/mm/yyyy</option>
  <option value="MM/DD/YYYY">mm/dd/yyyy</option>
</select>

<input id="date" type="text" onChange="validateDate()"/>

it should not allow me to type and invalid date for month if I enter 13 it should accept 3 and for date it should not accept above 31, year four digit any no is fine — shenoy, Feb 06 '23 at 14:19
this will work only after entering the whole date and then validate for me it should return false on any wrong month or date — shenoy, Feb 06 '23 at 14:20

score 0 · Answer 2 · answered Feb 06 '23 at 14:37

This regex check the whole Gregorian rule. you can try this.

 regExp = "(((\d{2}(([13579][26])|([2468][480])|(0[48])))|(([13579][26])|([02468][480]))00)-02-29)|(\d{4}-((?:(0[13578]|1[02])-([0-2]\d|3[0-1]))|(?:(0[469]|11)-([0-2]\d|30))|(?:02-([0-1]\d|2[0-8]))))"

Regex to validate date dd-mm-yyyy while typing (on keyup)

2 Answers2