Monaca Onsen UI Discord Chat Github Repo

How to show date/time automatically using ons-input



  • Hello Gurus,
    I’ve searched the forum, but haven’t been able to find an answer to my simple question. I’m trying to create an Activity Log. The log uses <ons-input> forms. I am not good at javascript and have tried solutions found both via stack overflow and the internet, but nothing seems to work.

    I know this is a simple thing. I’d like to have the ```
    <ons-input type=“date”> </ons-input>

    
    As it stands now, when I run the program, I get: mm/dd/yy in the input area.
    
    Any help would be appreciated. I like the tutorials very much and the Playground is so helpful. I'm sorry to have to post such a simple question here.
    
    TIA
    -Rachel


  • OK, thanks again to stack overflow, I found the answer to my question. I’m posting it here because I’ve seen other similar questions in the forum that were never answered. Maybe this will help someone else.

    My onsen-ui Html5:

    <div style="text-align: center; margin-top: 30px;margin: bottom 0;">
            <ons-input type="text" id="date" >
          </ons-input>
          </div>
    
          <div style="text-align: center; font-size:small; margin-top: 0px;">
            <ons-input type="text" id="time" >
          </ons-input>
          </div>
    

    The code is pure javascript and was posted by a coder (sorry I don’t have his name) on stack overflow. I do not take credit for it, but I’m grateful for his sharing. 😁

    // get a new date (locale machine date time)
    var date = new Date();
    // get the date as a string
    var n = date.toDateString();
    // get the time as a string
    var time = date.toLocaleTimeString();
    
    // find the html element with the id of "date"
    // set the innerHTML of that element to the date a space the time
    document.getElementById('date').innerHTML = n; //date
    document.getElementById('time').innerHTML = time;
    });
    
    

    -Rachel