Hi there can you help me solving this,
I have this code here
<div>
<div>
<input type="text" name="" tabindex="0" styling="[object Object]"
placeholder="YYYY/MM/DD" aria-label="date" aria-invalid="false"
valid="1" class="needsclick TextInput__FormStyledTextInput-sc-1o6de9f-0
fsIKy kl-private-reset-css-Xuajs1">
</div>
</div>
<div>
<div>
<input type="text" name="" tabindex="0" styling="[object Object]"
placeholder="YYYY/MM/DD" aria-label="date" aria-invalid="false"
valid="1" class="needsclick TextInput__FormStyledTextInput-sc-1o6de9f-0
fsIKy kl-private-reset-css-Xuajs1">
</div>
</div>
How can i give the input value today's date, with pure javascript, i cant add manually and can't add other classes name or id's because its automatically generated.
Thanks,
Edited,
The script i want to include is in a shopify theme, and the inputs are on a pop-up, maybe this will help you more
This should help:
let date = new Date();
document.getElementsByClassName('needsclick TextInput__FormStyledTextInput-sc-1o6de9f-0 fsIKy kl-private-reset-css-Xuajs1')[0].value = date.getFullYear() +'/'+ date.getMonth() +'/'+ date.getDate();
document.getElementsByClassName('needsclick TextInput__FormStyledTextInput-sc-1o6de9f-0 fsIKy kl-private-reset-css-Xuajs1')[1].value = date.getFullYear() +'/'+ date.getMonth() +'/'+ date.getDate();
<div>
<div>
<input type="text" name="" tabindex="0" styling="[object Object]"
placeholder="YYYY/MM/DD" aria-label="date" aria-invalid="false"
valid="1" class="needsclick TextInput__FormStyledTextInput-sc-1o6de9f-0
fsIKy kl-private-reset-css-Xuajs1">
</div>
</div>
<div>
<div>
<input type="text" name="" tabindex="0" styling="[object Object]"
placeholder="YYYY/MM/DD" aria-label="date" aria-invalid="false"
valid="1" class="needsclick TextInput__FormStyledTextInput-sc-1o6de9f-0
fsIKy kl-private-reset-css-Xuajs1">
</div>
</div>
You can use getElementsByClassName() method to get the elements with class "test" and then use "Date()" to pass the date.
inputs = document.getElementsByClassName("test")
inputs[0].value = new Date();
<div>
<div>
<input class="test" type="text" />
</div>
</div>
<div>
<div>
<input class="test" type="text" />
</div>
</div>
Here you go :
var inputs = document.getElementsByTagName('input');
for (let i = 0; i<inputs.length; i++) {
if (inputs[i].classList.contains('test')) {
let now = new Date();
inputs[i].value = now.getFullYear() +'/'+ now.getMonth() +'/'+ now.getDate();
break;
}
}
<div>
<div>
<input class="test" type="text"/>
</div>
</div>
<div>
<div>
<input class="test" type="text"/>
</div>
</div>
var now = new Date();
document.getElementsByClassName("test")[0].value = now;
document.getElementsByClassName("test")[1].value = now;
const inputs = documemt.querySelectorAll('.test')
for (let i = 0; i < inputs.length; i++) {
inputs[i].value = new Date().getDate()
}
EDIT
If you only want a single input to display the date:
inputs[index] = new Date().getDate()
Related
I would like to add a number of day to the date that I give to my form then display it in an empty input.
<div class="col">
<input type="date" [(ngModel)]="date" />
<input type="number" min="1" max="31" [(ngModel)]="day"/>
</div>
<div class="col">
<input type="button" value="Calculate" (click)="addDays()"/>
</div>
<div class="col">
<input type="text" [(ngModel)]="result"/>
</div>
The code behind
day: number;
date: Date;
result: Date;
addDays(){
this.result = this.date.setDate(this.date + this.day);
console.log(this.result);
}
I get an error: this.date.setDate is not a function because I can't add a number to a date. I checked some topics but didn't get solutions.
You have to do something like this:
function addDays(date, days) {
var newDate = new Date(date);
newDate.setDate(newDate.getDate() + days);
return newDate;
}
Currently, the code I'm using only works with one text box because of the element ID. I tried to duplicate the script with different IDs for different text boxes, only 1 text box would show.
<script>
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;
}
</script>
<input type="text" id="date"/ >
that ?
var datestring = new Date().toLocaleDateString();
// initialize Date to any element with specific ID
document.querySelectorAll('#date1, #date2, #date3, #date4')
.forEach(item => item.value = datestring )
<input type="text" id="date1" ><br>
<input type="text" id="date2" ><br>
<input type="text" id="date3" ><br>
<input type="text" id="date4" ><br>
But it is more easy if they use a same class:
var datestring = new Date().toLocaleDateString();
// initialize Date to any element input with class="inDate"
document.querySelectorAll('input.inDate')
.forEach( item => item.value = datestring )
<input type="text" id="date1" class="inDate" ><br>
<input type="text" id="date2" class="inDate" ><br>
<input type="text" id="date3" class="inDate" ><br>
<input type="text" id="date4" class="inDate" ><br>
I have a problem with the script.
I am trying to count two input fields, and insert the result into the third field.
But it doesn't work, and unfortunately I can't figure out what's wrong.
function sum() {
var txtFirstNumberValue = document.querySelectorAll('#firstID > div > div > div > input').value;
var txtSecondNumberValue = document.querySelectorAll('#second > div > div > div > input').value;
if (txtFirstNumberValue == "")
txtFirstNumberValue = 0;
if (txtSecondNumberValue == "")
txtSecondNumberValue = 0;
var result = parseInt(txtFirstNumberValue) / parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
document.querySelectorAll('#third > div > div > div > input').value = result;
}
}
<div id="firstID"><div>
<label>first</label>
<div>
<div>
<input name="drts[field_first][0]" type="number" value="" maxlength="255">
</div>
</div>
</div></div>
<div id="second"><div>
<label>second</label>
<div>
<div>
<input name="drts[field_second][0]" type="number" maxlength="255">
</div>
</div>
</div></div>
<div id="third"><div>
<label>third</label>
<div>
<div>
<input name="drts[field_third][0]" type="number" value="" maxlength="255">
<div></div>
</div>
</div>
</div></div>
There are a few problems here.
Are you actually calling sum? I've added a call in the example code so you can run it.
Your query selectors are not right. There isn't actually anything in the divs with the IDs you query. I've moved the input boxes into the correct places. When debugging, you should check that you are actually finding elements in your querySelectorAll call before proceeding.
querySelectorAll doesn't have a value property. You would need to iterate over each element before getting the items. Given you specifically want one item, it would be better to use something more specific like getElementById. I've kept the original querySelectorAll but changed the IDs on the divs to classes so we can have more than one result for this example. Then, I iterate over them pulling out the value to add to result. I've moved the parseInt to the running calculation otherwise it would perform a string concatenation.
Even better than the above would be to access the input directly. There's probably no point accessing a div and drilling down to the input. I've included this example to output the result.
I've removed redundant html. It's not related to the answer but try to keep your markup clean.
function sum() {
var inputElements = document.querySelectorAll('.user-input > div > div > input');
var result = 0;
inputElements.forEach(element => {
result += element.value ? parseInt(element.value) : 0
})
document.getElementById('third').value = result
}
document.getElementById('run-button').addEventListener('click', sum)
<div class="user-input">
<label>first</label>
<div>
<div>
<input name="drts[field_first][0]" type="number" maxlength="255">
</div>
</div>
<div>
<div class="user-input">
<label>second</label>
<div>
<div>
<input name="drts[field_second][0]" type="number" maxlength="255">
</div>
</div>
<div>
<label>third</label>
<div>
<div>
<input id="third" name="drts[field_third][0]" type="number" value="" maxlength="255">
<div></div>
</div>
</div>
<div>
<button type="button" id="run-button">Run</button>
Try like this
function sum() {
let txtFirstNumberValue = document.querySelector('#firstID input').value;
let txtSecondNumberValue = document.querySelector('#second input').value;
let result = parseInt(txtFirstNumberValue) / parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
document.querySelector('#third input').value = result;
} else {
document.querySelector('#third input').value = '';
}
}
<div id="firstID"><div>
<label>first</label>
<div>
<div>
<input name="drts[field_first][0]" type="number" value="" maxlength="255">
</div>
</div>
</div></div>
<div id="second"><div>
<label>second</label>
<div>
<div>
<input name="drts[field_second][0]" type="number" maxlength="255">
</div>
</div>
</div></div>
<div id="third"><div>
<label>third</label>
<div>
<div>
<input name="drts[field_third][0]" type="number" value="" maxlength="255" disabled>
<div></div>
</div>
</div>
<div>
<button id="button" onclick="sum()">Calculate</button>
</div>
</div>
</div>
const input1 = document.querySelector('#input1');
const input2 = document.querySelector('#input2');
const input3 = document.querySelector('#input3');
const storeInputs = [input1, input2];
for(let i = 0; i < storeInputs.length; i++) {
storeInputs[i].addEventListener('input', function() {
// multiply input1 and input2 with 1 for converting there values from string to number
input3.value = input1.value * 1 + input2.value * 1;
});
};
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<label for="input1">First Input</label>
<input id="input1" type="number" value="0"></input>
<label for="input2">Second Input</label>
<input id="input2" type="number" value="0"></input>
<label for="input3">Third Input</label>
<input id="input3" type="number" value="0"></input>
</body>
</html>
Im Trying to put the Value of dtpFrom to var FDate
I know my Javascript is wrong. I provided them so that you may know what I need to do.
var FDate = "";
var TDate = "";
<script>
function myFunction() {
document.getElementById("FDate").value = document.getElementById("dtpFrom").value;
document.getElementById("TDate").value = document.getElementById("dtpTo").value;
}
</script>
<p>
<strong><b>Find by MAWB: #Html.TextBox("searchstring")</b></strong>
<strong><b>From: #Html.TextBox("fromDate", FDate)</b></strong>
<strong><b>To: #Html.TextBox("toDate", TDate)</b></strong>
<input type="Date" id="dtpFrom" onchange="myFunction()" />
<input type="Date" id="dtpTo" />
<input type="submit" value="Search" />
</p>
https://jsfiddle.net/0zfjy75r/1/
var FDate = "<span id="FDate"></span>";
var TDate = "<span id="TDate"></span>";
<script>
function myFunction() {
document.getElementById("FDate").innerHTML = document.getElementById("dtpFrom").value;
document.getElementById("TDate").innerHTML = document.getElementById("dtpTo").value;
}
</script>
<p>
<strong><b>Find by MAWB: #Html.TextBox("searchstring")</b></strong>
<strong><b>From: #Html.TextBox("fromDate", FDate)</b></strong>
<strong><b>To: #Html.TextBox("toDate", TDate)</b></strong><br>
<input type="Date" id="dtpFrom" onchange="myFunction()" />
<input type="Date" id="dtpTo" />
<input type="submit" value="Search" />
</p>
I have an html form which allows for a taxi booking, but it shouldn't allow bookings back in time! so the time must be current or in the future.
Here is the form, I use datetime-local.
/* Here is the JavaScript validation for the datetime-local. */
var dateTime = document.getElementById("dateTime").value;
if (dateTime == "" || dateTime == null) {
booking.dateTime.focus();
document.getElementById("dateMessage").innerHTML = "Please select a date AND time, thankyou.";
return valid = false;
} else {
document.getElementById("destinationMessage").innerHTML = "";
}
```
<form id="booking" action="">
<div id="firstNameMessage" class="red"></div>
<span class="red">*</span>First Name:
<input type="text" name="firstName" id="firstName">
<br>
<div id="lastNameMessage" class="red"></div>
<span class="red">*</span>Last Name:
<input type="text" name="lastName" id="lastName">
<br>
<div id="numberMessage" class="red"></div>
<span class="red">*</span>Contact Number:
<input type="text" name="number" id="number">
<br>
<div id="unitMessage" class="red"></div>
Unit Number(optional):
<input type="text" name="unit" id="unit">
<br>
<div id="streetNumberMessage" class="red"></div>
<span class="red">*</span>Street Number:
<input type="text" name="streetNumber" id="streetNumber">
<br>
<div id="streetNameMessage" class="red"></div>
<span class="red">*</span>Street Name:
<input type="text" name="streetName" id="streetName">
<br>
<div id="pickupMessage" class="red"></div>
<span class="red">*</span>Suburb:
<input type="text" name="pickupSuburb" id="pickupSuburb">
<br>
<div id="destinationMessage" class="red"></div>
Destination Suburb<span class="red">*</span>:
<input type="text" name="destinationSuburb" id="destinationSuburb">
<br>
<div id="dateMessage" class="red"></div>
Pick-Up Date and Time<span class="red">*</span>:
<input type="datetime-local" name="dateTime" id="dateTime">
<br>
<br>
<input type="button" value="Submit"
onclick="getData('bookingprocess.php','message', firstName.value, lastName.value, number.value, unit.value, streetNumber.value, streetName.value, pickupSuburb.value, destinationSuburb.value, dateTime.value)" />
<input type="reset" value="Reset">
</form>
How can I make it check for being the current time or in the future? (Basically disabling past entries).
Please use input type = "date" instead of date-time. Probably no more supported by browsers.
Please refer this link
Now to set min date you cn use the following snippet
//Get today's date and split it by "T"
var today = new Date().toISOString().split('T')[0];
document.getElementById("dateTime").setAttribute('min', today);
DEMO
You can just compare dates by > and <. Make sure the dates in the same timezone though.
var dateTimeStr = document.getElementById("dateTime").value;
var dateTime = convertDateToUTC(new Date(dateTimeStr));
var now = new Date();
if (isNaN(date.getTime()) || date <= now) {
booking.dateTime.focus();
document.getElementById("dateMessage").innerHTML = "Please select a date AND time in the future, thankyou.";
return valid = false;
} else {
document.getElementById("destinationMessage").innerHTML = "";
}
function convertDateToUTC(date) {
return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
}
JS Fiddle
You should use a jquery or bootstrap calendar. It is ideal for this situation. It is also very easy for the user to pick up the date this way.
You have all configuration options in such calendars for e.g. assigning culture, date format, mindate, maxdate etc.
Also keep in mind to pick the date from server and set it as mindate in javascript since the datetime might be wrong on client computer.