<label for="start">Date of birth:</label>
<input type="date" id="start" required="required" name="trip-start" value="2021-10-02">
How do I make it where the only allowed ages are between 15 and 80 at the time of filling the form.
You will need Javascript to achieve what you want:
HTML:
<html>
<head>
<script src="./<your-external-js-file>"></script>
</head>
<body>
<form>
<label for="start">Date of birth:</label>
<input type="date" id="start" required="required" name="trip-start" value="2021-10-02" />
<input type="submit" />
</form>
</body>
</html>
Add this to your external JS file:
window.onload = function() {
var date = new Date();
var dd = date.getDate();
var mm = date.getMonth() + 1;
var yyyy = date.getFullYear();
//Add a zero if one Digit (eg: 05,09)
if (dd < 10) {
dd = "0" + dd;
}
//Add a zero if one Digit (eg: 05,09)
if (mm < 10) {
mm = "0" + mm;
}
minYear = yyyy - 80; //Calculate Minimun Age (<80)
maxYear = yyyy - 18; //Calculate Maximum Age (>18)
var min = minYear + "-" + mm + "-" + dd;
var max = maxYear + "-" + mm + "-" + dd;
document.getElementById("start").setAttribute("min", min);
document.getElementById("start").setAttribute("max", max);
};
By doing this, whenever your document will get loaded, this function will be executed, which will calculate the minimum (age<80) and maximum dates (age>18) from the current date, according to the formula applied and set the 'min' and 'max' attributes to our input field.
$("#start").change(function(){
var userboddate = $(this).val();
var useryear= userboddate.split('-')[0] ;
var currentyear ='2021';
var diff=currentyear-useryear;
if(diff>=15 && diff<=80){
alert(`correct age ${diff}`);
}
else{
alert(`wrong age ${diff}`);
$("#start").val('');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="age">
<label for="start">Date of birth:</label>
<input type="date" id="start" required="required" name="trip-start" value="2021-10-02">
<input type="submit" value="submit">
</form>
<!- i hope this code help you ->
Related
I made a date input in my HTML file to select birthday, but how do I get the selected date value using vanilla JavaScript?
I only managed to get the attribute itself and not the selected date.
My HTML file:
<div class=wrapper>
<h1 class="age-text">Your Age is:</h1>
<h1 class="age">0 years, 0 months, 0 days</h1>
<label class="enter-age-text" for="">Enter Your birthday below:</label>
<input class="birthday" type="date" name="" id="">
<button>Calculate</button>
</div>
My JS file:
let birthday = document.querySelector('.birthday');
let button = document.querySelector('button');
button.addEventListener("click", e => {
console.log(birthday);
})
The input I get after clicking the button:
Check this Code
let birthday = document.querySelector('#birthday');
let button = document.querySelector('button');
let res = document.querySelector('.age');
button.addEventListener("click", e => {
let birthDate = new Date(birthday.value);
let today = new Date();
let difference = (today - birthDate);
let totalDay = difference / (1000 * 3600 * 24);
let year = (totalDay / 365).toFixed(0);
let month = ((totalDay - year * 365) / 30).toFixed(0);
let day = ((totalDay - month * 30 - year * 365)).toFixed(0);
let str = `${year} Years, ${month} Months, ${day} Days`;
res.innerHTML = str;
});
<div class=wrapper>
<h1 class="age-text">Your Age is:</h1>
<h1 class="age">0 years, 0 months, 0 days</h1>
<label class="enter-age-text" for="">Enter Your birthday below:</label>
<input class="birthday" type="date" name="" id="birthday">
<button>Calculate</button>
</div>
Use the .value property (or the .valueAsDate property)
let birthday = document.querySelector('.birthday');
let button = document.querySelector('button');
button.addEventListener("click", e => {
console.log(birthday.value);
console.log(birthday.valueAsDate);
})
<div class=wrapper>
<h1 class="age-text">Your Age is:</h1>
<h1 class="age">0 years, 0 months, 0 days</h1>
<label class="enter-age-text" for="">Enter Your birthday below:</label>
<input class="birthday" type="date" name="" id="">
<button>Calculate</button>
</div>
try console.log(birthday.value); please
var button = document.querySelector('button');
button.addEventListener("click", e => {
//Console is true you can change it to false
var con = true;
var birthday = document.getElementById("Date").value;
if(con == true){console.log('Your Birthday: ' + birthday);}
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
today = yyyy + '-' + mm + '-' + dd;
if(con == true){console.log('Todays Date: ' + today);}
var arr = birthday.split("-");
var cyyyyc = arr[0]-yyyy;
var cyyyy = Math.abs(cyyyyc);
var cmmc = arr[1]-mm;
var cmm = Math.abs(cmmc);
var cddc = arr[2]-dd;
var cdd = Math.abs(cddc);
var cac = cyyyy + ' years, ' + cmm + ' months, ' + cdd + ' days';
if(con == true){console.log('You are: ' + cac);}
document.getElementById("Age").innerHTML = cac;
})
<div class=wrapper>
<h1 class="age-text">Your Age is:</h1>
<h1 id="Age" class="age">0 years, 0 months, 0 days</h1>
<label class="enter-age-text" for="">Enter Your birthday below:</label>
<input class="birthday" type="date" id="Date">
<button>Calculate</button>
</div>
Try This!
I have many date-type inputs (one for initial date and one for a new date for each stage) and a number-type input which should define how many days to add to all that "new date" inputs based on "old date" value of the nearest input. Now it changes all dates based on the first "old date" input value.
function calcNewDate() {
var addDays = parseInt($('#chdn').val());
$('.newDate').val(formatDate(new Date($('.oldDate').val()).setDate(new Date($('.oldDate').val()).getDate() + addDays)));
}
function formatDate(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Days to add to each newDate: <input id="chdn" type="number" onchange="calcNewDate();" onkeyup="calcNewDate();" />
<div class="stage">
<h4>Stage #1</h4>
Old date - <input class="oldDate" type="date" value="2017-06-01" disabled> New date - <input class="newDate" type="date" disabled>
</div>
<div class="stage">
<h4>Stage #2</h4>
Old date - <input class="oldDate" type="date" value="2017-08-15" disabled> New date - <input class="newDate" type="date" disabled>
</div>
<!-- here could be more stages -->
Solution:
$('.newDate').each(function(){
$(this).val(formatDate(new Date($(this).prevAll('.oldDate').val()).setDate(new Date($(this).prevAll('.oldDate').val()).getDate() + parseInt($('#chdn').val()))));
});
Thanks to #Zenoo
Since you have multiple .newDate, you'll need to loop through them and access each one's .oldDate using jQuery .each() and .prevAll() methods :
$('.newDate').each(function(){
$(this).val(formatDate(new Date().setDate(new Date($(this).prevAll('.oldDate').val()).getDate() + addDays)));
});
Demo:
function calcNewDate() {
const addDays = +$('#chdn').val();
$('.newDate').each(function(){
$(this).val(formatDate(new Date().setDate(new Date($(this).prevAll('.oldDate').val()).getDate() + addDays)));
});
}
function formatDate(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Days to add to each newDate: <input id="chdn" type="number" onchange="calcNewDate();" onkeyup="calcNewDate();" />
<div class="stage">
<h4>Stage #1</h4>
Old date - <input class="oldDate" type="date" value="2017-06-01" disabled> New date - <input class="newDate" type="date" disabled>
</div>
<div class="stage">
<h4>Stage #2</h4>
Old date - <input class="oldDate" type="date" value="2017-08-15" disabled> New date - <input class="newDate" type="date" disabled>
</div>
<!-- here could be more stages -->
Am new to jQuery and JavaScript. So please help me solve my problem.
Am able to add days with two datepicker. But what i want is take days from 3 datepickers and display it on a 4th datepicker. I would like to know the solution for this!.
My code is :)
<p>Date:
<input id="txtDate" type="text" />
</p>
<p>
<input type="button" onclick="getdate()" value="Fill Follow Date" />
</p>
<p>Date:
<input id="follow_Date" type="text" />
</p>
<p>
<input type="button" onclick="getdate()" value="Fill Follow DateOne" />
</p>
<p>Date:
<input id="follow_Date_One" type="text" />
</p>
<script>
$(document).ready(function () {
$('#txtDate').datepicker();
$('#follow_Date').datepicker();
$('#follow_Date_One').datepicker();
});
function getdate() {
var tt = document.getElementById('txtDate').value;
var date = new Date(tt);
var newdate = new Date(date);
newdate.setDate(newdate.getDate() + 30);
var dd = newdate.getDate();
var mm = newdate.getMonth() + 1;
var y = newdate.getFullYear();
var someFormattedDate = mm + '/' + dd + '/' + y;
document.getElementById('follow_Date').value = someFormattedDate;
var rr = document.getElementById('follow_Date').value;
var dateOne = new Date(rr);
var newdateOne = new Date(dateOne);
newdateOne.setDate(newdateOne.getDate() + 3);
ar dd = newdateOne.getDate();
var mm = newdateOne.getMonth() + 1;
var y = newdateOne.getFullYear();
var someFormattedDateOne = mm + '/' + dd + '/' + y;
document.getElementById('follow_Date_One').value = someFormattedDateOne;
}
</script>
</form>
What am doing here is, I take the Date from the First Datepicker and when I click on the button Fill Follow Date, 30 will be added to the current day and displayed in the second Datepicker, this i am able to do it.
Now i want to take the second Datepicker day and add 3 to it and display it on the third Datepicker, when i click the button Fill Follow DateOne. Am not able to do the second part. Please help me with your logic.
Sorry, if my logic is completely wrong:>
In your code on both button click you are calling the same function,add two separate functions for these button clicks.It will work fine.
Try this code
$(document).ready(function () {
$('#txtDate').datepicker();
$('#follow_Date').datepicker();
$('#follow_Date_One').datepicker();
$('input[id="follow_Date_btn"]').on('click',function(){
var tt = document.getElementById('txtDate').value;
if(!tt==""){
var date = new Date(tt);
var newdate = new Date(date);
newdate.setDate(newdate.getDate() + 30);
var dd = newdate.getDate();
var mm = newdate.getMonth() + 1;
var y = newdate.getFullYear();
var someFormattedDate = mm + '/' + dd + '/' + y;
document.getElementById('follow_Date').value = someFormattedDate;
} else {
alert("enter date");
}
});
$('input[id="follow_Date_One_btn"]').on('click',function(){
var rr = document.getElementById('follow_Date').value;
if(!rr==""){
var dateOne = new Date(rr);
var newdateOne = new Date(dateOne);
newdateOne.setDate(newdateOne.getDate() + 3);
var dd = newdateOne.getDate();
var mm = newdateOne.getMonth() + 1;
var y = newdateOne.getFullYear();
var someFormattedDateOne = mm + '/' + dd + '/' + y;
document.getElementById('follow_Date_One').value = someFormattedDateOne;
} else {
alert("enter date");
}
});
});
.Highlighted a {
background-color: Red !important;
background-image: none !important;
color: White !important;
}
.block{
width:calc(100%/4 - 10px);
float:left;
margin-right:10px;
}
.block>input {
float: left;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<p>Date:
<input id="txtDate" type="text" />
</p>
<p>
<input type="button" id="follow_Date_btn" value="Fill Follow Date" />
</p>
<p>Date:
<input id="follow_Date" type="text" />
</p>
<p>
<input type="button" id="follow_Date_One_btn" value="Fill Follow DateOne" />
</p>
<p>Date:
<input id="follow_Date_One" type="text" />
</p>
I have a script that populates one of the fields in my form to today's date, however it only works when the input type is set to 'text'. PHP/SQL won't accept this value as the SQL datatype is set to 'date'. If anyone could explain how I might make this script compatible with the date input type I would greatly appreciate it.
HTML:
<div class="form-group">
<label class="control-label" for="flight_date">Date</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input id="flight_date" type="date" class="form-control" maxlength="10" name="flight_date">
</div>
</div>
jQuery:
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;
var today = day + "/" + month + "/" + year;
document.getElementById('flight_date').value = today;
JSFiddle
Html <input type="date" /> supports date only in ISO format (yyyy-mm-dd) format. So you can do it like following.
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;
var today = year +"-" + month + "-" + day;
document.getElementById('flight_date').value = today;
<input id="flight_date" type="date" class="form-control" maxlength="10" name="flight_date">
To make input accept the date format, you have to insert date string in yyyy-MM-dd format.
so change:
var today = day + "/" + month + "/" + year;
to:
var today = year+'-'+month+'-'+day;
The HTMLInputElement does not always expose the property "valueAsDate" in all browsers.
The valueAsDate.polyfill.js offers the possibility to extend this property on IE and FF.
The result is:
if(!("valueAsDate" in HTMLInputElement.prototype)){
Object.defineProperty(HTMLInputElement.prototype, "valueAsDate", {
get: function(){
var d = this.value.split(/\D/);
return new Date(d[0], --d[1], d[2]);
},
set: function(d){
var day = ("0" + d.getDate()).slice(-2),
month = ("0" + (d.getMonth() + 1)).slice(-2),
datestr = d.getFullYear()+"-"+month+"-"+day;
this.value = datestr;
}
});
}
var date = new Date();
document.getElementById('flight_date').valueAsDate = date;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group">
<label class="control-label" for="flight_date">Date</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input id="flight_date" type="date" class="form-control" maxlength="10" name="flight_date">
</div>
</div>
I have a html form like this :
<form action="https://www.123.com/cgi-bin/action" method="post">
<input type="hidden" name="item_name" value="Product Name">
<input type="hidden" name="item_number" value="Product Name_2010_12_21_15_03">
<input type="hidden" name="amount" value="29.99">
</form>
How to use javascript to replace the above "Product Name_2010_12_21_15_03" with dynamically generated time string ?
<script type="text/javascript">
<!--
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
document.write("Product Name+" + year + "_" + month + "_" + day)
//-->
</script>
You can just set the value of the input:
<input id='product_date_time' type='hidden' name='item_number' value=''>
<script>
document.getElementById('product_date_time').value = new Date().toString();
</script>
The script does not have to immediately follow the input field, of course. It simply has to run at some point after the input element has been added to the DOM.
If you need more control over the format, you might want to look into the venerable Date.js library.
Based on your comment for the format "2010_12_21_15_03":
<input id='product_date_time' type='hidden' name='item_number' value=''>
<script>
function myDate () {
var d = new Date();
return d.getFullYear() + "_" + (d.getMonth() + 1) + "_" + d.getDate() + "_" + d.getHours() + "_" + d.getMinutes();
}
document.getElementById('product_date_time').value = myDate();
</script>
Ok, I got it :
<form action="https://www.123.com/cgi-bin/action" method="post" name="My_Form">
<input type="hidden" name="item_name" value="Product_Name">
<input type="hidden" name="item_number" value="Product_Name">
<input type="hidden" name="amount" value="9.99">
<script type="text/javascript">
<!--
function getCorrectedYear(year)
{
year=year-0;
if (year<70) return (2000+year);
if (year<1900) return (1900+year);
return year;
}
var today=new Date();
var minute=today.getMinutes();
if(minute<10) minute='0'+minute;
var hour=today.getHours();
if(hour<10) hour='0'+hour;
var day=today.getDate();
if(day<10) day='0'+day;
var month=today.getMonth()+1;
if(month<10) month='0'+month;
var year=getCorrectedYear(today.getYear());
var dateString=year+'_'+month+'_'+day+'_'+hour+'_'+minute;
document.My_Form.item_number.value=document.My_Form.item_name.value+'_'+dateString;
//-->
</script>
</form>