Develop Reference

Subtract 1 day from date input box and submit using button

I'm trying to collect 2 dates using input boxes ids From and To. I would like to subtract 1 day from the date value received using "FROM" text box and pass that new value to the button click event.
The code below works to push values received from the input box. However, i wish to subtract 1 day and pass on the same.
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
From : <input type="date" class="form-control" id="From" placeholder="From" aria-label="From">
To : <input type="date" class="form-control" id="To" placeholder="To" aria-label="To">
<input type="button" onclick="location.href='#SITE#/TDL-Test-code.aspx?FromTo=(Date ge datetime%27'+FD+'T00:00:00.000Z%27) and (Date le datetime%27'+ document.getElementById('To').value+'T23:59:00.000Z%27)';" value="Submit" />
Edit:
Following is my moment JS function
var oldfrom = document.getElementById('From').value;
newdate = moment(oldfrom).subtract(1, 'days').format("YYYY-MM-DD");
var FD = newdate;

Issue was fixed with solution below.
document.getElementById("From_Local").oninput = function() {
var dateLocal = document.getElementById("From_Local").value;
var dateUTC = moment.utc(dateLocal).subtract(4, 'hours').format("YYYY-MM-DD");
document.getElementById("From_UTC").value = dateUTC;
}
From:<input name="From" required type="date" id="From_Local">
<input type="hidden" id="From_UTC">
To:<input name="To" required type="date" id="To">
<input type="button" onclick="location.href='SITE_URL?FromTo=(Date%20ge%20datetime%27'+ document.getElementById('From_UTC').value+'T00:00:00.000Z%27)%20and%20(Date%20le%20datetime%27'+ document.getElementById('To').value+'T00:00:00.000Z%27)';" value="Submit" />

Get NaN as result in my age field after I select the date in datepicker

I am trying to calculate the age field but I keep getting NaN as the answer.
I had try to correct my code but I am still unable to detect the error. Can someone help me to point out the error? Appreciate the help very much.
function getAge() {
var dob = document.getElementById('DOB').value;
dob = new Date(dob);
var today = new Date();
var age = Math.floor((today - dob) / (365.25 * 24 * 60 * 60 * 1000));
document.getElementById('Age').value = age;
}
<div class='input-group date' id='DOB' style="width:195px">
<input type='text' class="form-control" name="DOB" id="DOB" placeholder="mm/dd/yyyy" onblur="getAge()" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<input type="text" class="form-control" style="width:64px" id="Age" name="Age" value="" placeholder="eg. 21" maxlength="2" />

You have assigned the id DOB to the outer div as well as input field.
Change the id of outer div to something else and it should work.

You have two elements with the same id="DOB". document.getElementById('DOB') will return the div. As such, dob is undefined, and the calculation gives NaN.

Alarm in javascript/Jquery to update database

I'm trying to create an Alarm where I have to detect when a product starts and when ends.
It is possible to have a general alarm? I mean I won't be always on the same webpage... I mean I'd like to start the alarm on localhost:8080/createProduct, and if I'm in localhost:8080/products if the alarm fires get notified.
What I have to do is an Update to my db.
On my createProduct I have the startDate and endDate, I've found a method on this webpage where I found this method :
function getTimeRemaining(endtime){
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60 );
var hours = Math.floor( (t/(1000*60*60)) % 24 );
var days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
So I can know the hours left and I can put it on this function from javascriptKit, instead of going to an URL I will have to update on my db.
Do you guys know any way to update the state of the product to the DB depends if it's ability or not?
I mean able is that startDate is equals than the current date (It will be on a form where you can choose the startDate), and if the endDate is the same than the current date the product would be disabled.
Hope I have explained correctly.
By the way, my form is like this :
<form method="POST" id="formdata" action="/createProduct" enctype="multipart/form-data">
<table>
<tr>
<td><label >Name</label>:</td>
<td><input type="text" name="name" id="name" required="required"/></td>
</tr>
<tr>
<td><label >Start Date</label>:</td>
<td><input type="text" name="startDate" id="startDate" required="required" autocomplete="false"/></td>
<td><input type="text" id="localTime" name="localTime" value="" hidden="hidden"/></td>
</tr>
<tr>
<td><label >EndDate</label>:</td>
<td><input type="text" name="endDate" id="endDate" required="required" autocomplete="false"/></td>
</tr>
</table>
<input type="submit" id="sendButton" value="Create product" />
</form>

extract year from date and calculate datedifference

I am relative new in coding and recently i have to do some date manipulations with data entered in a form. I searched a lot and I haven't found the solution that works for me.
Here is the issue:
The user enters following data in datetime-local fields in HTML:
1) Year of entering College (date 1)
2) Year of graduation (date 2)
3) Birthday (date 3)
I need a JQuery or a JavaScript script that uses this dates and output following:
1) Year of admitting, based on the admittion date (I know there is a getFullYear function, but I couldn't use it right...) >>> result1
2) Age at graduation (date difference between Birthdate and date of Graduation. >>> result2
I tried with adding datepicker but somehow I got really awful looking calendar which was displayed over the boxes. I couldn't install datetimepicker...
Thank you in advance. Your help is appreciated.
Here is my HTML code.
<input id="date1" type="datetime-local"/>
<label for="date1">admittion in Colleage</label>
<br />
<input id="result1" type="text" readonly="true" name="year" placeholder="=(getFullYear from date1)"/>
<label for="result1">year</label>
<br />
<input id="date2" type="datetime-local" />
<label for="date2">graduation</label>
<br />
<input id="date3" type="date" name="born" />
<label for="date3">born</label>
<br />
<input id="result2" type=“text” name="age" readonly="true" placeholder="=DATEDIF(Date3, Date2, Year)"/></textarea>
<label for="result2">age</label>
<br />

You didn't include the js code which is more important for this question. I'll include a couple functions that should help.
To find a year from a date, I use the following function
function getYearFromDate(date){
const yearFromDate = new Date();
yearFromDate.setTime(date.getTime());
yearFromDate.setFullYear(date.getFullYear() + 1);
return yearFromDate;
}
console.log(getYearFromDate(new Date()));
And the graduation age copied mostly from Calculate age given the birth date in the format YYYYMMDD
function getYearsBetween(oldDate, newDate) {
var age = newDate.getFullYear() - oldDate.getFullYear();
var m = newDate.getMonth() - oldDate.getMonth();
if (m < 0 || (m === 0 && newDate.getDate() < oldDate.getDate())) {
age--;
}
return age;
}
Including moment.js is also an option, but it's a large library I like to avoid if I can.
EDIT I thought you wanted year + 1 day. Getting the full year from the date is even easier.
const date = new Date();
console.log(date.getFullYear());
Edit: All together now
function updateGradYear(event) {
console.log(event.target.value);
let date = new Date(event.target.value);
document.querySelector('#result1').value = date.getFullYear();
}
function updateAge() {
let gradDate = new Date(document.querySelector('#date2').value);
console.log(document.querySelector('#date3').value);
let birthdate = new Date(document.querySelector('#date3').value);
document.querySelector('#result2').value = gradDate.getFullYear() - birthdate.getFullYear();
}
// set some default values
let today = new Date();
document.querySelector('#date1').value = today.toISOString().split('.')[0];
document.querySelector('#result1').value = today.getFullYear();
document.querySelector('#date2').value = today.toISOString().split('.')[0];
let birthdate = new Date(today.getTime);
birthdate.setFullYear(1984);
console.log(birthdate.toISOString().slice(0, 10).replace(/\//g, "-"));
document.querySelector('#date3').value = birthdate.toISOString().slice(0, 10).replace(/\//g, "-");
updateAge();
<input id="date1" type="datetime-local" onchange="updateGradYear(event)" />
<label for="date1">admittion in Colleage</label>
<br />
<input id="result1" type="number" readonly="true" name="year" placeholder="=(getFullYear from date1)" />
<label for="result1">year</label>
<br />
<input id="date2" type="datetime-local" onchange="updateAge()" />
<label for="date2">graduation</label>
<br />
<input id="date3" type="date" name="born" onchange="updateAge()" />
<label for="date3">born</label>
<br />
<input id="result2" type=“text” name="age" readonly="true" placeholder="=DATEDIF(Date3, Date2, Year)" /></textarea>
<label for="result2">age</label>
<br />

Let me know how this works for you! And as i said please enter all the fields while running this code!
$('#date1, #date2').on('blur',function(){
var dc = document.querySelector('input[id="date1"]');
var date = new Date(dc.value);
var collegeadmission = date.getFullYear();
$('#result1').val(date.getFullYear());
dc = document.querySelector('input[id="date2"]');
date = new Date(dc.value);
var collegegrad = date.getFullYear();
if(! isNaN(collegegrad))
$('#result2').val(collegegrad - collegeadmission);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="date1" type="datetime-local"/>
<label for="date1">admittion in Colleage</label>
<br />
<input id="result1" type="text" readonly="true" name="year" placeholder="=(getFullYear from date1)"/>
<label for="result1">year</label>
<br />
<input id="date2" type="datetime-local" />
<label for="date2">graduation</label>
<br />
<input id="date3" type="date" name="born" />
<label for="date3">born</label>
<br />
<input id="result2" type=“text” name="age" readonly="true" placeholder="=DATEDIF(Date3, Date2, Year)"/></textarea>
<label for="result2">age</label>
<br />

check out this url:http://jsbin.com/vebiwogipu/edit?html,js,output
Make sure u fill all the dates and time properly as you discussed in your html.
Similarly you can attach the output on click or change event.
and aso you can leverage getMonth() and getDay() in the code to get desired output.

Take a look at the label and may be alert, when you click the button, it shows year out of your first date field. As i said you need to add the logic for rest.
let me know if it makes sense, if not please add more information to make me understand!

How to set HTML5 Form min restriction for datepicker to "Check-In Date (user input)"

What do I need to add for the min restriction to make sure the user-input for check-out date is after the user-input for check-in date?
<form>
Enter Check-In Date:<br>
<input type="date" name="checkin"><br>
Enter Check-Out Date:<br>
<input type="date" name="checkout"><br>
</form>
Can this be done with just HTML5 or does it need to include javascript?

java script need for validation .Compare the check in date is less the check out date
function check() {
if(document.getElementById('checkin').value < document.getElementById('checkout').value)
{ console.log('ok')}
else{
console.log('Not allowed')
}
}
<form>
Enter Check-In Date:<br>
<input type="date" id="checkin" name="checkin"><br>
Enter Check-Out Date:<br>
<input type="date" id="checkout" name="checkout" onchange="check()"><br>
</form>

You can use min and max attributes of HTML5 input date
<form>
Enter Check-In Date:<br>
<input type="date" name="checkin" max="2016-11-06"><br>
Enter Check-Out Date:<br>
<input type="date" name="checkout" min="2016-11-07"><br>
</form>
Where date of max in "checkin" is smaller than date of min in "checkout".
Or try validation in javascript.

document.getElementById("2").disabled = true;
$("#1").on("change paste keyup", function() {
console.log($(this).val());
var testDate= $(this).val();
var date_regex = /^\d{4}-\d{2}-\d{2}$/;
if((date_regex.test(testDate)))
document.getElementById("2").disabled = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Enter Check-In Date:<br>
<input type="date" name="checkin" id="1"><br>
Enter Check-Out Date:<br>
<input type="date" name="checkout" id="2"><br>
</form>