CODEWITHSUNDEEP
javascripthtmljqueryjquery-events
ENGR024
ENGR024

Reputation: 317

Uncaught Type Error: Cannont set Property 'valueAsDate' of null

I am getting this weird error that I attempting to debug. I have an input field that has the current time pre-displayed as the value. When I run the page I get the Uncaught Type error referring to the JavaScript file line number 8 (document.getElemntByID("theTime").valueAsDate=b;)

Is it trying to say ValueAsDate is not defined? What do I put in place of it? Any help is most appreciated.

html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" content="HTML,CSS,XML,JavaScript">
       <script src="Scripts/jquery.js" type="text/javascript"></script>
       <script src="Scripts/Global.js" type="text/javascript"></script>
    
          
      <link rel="stylesheet" type="text/css" href="Styles/Design.css">
   </head>
         <body>         
               <form action="" method="post">
                  <fieldset>
                     <table border="0px" >
                        <tr>
                           <td colspan = "2" id="formHeader">
                              Select Date and Time
                           </td>
                        </tr>
                        <tr>
                           <td class="spaceUnder"  id="formBody">Date: &nbsp;&nbsp;<input type="date" id="theDate"></td>
                           <td  align="center" class="spaceUnder"  id="formBody">Time: &nbsp;<input type="time" id="theTime" ></td>
                        </tr>                     
                     </table>
                  </fieldset>
               </form> 
         </body>
</html>

JavaScript

$(document).ready(function() {
    myTimer();
});
function myTimer() {
    var a = new Date();
    var b = new Date(a.getFullYear(), a.getMonth(), a.getDate(), a.getHours() - 8, a.getMinutes());
    //$("#theTime")[0].valueAsDate = b;
    document.getElementById("theTime").valueAsDate =b;
}

Upvotes: 1

Views: 2348

Answers (2)

roshan
roshan

Reputation: 2510

The question should have been how to set input type date and input type time with current values in javascript.

And this just so that any one who searches this question in future may get help. Because I did not find any answers on SO related to this.

Input type date expects date in this format yyyy-mm-dd.

Input time type expects time in this format hh:rr:ss format.

So the following function should do the task.

       function myTimer() {
         var dateObj = new Date();
         document.getElementById('theDate').value = dateObj.toISOString().slice(0,10);
         document.getElementById('theTime').value = dateObj.toTimeString().slice(0,8);
       }

But these features are not yet fully supported in all browsers.

I tested it in chrome and safari and it is working fine.

Upvotes: 3

Lumi Lu
Lumi Lu

Reputation: 3305

Its type is time, not date

<input type="time" id="theTime">

"document.getElemnetById("theTime)" is TIME

var b = new Date(a.getFullYear(), a.getMonth(), a.getDate(), a.getHours() - 8, a.getMinutes());

b is DATE.

Try something like this,

b.setTime(document.getElementById("theTime"));
b.setHours(b.getHours() - 8);

Upvotes: 2

Related Questions