How can i give default values to the first input?

Question

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

Does this answer your question? [How to set input type date's default value to today?](https://stackoverflow.com/questions/6982692/how-to-set-input-type-dates-default-value-to-today) — Jelle, Dec 04 '20 at 07:37
If the input element is the first input element on the page with the class of "test", you can get a reference to it with simple `document.querySelector('input.test')`. — Teemu, Dec 04 '20 at 07:42

Jelle · Accepted Answer · 2020-12-04T08:32:58.280

1

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>

edited Dec 04 '20 at 08:32

answered Dec 04 '20 at 07:36

Jelle

758
2
14
36

It's appreciated that you'd read the entire question before answering: "_can't add other classes name or id's_" ... – Teemu Dec 04 '20 at 07:37
Same even for you, its shows an error on console.log typerror, thanks for trying to help – Endrit Shabani Dec 04 '20 at 07:48
can you please check out again my question, its refreshed – Endrit Shabani Dec 04 '20 at 08:10
@EndritShabani I updated the HTML according to your update. The JavaScript code could be improved with a loop if you care about dynamic code. – Jelle Dec 04 '20 at 08:37

score 1 · Answer 2 · answered Dec 04 '20 at 07:36

1

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>

answered Dec 04 '20 at 07:36

Harshana

5,151
1
17
27

Thanks you for trying to help me, its showing an error on console.log typeerror – Endrit Shabani Dec 04 '20 at 07:46
1

@EndritShabani If you run the snippet on this answer, you can see it works perfectly, please focus on your task. As you said, "_[input is] automatically generated_", don't try to access the element before it exists. – Teemu Dec 04 '20 at 07:51
Can i delay the script to be called after 2-3 seconds ? – Endrit Shabani Dec 04 '20 at 08:02
1

To execute after a delay, use [`setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout). – Oskar Grosser Dec 04 '20 at 08:04
can you please check out again my question, its refreshed – Endrit Shabani Dec 04 '20 at 08:10

score 1 · Answer 3 · answered Dec 04 '20 at 07:42

1

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>

answered Dec 04 '20 at 07:42

Obzi

2,384
1
9
22

Thanks for trying to help but, idk its not working. – Endrit Shabani Dec 04 '20 at 08:02
Have you any error to share ? It's work perfectly on my GoogleChrome 87.0.4280.88 – Obzi Dec 04 '20 at 08:07
can you please check out again my question, its refreshed – Endrit Shabani Dec 04 '20 at 08:10

kmp · Answer 4 · 2020-12-04T07:52:40.843

0

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()

edited Dec 04 '20 at 07:52

answered Dec 04 '20 at 07:38

kmp

692
6
17

Why the loop, OP wants the first value only. – Teemu Dec 04 '20 at 07:43
He didn't say that tho, but if so, just drop the loop and specify the index instead – kmp Dec 04 '20 at 07:50

score 0 · Answer 5 · answered Dec 04 '20 at 07:40

0

var now = new Date();

document.getElementsByClassName("test")[0].value = now;

document.getElementsByClassName("test")[1].value = now;

answered Dec 04 '20 at 07:40

Ziv Adler

169
2
11

How can i give default values to the first input?

5 Answers5