Shopify Question posted in
The Shopify help center can be found here.

How can i give default values to the first input? – Shopify

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

Tags:

5

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 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()
    Login or Signup to reply.
  4. 0

    var now = new Date();

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

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

    Login or Signup to reply.
  5. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search