birth date input not working after number 13 with javascript - javascript

We are doing AB testing. We can only touch the client side code with Google Optimize. So the designer asked us to change the birth date format from separated input to an unify input like this ->
So the idea is that the user type the birth date numbers [13.07.1998] and then the information will get to the separated input like this [13] [July] [1998]
It works fine until we use day 13. After that number the code does not work. But if I use 12 it works.
const dobInput = document.querySelector("input");
const birthDay = document.querySelector("#birthDay");
const birthMonth = document.querySelector("#birthMonth");
const birthYear = document.querySelector("#birthYear");
dobInput.addEventListener("change", (e) => {
const dobString = e.target.value;
if ( isValidDate(dobString) ) {
let date = dobString.slice(0, 2);
let month = dobString.slice(3, 5);
let year = dobString.slice(6, 10);
birthDay.value = date;
birthMonth.value = month;
birthYear.value = year;
} else {
const errorMessage = document.querySelector(".cro-error-text");
errorMessage.classList.add('error');
}
});
function isValidDate(dateString) {
// First check for the pattern
if (!/^\d{1,2}\.\d{1,2}\.\d{4}$/.test(dateString)) return false;
// Parse the date parts to integers
var parts = dateString.split(".");
var day = parseInt(parts[1], 10);
var month = parseInt(parts[0], 10);
var year = parseInt(parts[2], 10);
// Check the ranges of month and year
if (year < 1905 || year > 2004 || month == 0 || month > 12) return false;
var monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
// Adjust for leap years
if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0))
monthLength[1] = 29;
// Check the range of the day
return day > 0 && day <= monthLength[month - 1];
}
Does anyone knows why it could be happening? thanks!

I think the error is this....
if-----------------------------------------
12 - - - 10 - - - 2000
Day - - - month - - - year
in your code you are saving
12 - - - - 10 - - - 2000
Month - - -Day - - - -year
I think the error is this because I think you are using selects tag.
select tags have options tag....and each option tag have a value.
<select>
<option value=1>Jenuary</option>
<option value=2>February</option>
</select>
So _select.value=13 is not posible.because there shouldn't be an
<option value=13>
There is not a month 13...I think you are confusing month with day when you store it in the variable
Or check if all options tags are within select tag...

Related

How to calculate new date after date validation?

I'm using Elian Ebbing's data validation code from here and after validation, I'd like to take the date entered and return a new date for X amount of months later. For example, if I entered 06/09/2019, I would then like the code to return the correct new date that's 6 months later, which would be 12/6/2019.
Can someone please help guide me through the process of accomplishing this? I have been trying different methods of reusing the original code to get the results that I want, however I have been at this since July 2nd and have concluded I just can't figure this out on my own. I am completely stumped.
Lastly, my deepest apologies in advance that I didn't just comment on the original thread for Mr. Ebbing's code and ask for help, but unfortunately I did not have enough reputation points to do so.
If you are not sure that it is good to use some library (moment.js). If you want to find something already discovered, be ready to bump your head.
// Elian Ebbing validator
function isValidDate(dateString) {
// First check for the pattern
if(!/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(dateString))
return false;
// Parse the date parts to integers
var parts = dateString.split("/");
var day = parseInt(parts[1], 10);
var month = parseInt(parts[0], 10);
var year = parseInt(parts[2], 10);
// Check the ranges of month and year
if(year < 1000 || year > 3000 || month == 0 || month > 12)
return false;
var monthLength = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
// Adjust for leap years
if(year % 400 == 0 || (year % 100 != 0 && year % 4 == 0))
monthLength[1] = 29;
// Check the range of the day
return day > 0 && day <= monthLength[month - 1];
}
// if you want to change date format
function formatDate(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1), // monts start form 0 so for result 06/01/2019
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) {
month = '0' + month;
}
if (day.length < 2) {
day = '0' + day;
}
return [month, day, year].join('/');
}
// increment Date with count of months
function incrementDate(date, counter = 0) {
if (isValidDate(start_date_value)) {
var newDate = new Date(date);
newDate.setMonth(newDate.getMonth() + counter);
console.log(formatDate(newDate));
}
}
var start_date_value = "01/01/2019";
incrementDate(start_date_value, 5) ; // 06/01/2019

How do I convert a decimal year value into a Date in Javascript?

OK, this is basically a Javascript version of How can I convert a decimal year value into a Date in Ruby? and not exactly a duplicate of Javascript function to convert decimal years value into years, months and days
Input:
2015.0596924
Desired output:
January 22, 2015
I have solved it (see below), but I expect (just like the Ruby version of this question) that there is a better way.
The other solution would be:
Create date for given year (integer part)
Calculate days from reminder (decimal part) and convert to milliseconds
Add milliseconds to (1)
In script:
function leapYear(year) {
return ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
};
function convertDecimalDate(decimalDate) {
var year = parseInt(decimalDate);
var reminder = decimalDate - year;
var daysPerYear = leapYear(year) ? 366 : 365;
var miliseconds = reminder * daysPerYear * 24 * 60 * 60 * 1000;
var yearDate = new Date(year, 0, 1);
return new Date(yearDate.getTime() + miliseconds);
}
var date = convertDecimalDate(2015.0596924);
console.log(date);
You can play with it on this Fiddle.
JavaScript will resolve the dates for you if you add too much time. See demonstration below. The solution below doesn't calculate the leap year based on the algorithm, but takes next year's date and subtracts it from this year. This assumes that the JavaScript specification properly calculates leap years.
See Mozilla Docs for more info.
function decimalDateToJsDate(time) {
var year = Math.floor(time);
var thisYear = new Date(year, 0, 1);
var nextYear = new Date(year + 1, 0, 1);
var millisecondsInYear = nextYear.getTime() - thisYear.getTime();
var deltaTime = Math.ceil((time - year) * millisecondsInYear);
thisYear.setMilliseconds(deltaTime);
return thisYear;
}
document.getElementById("output").innerHTML = decimalDateToJsDate(2015.0596924);
<pre id="output"></pre>
function leapYear (year){
return ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
}
function getMonthAndDayFromDayOfYear(dayOfYear, year){
var daysInMonthArray = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if (leapYear(year)) { daysInMonthArray[2] = 29; }
var daysLeft = dayOfYear;
var month = 0;
for (i=0; i<daysInMonthArray.length; i++) {
var daysInThisMonth = daysInMonthArray[i];
if (daysLeft > daysInThisMonth) {
month += 1;
daysLeft -= daysInThisMonth;
} else {
break;
}
}
return { month: month, day: daysLeft };
}
function convertDecimalDate(decimalDate){
decimalDate = parseFloat(decimalDate);
var year = parseInt(decimalDate); // Get just the integer part for the year
var daysPerYear = leapYear(year) ? 366 : 365; // Set days per year based on leap year or not
var decimalYear = decimalDate - year; // A decimal representing portion of the year left
var dayOfYear = Math.ceil(decimalYear * daysPerYear); // day of Year: 1 to 355 (or 366)
var md = getMonthAndDayFromDayOfYear(dayOfYear, year);
var day = md['day'];
var month = md['month'];
return new Date(year,month,day);
}
var date = convertDecimalDate(2015.0596924);

How can I check if a date is valid that allows m/d/y and yyyy-mm-dd to be valid

I've tried using the following code to validate a date:
var date = Date.parse(text);
if (isNaN(date)) {
// Invalid date
}
This does allow m/d/y and yyyy-mm-dd to be valid, but it also allows, for example, a single digit to be valid.
I would like a date function that allows these two formats, m/d/y and yyyy-mm-dd, but is more strict in not allowing just digits.
There are many answer to this question.Out of them i think this function is little bit easier(in mm/dd/yyyy)
function isValidDate(dateString)
{
// First check for the pattern
if(!/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(dateString))
return false;
// Parse the date parts to integers
var parts = dateString.split("/");
var day = parseInt(parts[1], 10);
var month = parseInt(parts[0], 10);
var year = parseInt(parts[2], 10);
// Check the ranges of month and year
if(year < 1000 || year > 3000 || month == 0 || month > 12)
return false;
var monthLength = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
// Adjust for leap years
if(year % 400 == 0 || (year % 100 != 0 && year % 4 == 0))
monthLength[1] = 29;
// Check the range of the day
return day > 0 && day <= monthLength[month - 1];
};
SEE DEMO HERE
You can also take help from
HERE

How to validate a date?

I'm trying to test to make sure a date is valid in the sense that if someone enters 2/30/2011 then it should be wrong.
How can I do this with any date?
One simple way to validate a date string is to convert to a date object and test that, e.g.
// Expect input as d/m/y
function isValidDate(s) {
var bits = s.split('/');
var d = new Date(bits[2], bits[1] - 1, bits[0]);
return d && (d.getMonth() + 1) == bits[1];
}
['0/10/2017','29/2/2016','01/02'].forEach(function(s) {
console.log(s + ' : ' + isValidDate(s))
})
When testing a Date this way, only the month needs to be tested since if the date is out of range, the month will change. Same if the month is out of range. Any year is valid.
You can also test the bits of the date string:
function isValidDate2(s) {
var bits = s.split('/');
var y = bits[2],
m = bits[1],
d = bits[0];
// Assume not leap year by default (note zero index for Jan)
var daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
// If evenly divisible by 4 and not evenly divisible by 100,
// or is evenly divisible by 400, then a leap year
if ((!(y % 4) && y % 100) || !(y % 400)) {
daysInMonth[1] = 29;
}
return !(/\D/.test(String(d))) && d > 0 && d <= daysInMonth[--m]
}
['0/10/2017','29/2/2016','01/02'].forEach(function(s) {
console.log(s + ' : ' + isValidDate2(s))
})
Does first function isValidDate(s) proposed by RobG will work for input string '1/2/'?
I think NOT, because the YEAR is not validated ;(
My proposition is to use improved version of this function:
//input in ISO format: yyyy-MM-dd
function DatePicker_IsValidDate(input) {
var bits = input.split('-');
var d = new Date(bits[0], bits[1] - 1, bits[2]);
return d.getFullYear() == bits[0] && (d.getMonth() + 1) == bits[1] && d.getDate() == Number(bits[2]);
}
I recommend to use moment.js. Only providing date to moment will validate it, no need to pass the dateFormat.
var date = moment("2016-10-19");
And then date.isValid() gives desired result.
Se post HERE
This solution does not address obvious date validations such as making sure date parts are integers or that date parts comply with obvious validation checks such as the day being greater than 0 and less than 32. This solution assumes that you already have all three date parts (year, month, day) and that each already passes obvious validations. Given these assumptions this method should work for simply checking if the date exists.
For example February 29, 2009 is not a real date but February 29, 2008 is. When you create a new Date object such as February 29, 2009 look what happens (Remember that months start at zero in JavaScript):
console.log(new Date(2009, 1, 29));
The above line outputs: Sun Mar 01 2009 00:00:00 GMT-0800 (PST)
Notice how the date simply gets rolled to the first day of the next month. Assuming you have the other, obvious validations in place, this information can be used to determine if a date is real with the following function (This function allows for non-zero based months for a more convenient input):
var isActualDate = function (month, day, year) {
var tempDate = new Date(year, --month, day);
return month === tempDate.getMonth();
};
This isn't a complete solution and doesn't take i18n into account but it could be made more robust.
var isDate_ = function(input) {
var status = false;
if (!input || input.length <= 0) {
status = false;
} else {
var result = new Date(input);
if (result == 'Invalid Date') {
status = false;
} else {
status = true;
}
}
return status;
}
this function returns bool value of whether the input given is a valid date or not. ex:
if(isDate_(var_date)) {
// statements if the date is valid
} else {
// statements if not valid
}
I just do a remake of RobG solution
var daysInMonth = [31,28,31,30,31,30,31,31,30,31,30,31];
var isLeap = new Date(theYear,1,29).getDate() == 29;
if (isLeap) {
daysInMonth[1] = 29;
}
return theDay <= daysInMonth[--theMonth]
This is ES6 (with let declaration).
function checkExistingDate(year, month, day){ // year, month and day should be numbers
// months are intended from 1 to 12
let months31 = [1,3,5,7,8,10,12]; // months with 31 days
let months30 = [4,6,9,11]; // months with 30 days
let months28 = [2]; // the only month with 28 days (29 if year isLeap)
let isLeap = ((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0);
let valid = (months31.indexOf(month)!==-1 && day <= 31) || (months30.indexOf(month)!==-1 && day <= 30) || (months28.indexOf(month)!==-1 && day <= 28) || (months28.indexOf(month)!==-1 && day <= 29 && isLeap);
return valid; // it returns true or false
}
In this case I've intended months from 1 to 12. If you prefer or use the 0-11 based model, you can just change the arrays with:
let months31 = [0,2,4,6,7,9,11];
let months30 = [3,5,8,10];
let months28 = [1];
If your date is in form dd/mm/yyyy than you can take off day, month and year function parameters, and do this to retrieve them:
let arrayWithDayMonthYear = myDateInString.split('/');
let year = parseInt(arrayWithDayMonthYear[2]);
let month = parseInt(arrayWithDayMonthYear[1]);
let day = parseInt(arrayWithDayMonthYear[0]);
My function returns true if is a valid date otherwise returns false :D
function isDate (day, month, year){
if(day == 0 ){
return false;
}
switch(month){
case 1: case 3: case 5: case 7: case 8: case 10: case 12:
if(day > 31)
return false;
return true;
case 2:
if (year % 4 == 0)
if(day > 29){
return false;
}
else{
return true;
}
if(day > 28){
return false;
}
return true;
case 4: case 6: case 9: case 11:
if(day > 30){
return false;
}
return true;
default:
return false;
}
}
console.log(isDate(30, 5, 2017));
console.log(isDate(29, 2, 2016));
console.log(isDate(29, 2, 2015));
It's unfortunate that it seems JavaScript has no simple way to validate a date string to these days. This is the simplest way I can think of to parse dates in the format "m/d/yyyy" in modern browsers (that's why it doesn't specify the radix to parseInt, since it should be 10 since ES5):
const dateValidationRegex = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
function isValidDate(strDate) {
if (!dateValidationRegex.test(strDate)) return false;
const [m, d, y] = strDate.split('/').map(n => parseInt(n));
return m === new Date(y, m - 1, d).getMonth() + 1;
}
['10/30/2000abc', '10/30/2000', '1/1/1900', '02/30/2000', '1/1/1/4'].forEach(d => {
console.log(d, isValidDate(d));
});
Hi Please find the answer below.this is done by validating the date newly created
var year=2019;
var month=2;
var date=31;
var d = new Date(year, month - 1, date);
if (d.getFullYear() != year
|| d.getMonth() != (month - 1)
|| d.getDate() != date) {
alert("invalid date");
return false;
}
function isValidDate(year, month, day) {
var d = new Date(year, month - 1, day, 0, 0, 0, 0);
return (!isNaN(d) && (d.getDate() == day && d.getMonth() + 1 == month && d.getYear() == year));
}

Javascript Age count from Date of Birth

I'm passing my calendar selected date of birth to following JS function for calculating Age:
var DOBmdy = date.split("-");
Bdate = new Date(DOBmdy[2],DOBmdy[0]-1,DOBmdy[1]);
BDateArr = (''+Bdate).split(' ');
//document.getElementById('DOW').value = BDateArr[0];
Cdate = new Date;
CDateArr = (''+Cdate).split(" ");
Age = CDateArr[3] - BDateArr[3];
Now, lets say, input age is: 2nd Aug 1983 and age count comes: 28, while as August month has not been passed yet, i want to show the current age of 27 and not 28
Any idea, how can i write that logic, to count age 27 perfectly with my JS function.
Thanks !
Let birth date be august 2nd 1983, then the difference in milliseconds between now an that date is:
var diff = new Date - new Date('1983-08-02');
The difference in days is (1 second = 1000 ms, 1 hour = 60*60 seconds, 1 day = 24 * 1 hour)
var diffdays = diff / 1000 / (60 * 60 * 24);
The difference in years (so, the age) becomes (.25 to account for leapyears):
var age = Math.floor(diffdays / 365.25);
Now try it with
diff = new Date('2011-08-01') - new Date('1983-08-02'); //=> 27
diff = new Date('2011-08-02') - new Date('1983-08-02'); //=> 28
diff = new Date('2012-08-02') - new Date('1983-08-02'); //=> 29
So, your javascript could be rewritten as:
var Bdate = new Date(date.split("-").reverse().join('-')),
age = Math.floor( ( (Cdate - Bdate) / 1000 / (60 * 60 * 24) ) / 365.25 );
[edit] Didn't pay enough attention. date.split('-') gives the array [dd,mm,yyyy], so reversing it results in[yyyy,mm,dd]. Now joining that again using '-', the result is the string 'yyyy-mm-dd', which is valid input for a new Date.
(new Date() - new Date('08-02-1983')) / 1000 / 60 / 60 / 24 / 365.25
That will get you the difference in years, you will occasionally run into off-by-one-day issues using this.
May be this works:
var today = new Date();
var d = document.getElementById("dob").value;
if (!/\d{4}\-\d{2}\-\d{2}/.test(d)) { // check valid format
return false;
}
d = d.split("-");
var byr = parseInt(d[0]);
var nowyear = today.getFullYear();
if (byr >= nowyear || byr < 1900) { // check valid year
return false;
}
var bmth = parseInt(d[1],10)-1;
if (bmth<0 || bmth>11) { // check valid month 0-11
return false;
}
var bdy = parseInt(d[2],10);
if (bdy<1 || bdy>31) { // check valid date according to month
return false;
}
var age = nowyear - byr;
var nowmonth = today.getMonth();
var nowday = today.getDate();
if (bmth > nowmonth) {age = age - 1} // next birthday not yet reached
else if (bmth == nowmonth && nowday < bdy) {age = age - 1}
alert('You are ' + age + ' years old');
I just had to write a function to do this and thought'd I'd share.
This is accurate from a human point of view! None of that crazy 365.2425 stuff.
var ageCheck = function(yy, mm, dd) {
// validate input
yy = parseInt(yy,10);
mm = parseInt(mm,10);
dd = parseInt(dd,10);
if(isNaN(dd) || isNaN(mm) || isNaN(yy)) { return 0; }
if((dd < 1 || dd > 31) || (mm < 1 || mm > 12)) { return 0; }
// change human inputted month to javascript equivalent
mm = mm - 1;
// get today's date
var today = new Date();
var t_dd = today.getDate();
var t_mm = today.getMonth();
var t_yy = today.getFullYear();
// We are using last two digits, so make a guess of the century
if(yy == 0) { yy = "00"; }
else if(yy < 9) { yy = "0"+yy; }
yy = (today.getFullYear() < "20"+yy ? "19"+yy : "20"+yy);
// Work out the age!
var age = t_yy - yy - 1; // Starting point
if( mm < t_mm ) { age++;} // If it's past their birth month
if( mm == t_mm && dd <= t_dd) { age++; } // If it's past their birth day
return age;
}

Categories