We Keep Coding

HTML - How do I add days to an input date using javascript?

I'm trying to make an alert to user when choose a date. For example, when user choose 2018-09-13, then the alert will show message "7 days later will be 2018-09-20". But instead, the alert message shows 2018-09-137.
<input type="date" name = "date" id = "date" onchange="javascript:var chooseDate=(this.value)+7; alert('7 days later will be '+chooseDate);" >
How should I add days into the date ?? please help, thank you.

this.value will return the date as string using the format YYYY-MM-DD, so if you "add" 7, it will be YYYY-MM-DD7. What you could do is create a new Date object, and then add the days you want, like this:
var chooseDate=new Date(this.value);
chooseDate.setDate(chooseDate.getDate()+7);
alert('7 days later will be '+chooseDate);
This will give you the complete date, though, which is something you probably don't want, so you would have to get the values you actually need, like this:
var chooseDate=new Date(this.value);
chooseDate.setDate(chooseDate.getUTCDate()+7);
var futureDate = chooseDate.getFullYear()+'-'+('0'+(chooseDate.getMonth()+1)).slice(-2)+'-'+('0'+(chooseDate.getDate())).slice(-2);
alert('7 days later will be '+chooseDate);
Here you have a working example:
<input type="date" name = "date" id = "date" onchange="var chooseDate=new Date(this.value);chooseDate.setDate(chooseDate.getUTCDate()+7);var futureDate=chooseDate.getFullYear()+'-'+('0'+(chooseDate.getMonth()+1)).slice(-2)+'-'+('0'+(chooseDate.getDate())).slice(-2);alert('7 days later will be '+futureDate);" >

How about this in :
addDays = function(input_date, days) {
var date = new Date(input_date);
date.setDate(date.getDate() + days);
return date;
}
You then call do addDays(this.value, 7) in onchange().
And, please reference on getDate() and setDate().

You are working with string instead of a date object:
function lPad(val) {
return ((10 > val ? '0' : '') + val);
}
function add(input, unit, value) {
var cur = input.value;
var byValue = Number(value);
if (!/^\d{4}\-\d{2}\-\d{2}$/.test(cur) || !/day|month|year/.test(unit) || isNaN(byValue)) {
console.warn('invalid parameters!');
return false;
}
var dt = new Date(cur.replace(/\-/g, '/'));
if (!dt || isNaN(dt)) {
console.warn('invalid date!');
return false;
}
if ('day' === unit) {
dt.setDate(dt.getDate() + byValue);
} else if ('month' === unit) {
dt.setMonth(dt.getMonth() + byValue);
} else {
dt.setFullYear(dt.getFullYear() + byValue);
}
input.value = [dt.getFullYear(), lPad(1 + dt.getMonth()), lPad(dt.getDate())].join('-');
console.log(cur, value, unit, '=', input.value);
return true;
}
<input type="date" onchange="add(this,'day','+7');" title="+7 days" />
<input type="date" onchange="add(this,'month','-1');" title="-1 month" />
<input type="date" onchange="add(this,'year','+2');" title="+2 year" />

try this one ...
<input type="date" name = "date" id = "date" onchange="ggrr(this)" >
<script>
function ggrr(input){
var dateString = input.value;
var myDate = new Date(dateString);
var d = new Date(Date.parse(myDate));
var y = d.getFullYear();
var da = d.getDate() + 7;
var m = d.getMonth();
console.log(y+':'+m+':'+da);
}
</script>

How do I reference the index of an array without knowing what it is in Javascript?

I'm making a calendar app where I'm trying to validate if the date entered is during the current semester, and then see if it is a holiday that we don't have class. I have an index of all of the dates that we are out with the names of the respective holidays, but when I tried to use indexOf, the code broke.
this is the html:
<form onsubmit="holiday()" method="post">
<fieldset>
Enter Date: <input type='date' id="dat"><p>
<input class="ubmit" type=submit >
</fieldset>
</form>
<p id="output"></p>
this is the js:
var dvalue = document.getElementById("dat").value;
function holiday(){
var txt ="boo";
dvalue=Date.parse(dvalue);
console.log(dvalue);
if (dvalue<1473033600000 || dvalue>1494979200000 || dvalue=="NaN"){
txt="This is not a valid date for this calendar app";
}
else function validate(dvalue){
var holidayz=new Array();
holidayz[0]=["Columbus Day",1473033600000];
holidayz[1]=["Fall Recess",1476057600000];
holidayz[2]=["Thanksgiving Recess",1479859200000];
holidayz[3]=["Thanksgiving Recess",1479945600000];
holidayz[4]=["Thanksgiving Recess",1480032000000];
holidayz[5]=["Thanksgiving Recess",1480118400000];
holidayz[6]=["President's Day",1487548800000];
holidayz[7]=["Spring Recess",1489363200000];
holidayz[8]=["Spring Recess",1489449600000];
holidayz[9]=["Spring Recess",1458000000000];
holidayz[10]=["Spring Recess",1489622400000];
holidayz[11]=["Spring Recess",1489708800000];
holidayz[12]=["Reading Day",1494288000000];
holidayz[13]=["Memorial Day",1496016000000];
holidayz[14]=["Independence Day",1499126400000];
if (holidayz.includes(dvalue)){
var mydate = new Date(dvalue);
console.log("<p>" + mydate + "<p>");
var day = mydate.getUTCDate();
var month = mydate.getMonth()+1;
var year = mydate.getFullYear();
console.log (month + "/" + day +"/" + year);
var holival= asList(holidayz).indexOf(dvalue);
console.log(holival)
}
}
console.log(txt)
document.getElementById("output").innerHTML = txt;
}

Try this,
var dvalue = document.getElementById("dat").value;
function holiday(){
var txt ="boo";
dvalue=Date.parse(dvalue);
console.log(dvalue);
if (dvalue<1473033600000 || dvalue>1494979200000 || dvalue=="NaN"){
txt="This is not a valid date for this calendar app";
} else {
var holidayz=new Array();
holidayz[0]=["Columbus Day",1473033600000];
holidayz[1]=["Fall Recess",1476057600000];
holidayz[2]=["Thanksgiving Recess",1479859200000];
holidayz[3]=["Thanksgiving Recess",1479945600000];
holidayz[4]=["Thanksgiving Recess",1480032000000];
holidayz[5]=["Thanksgiving Recess",1480118400000];
holidayz[6]=["President's Day",1487548800000];
holidayz[7]=["Spring Recess",1489363200000];
holidayz[8]=["Spring Recess",1489449600000];
holidayz[9]=["Spring Recess",1458000000000];
holidayz[10]=["Spring Recess",1489622400000];
holidayz[11]=["Spring Recess",1489708800000];
holidayz[12]=["Reading Day",1494288000000];
holidayz[13]=["Memorial Day",1496016000000];
holidayz[14]=["Independence Day",1499126400000];
holidayz[15]=["Test Day",1476921600000];
for(var i=0; i<holidayz.length; i++){
if ((holidayz[i][1])==dvalue){
var mydate = new Date(dvalue);
console.log("<p>" + mydate + "<p>");
var day = mydate.getUTCDate();
var month = mydate.getMonth()+1;
var year = mydate.getFullYear();
console.log (month + "/" + day +"/" + year);
var holival= i; //asList(holidayz).indexOf(dvalue);
console.log(holival);
break;
}
}
}
console.log(txt);
}

Getting Current age by user input javascript

I want my user when they click on “view age” button to calculate there age from there input, but i couldn't figure it out. I got the user to view there birth year when they click on the but.
Here is my HTML Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form id="birth">
<h2>What month were you born?</h2><input name="birthMonth" type="text" size="20">
<h2>What day was you born?</h2><input name="birthday" type="text" size="20">
<h2>Your birth year?</h2> <input name="birthYear" type="text" size="20">
</form>
<button onclick="outputbirth()">Submit</button>
<button onclick="submitBday()">View Age</button>
<p id="output"></p>
<p id="age"></p>
<script type="text/javascript" src="scripts/scripts.js"></script>
</body>
</html>
JavaScript Code, function submitBday is the button on the html document:
function outputbirth() {
// Getting the form id "birth"
var x = document.getElementById("birth");
var text = "";
// Getting the users input values of Month, Day, Year.
for (i = 0; i < x.length; i++) {
text += x.elements[i].value + " ";
}
// This is going to print out the result on output id in the html document
document.getElementById("output").innerHTML = text;
}
function submitBday() {
}

You already concatenated a string from the input fields. So what you want to do to calculate the age is to construct a date object from the input fields. Just collect the input fields like you did before in a loop, but do not separate the values by an empty space but use a comma.
var bDay += x.elements[i].value + ",";
Then pass the bDay to a new date object.
var start = new Date(bDay);
Now subtract the just created date from now.
var elapsed = Date.now() - start;
This will give you the age in milliseconds. To calculate the years from milliseconds you could do this.
var age = Math.floor(((((elapsed / 1000) / 60) / 60) /24) / 365);
This will give you the age in years. If you want to find out more about the JS date object check out the moz dev network page on Date.
I left a snipped for you. Have fun.
function submitBday() {
var now = Date.now(),
x = document.getElementById("birth"),
bDay = "",
start,
elapsed,
age;
for (i = 0; i < x.length; i++) {
bDay += x.elements[i].value + ",";
}
start = new Date(bDay);
elapsed = now - start;
age = Math.floor(((((elapsed / 1000) / 60) / 60) /24) / 365);
document.getElementById("age").innerHTML = "You are " + age + " years young.";
}
<form id="birth">
<h2>What month were you born?</h2><input name="birthMonth" type="text" size="20">
<h2>What day was you born?</h2><input name="birthday" type="text" size="20">
<h2>Your birth year?</h2> <input name="birthYear" type="text" size="20">
</form>
<button onclick="submitBday()">View Age</button>
<p id="age"></p>

Validate a condition in HTML form using javascript

I want to create an HTML page with small form.
It Contain
Name
Gender
Date of Birth
I Agree checkbox
Submit button
There should be a condition.
If the age is between 20 & 25 [Calculated based on DOB] the "I Agree" Checkbox should be activated or else it should be deactivated.
Deactivation means, I agree box should not accept any check input.
function myAgeValidation() {
var lre = /^\s*/;
var datemsg = "";
var inputDate = document.as400samplecode.myDate.value;
inputDate = inputDate.replace(lre, "");
document.as400samplecode.myDate.value = inputDate;
datemsg = isValidDate(inputDate);
if (datemsg != "") {
alert(datemsg);
return;
}
else {
//Now find the Age based on the Birth Date
getAge(new Date(inputDate));
}
}
function getAge(birth) {
var today = new Date();
var nowyear = today.getFullYear();
var nowmonth = today.getMonth();
var nowday = today.getDate();
var birthyear = birth.getFullYear();
var birthmonth = birth.getMonth();
var birthday = birth.getDate();
var age = nowyear - birthyear;
var age_month = nowmonth - birthmonth;
var age_day = nowday - birthday;
if(age_month < 0 || (age_month == 0 && age_day <0)) {
age = parseInt(age) -1;
}
//alert(age);
if ((age <= 25 ) && ( age >= 20)) {
document.as400samplecode.agree.disabled=false;
}
else {
alert("age limit is 20 - 25");
}
}
function isValidDate(dateStr) {
var msg = "";
var datePat = /^(\d{1,2})(\/|-)(\d{1,2})\2(\d{4})$/;
var matchArray = dateStr.match(datePat); // is the format ok?
if (matchArray == null) {
msg = "Date is not in a valid format.";
return msg;
}
month = matchArray[1]; // parse date into variables
day = matchArray[3];
year = matchArray[4];
if (month < 1 || month > 12) { // check month range
msg = "Month must be between 1 and 12.";
return msg;
}
if (day < 1 || day > 31) {
msg = "Day must be between 1 and 31.";
return msg;
}
if ((month==4 || month==6 || month==9 || month==11) && day==31) {
msg = "Month "+month+" doesn't have 31 days!";
return msg;
}
if (month == 2) { // check for february 29th
var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
if (day>29 || (day==29 && !isleap)) {
msg = "February " + year + " doesn't have " + day + " days!";
return msg;
}
}
if (day.charAt(0) == '0') day= day.charAt(1);
//Incase you need the value in CCYYMMDD format in your server program
//msg = (parseInt(year,10) * 10000) + (parseInt(month,10) * 100) + parseInt(day,10);
return msg; // date is valid
}
<html>
<head>
</head>
<body>
<form name="as400samplecode">
Name: <input type="text" name="namee" required><br>
<br>
gender: <input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
<br>
<input type="text" name="myDate" size=10 maxlength=10> (in MM/DD/YYYY format)<br>
<br>
<br>
<br>
<input type = "checkbox" name="agree" disabled >I, Agree<br>
<br>
<br>
<input type="button" value="Submit" onclick="Javascript:myAgeValidation()" >
</form>
</body>
</html>

One solution would be to add an "oninput" event to the myDate input element that executes the myAgeValidation function each time the input element's value is changed.
<input type="text" name="myDate" size=10 maxlength=10 oninput="myAgeValidation()">(in MM/DD/YYYY format)
If the element's value it is a valid date, the next step is to check the age range. If the value is within the 20 - 25 range, you can enable the checkbox. Just make sure you set your checkbox back to disabled in case someone enters an acceptable 20-25 age, and then changes it back to something else.
See example solution here:
https://jsfiddle.net/z6hnu7qn/
Optional: I added green, pink, and red css borders to the input field depending on the dates acceptability.
I would also recommend looking at other ways to validate your date string. Just returning an empty string if it's valid and checking if datemsg is an empty string to proceed could lead to problems down the line.
Here is a question addressing date validation in javascript:
How to validate date with format "mm/dd/yyyy" in JavaScript?
There are also a number of popular libraries, like angularjs, that do date validation.

Javascript Date Validation ( DD/MM/YYYY) & Age Checking

I've started to work on Javascript recently. What I am testing is checking the DoB in valid format. Next step will be checking the age.
What my HTML code includes is below
<form name="ProcessInfo" action="#" method="POST" enctype="multipart/form-data" target="_self" onsubmit="return checkForm();">
.
.
.
.
<br>
<label for="txtDOB">Date of Birth:* </label>
<input id="txtDOB" type="text" name="txtDOB" size="12">
format: ##/##/####
<br>
.
.
.
</form>
.
.
and I did the following in my .js file
var errMessage = "";
function checkForm() {
validateName();
validateSurname();
carSelect();
validateDOB();
if (errMessage == "") {
} else {
alert(errMessage);
}
}
...
function validateDOB()
{
var dob = document.forms["ProcessInfo"]["txtDOB"].value;
var pattern = /^([0-9]{2})-([0-9]{2})-([0-9]{4})$/;
if (dob == null || dob == "" || !pattern.test(dob)) {
errMessage += "Invalid date of birth\n";
return false;
}
else {
return true
}
}
I tried to check if its valid with regular expression but I always get an alert even if I type the date correctly. And how can I seperate the DD / MM / YYYY to calculate the age?

If you want to use forward slashes in the format, the you need to escape with back slashes in the regex:
var pattern =/^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/;
http://jsfiddle.net/P9TER/

I suggest using moment.js which provides an easy to use method for doing this.
interactive demo
function validate(date){
var eighteenYearsAgo = moment().subtract(18, "years");
var birthday = moment(date);
if (!birthday.isValid()) {
return "invalid date";
}
else if (eighteenYearsAgo.isAfter(birthday)) {
return "okay, you're good";
}
else {
return "sorry, no";
}
}
To include moment in your page, you can use CDNJS:
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/moment.min.js"></script>

I'd utilize the built in Date object to do the validation for me. Even after you switch from - to / you still need to check whether the month is between 0 and 12, the date is between 0 and 31 and the year between 1900 and 2013 for example.
function validateDOB(){
var dob = document.forms["ProcessInfo"]["txtDOB"].value;
var data = dob.split("/");
// using ISO 8601 Date String
if (isNaN(Date.parse(data[2] + "-" + data[1] + "-" + data[0]))) {
return false;
}
return true;
}
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Example:_Using_parse for more information.

If you want to use forward slashes in the format, the you need to escape with back slashes in the regex:
var dateformat = /^(0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])[\/\-]\d{4}$/;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
function dateCheck() {
debugger;
var inputValues = document.getElementById('dateInput').value + ' ' + document.getElementById('monthInput').value + ' ' + document.getElementById('yearInput').value;
var d = new Date();
var n = d.getHours();
var m = d.getMinutes();
var p = d.getSeconds();
var date = document.getElementById("dateInput").value;
var month = document.getElementById("monthInput").value;
var year = document.getElementById("yearInput").value;
var dateCheck = /^(0?[1-9]|[12][0-9]|3[01])$/;
var monthCheck = /^(0[1-9]|1[0-2])$/;
var yearCheck = /^\d{4}$/;
if (month.match(monthCheck) && date.match(dateCheck) && year.match(yearCheck)) {
var ListofDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if (month == 1 || month > 2) {
if (date > ListofDays[month - 1]) {
alert('Invalid date format!');
return false;
}
}
if (month == 2) {
var leapYear = false;
if ((!(year % 4) && year % 100) || !(year % 400)) {
leapYear = true;
}
if ((leapYear == false) && (date >= 29)) {
alert('Invalid date format!');
return false;
}
if ((leapYear == true) && (date > 29)) {
alert('Invalid date format!');
return false;
}
}
var flag = 1
}
else {
alert("invalid date");
}
if (flag == 1) {
alert("the date is:" + inputValues + " " + "The time is:" + n + ":" + m + ":" + p);
}
clear();
}
function clear() {
document.myForm.dateInput.value = "";
document.myForm.monthInput.value = "";
document.myForm.yearInput.value = "";
}
</script>
</head>
<body>
<div>
<form name="myForm" action="#">
<table>
<tr>
<td>Enter Date</td>
<td><input type='text' name='dateInput' id="dateInput" placeholder="Date" maxlength="2" onclick="dateCheck(document.myForm.dateInput)" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));"/></td>
<td><span id="span1"></span></td>
</tr>
<tr>
<td>Enter Month</td>
<td><input type='text' name='monthInput' id="monthInput" placeholder="Month" maxlength="2" onclick="dateCheck(document.myForm.dateInput)" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));"/></td>
<td><span id="span2"></span></td>
</tr>
<tr>
<td>Enter Year</td>
<td><input type='text' name='yearInput' id="yearInput" placeholder="Year" minlength="4" maxlength="4" onclick="dateCheck()" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));"/></td>
<td><span id="span3"></span></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" value="Submit" onclick="dateCheck()"/></td>
</tr>
</table>
</form>
</div>
</body>
</html>
<td>

Using pattern and check validate:
var input = '33/15/2000';
var pattern = /^((0[1-9]|[12][0-9]|3[01])(\/)(0[13578]|1[02]))|((0[1-9]|[12][0-9])(\/)(02))|((0[1-9]|[12][0-9]|3[0])(\/)(0[469]|11))(\/)\d{4}$/;
alert(pattern.test(input));

You have used regular expression for this format :
DD - MM- YYYY
If you need this format DD/MM/YYYY use
var pattern =/^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/;

It is two problems - is the slashes the right places and is it a valid date.
I would suggest you catch input changes and put the slashes in yourself. (annoying for the user)
The interesting problem is whether they put in a valid date and I would suggest exploiting how flexible js is:
function isValidDate(str) {
var newdate = new Date();
var yyyy = 2000 + Number(str.substr(4, 2));
var mm = Number(str.substr(2, 2)) - 1;
var dd = Number(str.substr(0, 2));
newdate.setFullYear(yyyy);
newdate.setMonth(mm);
newdate.setDate(dd);
return dd == newdate.getDate() && mm == newdate.getMonth() && yyyy == newdate.getFullYear();
}
console.log(isValidDate('jk'));//false
console.log(isValidDate('290215'));//false
console.log(isValidDate('290216'));//true
console.log(isValidDate('292216'));//false

To get the values use pattern.exec() instead of pattern.test() (the .test() returns a boolean value).

if(!/^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{2}$/.test($(this).val())){
alert('Date format incorrect (DD/MM/YY)');
$(this).datepicker('setDate', "");
return false;
}
This code will validate date format DD/MM/YY

with leading zero for day and month
var pattern =/^(0[1-9]|1[0-9]|2[0-9]|3[0-1])\/(0[1-9]|1[0-2])\/([0-9]{4})$/;
and with both leading zero/without leading zero for day and month
var pattern =/^(0?[1-9]|1[0-9]|2[0-9]|3[0-1])\/(0?[1-9]|1[0-2])\/([0-9]{4})$/;

I use the code I found #.w3resources
The code takes care of
month being less than 12,
days being less than 32
even works with leap years.
While Using in my project for leap year I modify the code like
if ((lyear==false) && (dd>=29))
{
alert('Invalid date format!');
return false;
}
if ((lyear==false) && (dd>=29))
{
alert('not a Leap year February cannot have more than 28days');
return false;
}
Rather than throwing the generic "Invalid date format" error which does not make much sense to the user.
I modify the rest of the code to provide valid error message like month cannot be more than 12, days cannot be more than 31 etc.,
The problem with using Regular expression is it is difficult to identify exactly what went wrong. It either gives a True or a false-Without any reason why it failed. We have to write multiple regular expressions to sort this problem.

var date=/^[0-9]{1,2}\-[0-9]{1,2}\-[0-9]{1,4}$/;
if(!date.test(form.date.value))
alert("Enter correct date");
else
alert(" working");

You can use attributes of html tag instead of validation from html input type ="date" can be used instead of validating it. That's the benifits html 5 gives you

If you're using moment then that's the single line code:
moment(date).format("DD/MM/YYYY").isValid()

When we put only pattern it's not simple to check every possible date combination. Users can enter valid numbers like 99/99/9999 but it's not a valid date. Even If we limit days and months to a more restrictive value (30/31 days and 0-12 months) we still may get a case where we have leap year, febraury etc. and we cannot properly validate them using regex. So the better approach is to use a date object itself.
let InputDate = "99/99/9999"
let pattern =/^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/;
let editDate = InputDate.replace("\/","-")
let dateValidation = function validation(){
if(pattern.test(InputDate) && new Date(editDate) == 'Invalid Date'){
return false;
}else{
return true;
}
}
console.log(dateValidation()) //Return false