0

I been assigned with a task where I can only use vanilla javascript. I don't even have direct access to html since they using some kind of iframe.

Scenario.

when user blur out of the input, format the date end date format - month/day/year ( 00/00/0000)

The code should format these user scenarios.

  1. replace '-' with '/' if user uses'-' to separate date (i have)

  2. if the user forgets to put '0' for day or month till month 9 or day 9 auto add a '0' in front of day or month or both (ex;9/9/1999 to 09/09/1999)

  3. if the user only put 2 digits for the year, the code should assume its the year 2000's and add 20 in front of the year (ex: 9/9/15 to 09/09/2015)

how can I achieve 2, 3 using my js structure and vanilla js only? Remember i cant edit HTML so cant do like value ="this.value" , or moment js etc

function execute () {
  var new_date = document.getElementById('date_val').value;
  var j = format(new_date);
  document.getElementById('date_val').value = j; 
}

function format(incoming_date) {
  
  var d = new Date(incoming_date);
  console.log('new date', d)
  day = d.getDate();
  month = d.getMonth() + 1;
  year = d.getFullYear();
  return (String(month).length == 1 ? '0' + month : month) + '/' + (String(day).length == 1 ? '0' + day : day) + '/' + year;
};
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>


</head>

<body>
date: <input type="text" id="date_val" onblur="execute()"> 
  
  <!-- <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

  <script src="./js/test.js"></script> -->
  <script src="./js/test.js"></script>
</body>

</html>
jsPlayer
  • 1,195
  • 7
  • 32
  • 56
  • `document.getElementById("date_val").onblur=function() { /* here is your function */}` - find the rest on SO with simple searches like I did to find the duplicate – mplungjan Mar 26 '18 at 20:22

1 Answers1

1

You could use Javascript's Date, which would solve both your leading 0 issue, as well as the - issue, and it will fill dates with 20 if an abbreviated year is given.

var d = new Date('9/3/1999');
var f = new Date('1-1-2005');
var g = new Date('8/8/08');

function formatDate(d) {
  day = d.getDate();
  month = d.getMonth() + 1;
  year = d.getFullYear();
  return (String(month).length == 1 ? '0' + month : month) + '/' + (String(day).length == 1 ? '0' + day : day) + '/' + year;
}

console.log(formatDate(d));
console.log(formatDate(f));
console.log(formatDate(g));
user3483203
  • 50,081
  • 9
  • 65
  • 94
  • in case you dont want to use Date function you can simply use this code after changing - to '/' var s1 = new_date.split('/'); s1[0] = s1[0]<10 && (s1[0].indexOf('0') == -1)?'0'+s1[0]:s1[0]; s1[1] = s1[1]<10 && (s1[1].indexOf('0') == -1)?'0'+s1[1]:s1[1]; s1[2] = s1[2] < 100?parseInt(s1[2])+2000:s1[2]; new_date = s1.join('/'); – Manoj Verma Mar 26 '18 at 20:59
  • hey thanks for the answer, i changed my original code with your suggestion, works great. one small bug is when i enter say 01011991 , it's coming as 'nan' and 01/01/10191 for 010191. I like to stick with your date function, seems simpler. Is their a quick solution you see to format the above bugs?. i am checking it now – jsPlayer Mar 26 '18 at 21:51
  • 1
    @AnuRajan If there are no delimiters in the number, it is virtually impossible to come up with a single possible outcome for what the date should be. For example, should 010191 be 0/1/0191, or 01/01/91, etc.. – user3483203 Mar 26 '18 at 22:08
  • @chrisz m kool. thanks – jsPlayer Mar 26 '18 at 22:56