Need to store html date input in JS var - javascript

I need help with JS and html. I need to store <input type = "date" id = "date"> in JS var. If you try to store the date in simple var and try to print it instead of your chosen date you get printed "undefined" :
$("#printDate").click(function(){
var dateVar = ($("#date").val());
$("#results").append("<p>" + dateVar + "</p>")
});
If you try to store the date in the dateVar using new Date() you get printed "Invalid date":
$("#printDate").click(function(){
var dateVar = new Date($("#date").val());
$("#results").append("<p>" + dateVar + "</p>")
});
Thank you for any kind of help!
upd: full page code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
`<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">`</script>
</head>
<body>
<div id="results"></div>
<input type="date" id = "dateInput">
<button id = "printDate">PrintDate</button>
<script>
$("#printDate").click(function(){
var dateVar = new Date($("#date").val());
$("#results").append("<p>" + dateVar + "</p>")
});
</script>
</body>
</html>

$("#printDate").click(function(){
var dateVar = new Date($("#dateInput").val());
$("#results").append("<p>" + dateVar + "</p>")
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">`</script>
</head>
<body>
<div id="results"></div>
<input type="date" id = "dateInput">
<button id = "printDate">PrintDate</button>
</body>
</html>
The only problem with your code is you are targetting wrong id i.e $("#date") instead of $("#dateInput")

<div id="results"></div>
<input type="date" id="dateInput">
<button id="printDate">PrintDate</button>
<script>
$("#printDate").click(function(){
var dateVar = new Date($("#dateInput").val());
$("#results").append("<p>" + dateVar + "</p>")
});
</script>
You have a typing error.

Related

how to display input value in javascript?

Im trying to display the value that i type in the input field in the class "summe" so after i type something in the input field it would say "Amount:50".What do i need to add for that to happen?
const btncalc = document.querySelector('.calcit');
const summetext = document.querySelector('.summe');
btncalc.addEventListener('click', function(){
summetext.textContent = "Amount:";
});
<!DOCTYPE html>
<html lang="en">
<body>
Backendbenutzer: <input class='backenduser'></input><br>
<span class='summe'>0.00</span><br>
<button class='calcit'>Berechnen</button>
<script src="./app.js"></script>
</body>
</html>
You also need to read the value of that input so I used class selector (with [0] to indicate the first occurance) and appended it to the text:
const btncalc = document.querySelector('.calcit');
const summetext = document.querySelector('.summe');
btncalc.addEventListener('click', function(){
var amount= document.getElementsByClassName("backenduser")[0].value;
var mytext="Amount:" + amount ;
summetext.textContent = mytext;
});
<!DOCTYPE html>
<html lang="en">
<body>
Backendbenutzer: <input class='backenduser'></input><br>
<span class='summe'>0.00</span><br>
<button class='calcit'>Berechnen</button>
<script src="./app.js"></script>
</body>
</html>
This should work
Let inputValue = document.querySelector('backenduser').value
Let summe = document.querySelector('summe')
summe.textContent = inputValue
You can print, the input value "textbox" as below.
const btncalc = document.querySelector('.calcit');
const sourceText = document.getElementById('source');
const summetext = document.querySelector('.summe');
const inputHandler = function(e) {
summetext.innerText = parseFloat(e.target.value).toFixed(2);
}
btncalc.addEventListener('click', function(){
summetext.textContent = "Amount:" + summetext.innerText ;
});
sourceText.addEventListener('input', inputHandler);
<!DOCTYPE html>
<html lang="en">
<body>
Backendbenutzer: <input id="source" class='backenduser'></input><br>
<span class='summe'>0.00</span><br>
<button class='calcit'>Berechnen</button>
<script src="./app.js"></script>
</body>
</html>

How to use kendoTimePicker and kendodatePicker to find difference between two dates?

I am quite new to WebApp/HTML/JS and would like to make a basic tool where a user can enter two dates and times, and the tool will tell them the difference (so for example difference= 220 hours 40 minutes).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Date and Time Pickers</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.bootstrap-v4.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
<style>
body {font-family: helvetica;}
</style>
</head>
<body>
<div>
<script>
// still need to figure out how to do this
// $(document).ready(function() { //maybe don't need this
function calculateTime() {
//create date format
var valuestart = $("select[name='timePicker1']"1).val();
var valuestop = $("select[name='timePicker1']"1).val();
//create date format
var timeStart = new Date($("select[name='datePicker1']"1).val() + valuestart);
var timeEnd = new Date($("select[name='datePicker2']"1).val() + valuestart);
var difference = timeEnd - timeStart;
var diff_result = new Date(difference);
var hourDiff = diff_result.getHours();
$("p").html("<b>Hour Difference:</b> " + hourDiff )
}
$("select").change(calculateTime);
calculateTime();
});
</script>
</div>
<div>
<p>Einweisungsdatum</p>
<!---datepicker first date--->
<input id="datePicker1">
<script>
$(document).ready(function(){
$('#datePicker1').kendoDatePicker({
start: 'decade',
depth: 'year'
});
});
</script>
<input id="timePicker1">
<!---timepicker first date--->
<script>
$(document).ready(function(){
$('#timePicker1').kendoTimePicker();
});
</script>
</div>
<div>
<p>Reinigungsdatum</p>
<!---datepicker first date--->
<input id="datePicker2">
<script>
$(document).ready(function(){
$('#datePicker2').kendoDatePicker({
start: 'decade',
depth: 'year'
});
});
</script>
<input id="timePicker2">
<!---timepicker first date--->
<script>
$(document).ready(function(){
$('#timePicker2').kendoTimePicker();
});
</script>
</div>
<p>start</p>
<div>
<p>end</p>
</div>
</body>
</html>
The UI looks good, but somehow the calculation won't work. I thought that datePicker and timePicker would give me date objects, which I could use for a simple calculation. Is this not the case ?
Thanks for the help!

How do you "convert" $('#yourname').val(); to vanilla javascript?

Just need help getting the vanilla javascript version of $('#yourname').val(); part of var name=$('#yourname').val();
There are numerous selectors of JavaScript in order to do this.
You can find some here, here, and here.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input type="hidden" id="someID" value="625413">
<script>
var a = document.getElementById("someID").value;
var b = $("#someID").val();
var c = document.querySelector("#someID").value;
alert(a + " / " + b + " / " + c);
</script>
</body>
</html>
var a = document.getElementById("someID").value; is the 'classic' example of Vanilla JavaScript.

Why my jquery isn't displayed by browser?

so i am new to jq and i am trying to run this code but the browser doesn't show anything, tried to link the script library before ending tag of body.
Thanks!
<!DOCTYPE html>
<html>
enter code here
<head>
<meta charset="utf-8">
<title>Data Types</title>
<script src="jq/jquery-3.2.1.min.js"></script>
</head>
<body>
<script>
document.write(3.25 + 1000);
document.write('<br>' + 5 - 1000);
var1 = "Buna";
var2 = "Ziua";
document.write("<br>Concatenare siruri:" + var1 + var2 + '<br>');
a = true;
document.write(a);
var = fructe['mere', 'pere', 'caise'];
document.write('<br>' + fructe[1]);
</script>
</body>
</html>
You should fix this line:
var = fructe['mere', 'pere', 'caise'];
To
var fructe = ['mere', 'pere', 'caise'];

jQuery, appending HTML string not working

When using the code below I am unable to add the HTML string to the innerHTML of the target HTMLElement. What am I doing wrong? Is there a better way to do this?
<html>
<head>
<title>Add HTML input with jQuery</title>
<!--
* This code is meant to include the jQuery library v.1.9.1
* from Google API
-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'></script>
<script>
$('document').ready(function(){
$('#add').click(function(){
var src = $('#src'); // alert(src);
var trgt = $('#src'); // alert(trgt);
var x = null;
var child = null;
var str = null;
if(null != src.val()){
alert(1);
x = trgt.children().length;
str = '<input type="text" name="array[]" id="index' + x + '" value="' + src.val() + '" />';
trgt.html().append(str);
src.val() = null;
}else{
alert('src value is emppty');
}
});
});
</script>
</head>
<body>
<div id="box">
<label></label> <input type="text" name="src" id="src" value="" /> <button id="add">+</button>
<div id="trgt">
</div>
</div>
</body>
</html>
var trgt = $('#src'); ... Your source and target selectors are the same.
This var trgt = $('#trgt') is not the only problem I noticed.
There is trgt.html().append(str); which should be trgt.append(str);.
And then src.val() = null;, are you trying to reset the <input> value? You can simply do it with src.val('');
See this jsfiddle.

Categories

Resources