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!
Related
<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 ->
I have a concept with a slider, where each shift of the slider will change the date value.
I would like it to act as following:
If value = 1 Then Day + 1 (tomorrow)
If value = 2 Then Day + 2 (day after tomorrow)
Thanks In Advance.
<div class="slidecontainer">
<input onchange='setImage(this)' type="range" min="0" max="8" value="0" step="1" id="myRange" class="slider" />
<p class="text-slider"> <b>Value : <span id="demo"> </span> (<span id="Date"> </span>)</b></p>
</div>
<script>
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.getElementById('Date').innerHTML = day + ' ' + months + ' ' + year;
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function () {
if (value > 1) { (id = "Date", day + 1) }
else { }
output.innerHTML = this.value;
}
</script>
You'll have to get the value in the slider and then add that value to the day as you slide it. Also, you should check if the value is greater or equal to zero so that when you slide back to zero it gets back to the current date. Furthermore, you'll have to parse the value that you get from the slider input, as it's a string and in order to add it to the day you'll need it to be a number. See the snippet below:
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var yy = date.getYear();
var year = yy < 1000 ? yy + 1900 : yy;
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var date = document.getElementById("Date");
output.innerHTML = slider.value;
date.innerHTML = day + " " + month + " " + year;
slider.oninput = function(e) {
let value = parseInt(e.target.value);
if (value >= 0) {
date.innerHTML = day + value + " " + month + " " + year;
} else {}
output.innerHTML = this.value;
};
<div class="slidecontainer">
<input onchange="setImage(this)" type="range" min="0" max="8" value="0" step="1" id="myRange" class="slider" />
<p class="text-slider">
<b>Value : <span id="demo"> </span> (<span id="Date"> </span>)</b>
</p>
</div>
In a row I have a clock, which shows the time when I log in. How I can make it real, so its ticking all the time and shows real time? Please see picture ( row with 20.03.21 22:25 )
cms with time
<input type="text" class="light1" name="Date" value="[[:Date:]]" /><br/>
<input type="text" class="light1" id="txt" name="Now" readonly="readonly" value="[:NOW:]" />
<span style="position:relative; top:0px; left:0px;">↑</span>
If you want a text input to update every second with the time, you could implement something like this:
<input type="text" id="myTime" />
<script>
window.onload = function () {
setInterval(function () {
var newDate = new Date();
document.getElementById('myTime').value = newDate.toLocaleString();
}, 1000);
}
</script>
Code taken from Clock and date javascript
const pad = num => ("0" + num).slice(-2);
const timedate = () => {
const currentTime = new Date(new Date().getTime() + diff);
let hours = currentTime.getHours();
const minutes = pad(currentTime.getMinutes());
const seconds = pad(currentTime.getSeconds());
const d = currentTime.getDate();
const day = pad(d);
const month = pad(currentTime.getMonth() + 1);
const yyyy = currentTime.getFullYear();
/* let dn = "PM"
if (hours <= 12) dn = "AM";
if (hours >= 12) hours -= 12;
if (hours == 0) hours = 12; */
hours = pad(hours);
timeOutput.value = "" +
yyyy + "/" + month + "/" + day +
" " +
hours + ":" +
minutes + ":" +
seconds// + dn;
}
let timeOutput;
let serverTime;
let diff;
window.addEventListener("load", function() {
timeOutput = document.getElementById("timedate");
serverTime = new Date("2020/03/21 22:23:24");// change to new Date("[[:Date:]]"); for example
diff = new Date().getTime() - serverTime.getTime();
setInterval(timedate, 1000);
});
<input type="text" id="timedate" class="light1" name="Date" value="" /><br/>
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>
from date selected by the datepicker in dd-mm--yy format after this i need next year date with -1 day..i.e From:29-07-2016 then To:28-07-2016 like this...please guyz help me..i m sharing my source code
$('#oldDate').on('change', function(e){
var oldDate = new Date(this.value);
$('.datepicker').datepicker({dateFormat:'dd-mm-yy'});
$('#old').html(new Date(oldDate));
oldDate.setDate(oldDate.getDate()-1);
oldDate.setFullYear(oldDate.getFullYear()+1);
var day = ("0" + oldDate.getDate()).slice(-2);
var month = ("0" + (oldDate.getMonth() + 1)).slice(-2);
var today = oldDate.getFullYear()+"-"+(month)+"-"+(day);
// var today = oldDate.(day)+"-"+(month)+"-"+getFullYear();
// alert(today);
$('#new').val(today);
<p class="left">
<label for="from">FROM:</label>
<input type="text" name="from" id="oldDate" class="datepicker"/>
</p>
<p class="pull-right">
<label for="to">TO:</label>
<input type="text" name="to" id="new">
</p>
To achieve expected result, use datepicker and then use on change function to make work
JS:
$('.datepicker').datepicker({
dateFormat: 'dd-mm-yy'
}).datepicker("setDate", "0");
$('#oldDate').click(function() {
$('#oldDate').datepicker('setDate', new Date());
});
$('#oldDate').on('change', function(e) {
console.log(this.value)
var x = this.value;
var from = x.split("-");
var f = new Date(from[2], from[1] - 1, from[0]);
var oldDate = new Date(f);
$('#old').html(new Date(oldDate));
oldDate.setDate(oldDate.getDate() - 1);
oldDate.setFullYear(oldDate.getFullYear() + 1);
console.log(oldDate)
var day = ("0" + oldDate.getDate()).slice(-2);
var month = ("0" + (oldDate.getMonth() + 1)).slice(-2);
var today = (day) + "-" + (month) + "-" + oldDate.getFullYear();
// var today = oldDate.(day)+"-"+(month)+"-"+getFullYear();
// alert(today);
$('#new').val(today);
});
Codepen-http://codepen.io/nagasai/pen/XKBZmN
Check this :
<script type="text/javascript">
var dt = new Date('2016/12/10');
var month = dt.getMonth()+1;
var day = dt.getDate()-1;
var year = dt.getFullYear()+1;
alert(month + '-' + day + '-' + year);
</script>