CODEWITHSUNDEEP
javascriptjqueryinput
Dave
Dave

Reputation: 43

date & time not loading on page load

I have an html page with a date and time input on it, just straight HTML5

<input type="date" id='date' name='date'  style='text-align:center'  required />

and

<input type='time' id='time' name='time'   style='text-align:center' required />

I have the following js code

        function gDate(){
    (function () {
        var date = new Date().toISOString().substring(0, 10),
            field = document.querySelector('#date');
       field.value = date;
 })()
      var time = (new Date()).toTimeString().split(' ')[0];
      document.getElementById('time').value=time;
}

I have it setup to run on document.Ready with Jquery

<script>
$(document).ready(function(){
    gDate();
});
</script>

I do have gDate() being loaded from a separate .js page, it works only when I hit refresh.

How can I make it work when the page is loaded. I have tried 

<body onLoad="gDate()">

but that makes no difference either.

Upvotes: 2

Views: 267

Answers (2)

Dave
Dave

Reputation: 43

OK, so JQMobile, is the problem. I removed it from the page in question and the index.html that calls this page, and it does what I want it to do. That is why I am guessing it would work on jsfiddle.

Thanks for your input.

Upvotes: 0

Marcin
Marcin

Reputation: 1494

Make sure that jQuery is included, below code snippet works just fine, check developer console in your web browser to check for errors.

function gDate(){
    (function () {
        var date = new Date().toISOString().substring(0, 10),
            field = document.querySelector('#date');
       field.value = date;
 })()
      var time = (new Date()).toTimeString().split(' ')[0];
      document.getElementById('time').value=time; 
}

$(document).ready(function(){
    gDate();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id='date' name='date'  style='text-align:center'  required />

<input type='time' id='time' name='time'   style='text-align:center' required />

Upvotes: 1

Related Questions