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>
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!
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/>
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>
I have a jQuery function that assigns today's date to a textbox when a radio button is clicked.
In the example below, when the radio button value is "I", the Date Inactive date is today. When the radio button value is "A", the Date Active date is also today.
I am trying to introduce another action: when the radio button value is "A" I want to make id DNE to be equal to "12-31" of the current year (so in this case, "12-31-2016").
Since I wasn't sure how to do that, I entered ??? as the value. Thanks for any help.
Date.prototype.yyyymmdd = function() {
var yyyy = this.getFullYear().toString();
var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
var dd = this.getDate().toString();
return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + dd[1]?dd:"0"+dd[0]); // padding
};
$(document).ready(function(){
var d = new Date();
$(".Status").change(function () {
if ($(this).val() == "I")
$("#Date_Inactive").val(d.yyyymmdd());
if ($(this).val() == "A")
$("#Date_Accepted").val(d.yyyymmdd());
$("#DNE").val(???);
});
});
P.S: notice that you're missing an ( in
return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + dd[1]?dd:"0"+dd[0]);
// Missing ( ^^^ HERE
Otherwise:
$("#DNE").val( d.yyyymmdd().substring(5, 10) );
Date.prototype.yyyymmdd = function() {
var yyyy = this.getFullYear().toString();
var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
var dd = this.getDate().toString();
return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + (dd[1]?dd:"0"+dd[0]);
};
$(function(){
var d = new Date();
$(".Status").change(function () {
if ($(this).val() == "I")
$("#Date_Inactive").val( d.yyyymmdd() );
if ($(this).val() == "A")
$("#Date_Accepted").val( d.yyyymmdd() );
$("#DNE").val( d.yyyymmdd().substring(5, 10) );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="dateRadio" value="I" class="Status">
<input type="radio" name="dateRadio" value="A" class="Status">
<br>
<input type="text" id="Date_Inactive"> inactive <br>
<input type="text" id="Date_Accepted"> accepted<br>
<input type="text" id="DNE">DNE
Or if you want to do it without the func - here you go:
$("#DNE").val('12-31-'+new Date().getFullYear());
I am having great difficulty getting the current date to be inputted into a text box within a form i am creating as a default value. at the moment i have the following code, which i believe creates the current date, followed by the text box code which i am unsure on how to modify in order for the date to be displayed inside.
function getDate(){
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
document.getElementById("frmDate").value = datestring();
}
<input type="text" name="frmDateReg" required id="frmDate" value="getDate()">
if anyone could suggest how to create todays date and input it into the textbox as default it would be greatly appreciated. (Please excuse any format issues as i am new to stack overflow) Thanks
You've got the right idea. It's just out of order:
<input type="text" name="frmDateReg" required id="frmDate" value="">
function getDate(){
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
document.getElementById("frmDate").value = datestring;
}
getDate();
Your code is correct, except that adding the function call in the value doesn't do anything. You need something else to trigger the function. The way I have it there, it will execute automatically when the page loads.
Aslo, datestring is not a function. It's just a variable. So you can leave off the ()
Try this Jquery code, this will work
$(document).ready(function () {
var dateNewFormat, onlyDate, today = new Date();
dateNewFormat = today.getFullYear() + '-';
if (today.getMonth().length == 2) {
dateNewFormat += (today.getMonth() + 1);
}
else {
dateNewFormat += '0' + (today.getMonth() + 1);
}
onlyDate = today.getDate();
if (onlyDate.toString().length == 2) {
dateNewFormat += "-" + onlyDate;
}
else {
dateNewFormat += '-0' + onlyDate;
}
$('#mydate').val(dateNewFormat);
});
razor view for this
#Html.TextBoxFor(m => m.StartedDate, new { #id = "mydate", #type = "date", #class = "form-control" })
This simple solution worked out for me. You can show the current date using window.onload function of javascript. See the output.
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
window.onload = function(){
document.getElementById("date").value = datestring;
}
<input type="text" id="date"/ >
<html>
<body onload="myFunction()">
Date: <input type="text" id="demo"/>
<script>
function myFunction() {
document.getElementById('demo').value= Date();
}
</script>
</body>
</html>
Use this code. this will helpful
<input type="text" name="frmDateReg" required id="frmDate" >
<script>
function getDate(){
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
document.getElementById("frmDate").value = datestring; //don't need ()
}
document.getElementById("frmDate").onload = getDate();
</script>
html
<input type="text" id="frmDate"></input>
JavaScript
var date = new Date();
document.getElementById("frmDate").value = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
Jsfiddle Demo
<script TYPE="text/javascript" LANGUAGE=JAVASCRIPT>
var currentDate = new Date();
var date1 = currentDate.getMonth()+1;
var mon = currentDate.getDate();
if (mon<10)
mon="0"+mon
var year = currentDate.getYear();
var hour = currentDate.getHours();
var dn="pm"
if (hour<12)
dn="am"
if (hour>12)
hour=hour-12
if (hour==0)
hour=12
var minute = currentDate.getMinutes();
if (minute < 10){
minute = "0" + minute
}
var second = currentDate.getSeconds();
if (second < 10){
second = "0" + second
}
var today = date1+"/"+mon+"/"+year+" Time: "+hour+":"+minute+":"+second+" "+dn
var filePath = "\\\\servername\\maindirectory\\somedirectory\\filenametopostto.xlsx";
function setDate()
{
f1.tDate.value=today;
}
</script>
Result in your text box is:
5/28/2019 Time: 3:03:01 pm
If you want to show the current date on the input field date
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
// today = yyyy + '/' + mm + '/' + dd;
today = `${yyyy}-${mm}-${dd}`;
document.getElementById('dateto1').value = today;
<div class="col-lg-4">
<label>Date</label>
<input type="date" name="dateto1" id="dateto1" class="form-control">
</div>