Home > front end >  valid date format for mm/dd/yyyy and dd/mm/yyyy
valid date format for mm/dd/yyyy and dd/mm/yyyy

Time:12-05

I am trying to use a regex for for both types of dates which is dd/mm/yyyy or mm/dd/yyyy

right now i am using this regex

/^\d{2}\/\d{2}\/\d{4}$/

which makes sure my dates always end up in doubledigits for day and double digits for month and 4 digits for year and that is what is required,

but any javascript expert can guide if i have two valid regex dates following the two formats i am trying to do.

i do not want my dates to end up in 99/99/9999 but at least like 31/12/3000 or 12/31/3000

so the ending date valid is the 3000 and not more than that

this is what i tried

/^\d{2}\/\d{2}\/\d{4}$/

i9 am not expert at regex but this is what i was trying to do to make sure they enter date in the format it is required

CodePudding user response:

you can test this way :

const 
  rgxDte = /^\d{1,2}\/\d{1,2}\/\d{4}$/
, msgTxt =
   [ 'date is valid'
   , 'date doesn\'t respect regex' 
   , 'date year is > 3000'
   , 'date has invalid day / month value(s)'
   ];
document.querySelectorAll('button').forEach( btn =>
  {
  const 
    inDateTxt = btn.closest('label').querySelector('input')
  , outMsg    = btn.closest('label').querySelector('output')
  , dte_DMY   = inDateTxt.placeholder === 'dd/mm/yyyy'
    ;
  inDateTxt.oninput =_=>
    {
    outMsg.textContent = ''
    }    
  btn.onclick =_=>
    {
    let msgIndx = rgxDte.test(inDateTxt.value) ? 0 : 1
      ;
    if (!msgIndx) // same as if (msgIndx===0)
      {
      let 
        [ DM, MD, year ] = inDateTxt.value.split('/').map(Number)
      , day      = dte_DMY ? DM : MD
      , month    = (dte_DMY ? MD : DM) -1   // month value is an index (first month indx is zero)
      , dateTest = new Date( year, month, day ) // work with adds,ex: if day > month number days it add days value and do month  
        ;
      if (year > 3000)
        msgIndx = 2;

      if (!msgIndx  && ( dateTest.getDate() !== day  ||  dateTest.getMonth() !== month )) 
        msgIndx = 3;
      }
    outMsg.classList.toggle('BAD', !!msgIndx)
    outMsg.textContent = msgTxt[msgIndx] 
    }
  })
body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  margin      : 1rem;
}
label, input, output {
  display: block;
  }
input {
  padding    : .2rem .5rem;
  width      : 8rem;
  font-size  : 1.2rem ;
}
output {
  height : 2em;
  margin : .5rem 0 1rem 0;
  color  : green;
  }
output.BAD { color : red; }
<label>
  dd/mm/yyyy : 
  <input type="text" id="inDMY" placeholder="dd/mm/yyyy">
  <button>check</button>
  <output></output>
</label>

<label>
  mm/dd/yyyy : 
  <input type="text" id="inMDY" placeholder="mm/dd/yyyy">
  <button>check</button>
  <output></output>
</label>

CodePudding user response:

To match dates in the format dd/mm/yyyy or mm/dd/yyyy, you can use the following regular expression:

^(0?[1-9]|1[012])[- /.](0?[1-9]|[12][0-9]|3[01])[- /.](19|20)?[0-9]{2}$

This regular expression uses the following pattern:

^ - Start of the string

(0?[1-9]|1[012]) - Match a day or month, either as a one- or two-digit number, with a leading zero if necessary (for example, 01, 02, ..., 09, 10, 11, 12)

[- /.] - Match a separator character, either a dash (-), a forward slash (/), or a period (.)

(0?[1-9]|[12][0-9]|3[01]) - Match a day or month, either as a one- or two-digit number, with a leading zero if necessary (for example, 01, 02, ..., 09, 10, 11, 12, 13, 14, ..., 29, 30, 31)

[- /.] - Match a separator character, either a dash (-), a forward slash (/), or a period (.)

(19|20)? - Optionally match a century, either 19 or 20

[0-9]{2} - Match the last two digits of the year as a two-digit number (for example, 00, 01, 02, ..., 97, 98, 99)

$ - End of the string

To ensure that the date does not end up in the format 99/99/9999, you can use the Date object in JavaScript to parse the date and validate that it is a valid date. For example:

const regex = /^(0?[1-9]|1[012])[- /.](0?[1-9]|[12][0-9]|3[01])[- /.](19|20)?[0-9]{2}$/;

const dateString = "31/12/3000";

if (regex.test(dateString)) {
  // Use the Date object to parse the date and check if it is valid
  const date = new Date(dateString);
  if (!isNaN(date.getTime())) {
    // Date is valid
  } else {
    // Date is not valid
  }
} else {
  // Date does not match the regular expression
}

This code will first use the regular expression to check if the date string matches the pattern for dd/mm/yyyy or mm/dd/yyyy. If the date matches the pattern, it will then use the Date object to parse the date and check if it is a valid date. If the date is valid, it will do something with it (for example, store it in a database). If the date is not valid, it will handle the error (for example, display an error message to the user).

  • Related