title: 'Invalid value' when setting default value in HTML5 datetime-local input
body: <p>Can someone explain why when I set the default value of a datetime-local input with seconds other than :00, the browser gives me an error of "Invalid value."?</p>
  
  <p>This may be a bug in Chrome's implementation of datetime-local since this bug does not appear in the latest Firefox and Safari.</p>
  
  <p><strong>Error in Chrome: 30.0.1599.69</strong></p>
  
  <p><img src="https://i.stack.imgur.com/EI9br.png" alt="enter image description here"></p>
  
  <p><strong>Chrome Canary: 32.0.1665.2 canary</strong></p>
  
  <p><img src="https://i.stack.imgur.com/v3CZa.png" alt="enter image description here"></p>
  
  <p><strong>This works:</strong></p>
  
  <pre><code>&lt;input type="datetime-local" name="pub_date" value="2013-10-09T15:38:00"&gt;
  </code></pre>
  
  <p><strong>But this does not:</strong></p>
  
  <pre><code>&lt;input type="datetime-local" name="pub_date" value="2013-10-09T15:38:15"&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/YNdee/1/" rel="noreferrer">Link to fiddle.</a></p>
  
  <p>Per the <a href="http://www.w3.org/TR/html-markup/input.datetime-local.html" rel="noreferrer">W3 Spec for the datetime-local input element</a>, the value attribute should contain "A string representing a local date and time."</p>
  
  <pre><code>Example:
  1985-04-12T23:20:50.52
  1996-12-19T16:39:57
  </code></pre>
  
  <p>I tried both of the above examples and they don't work either.</p>
  
  <p><strong>Update: Confirmed Bug &amp; Solution</strong></p>
  
  <p>This behavior is a <a href="https://code.google.com/p/chromium/issues/detail?id=257369&amp;q=datetime-local&amp;colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified" rel="noreferrer">known bug</a>.</p>
  
  <p>As of today, the quick fix is to add the step attribute like so for non-zero seconds:</p>
  
  <pre><code>&lt;input type="datetime-local" 
         name="pub_date" 
         value="2013-10-09T15:38:15" 
         step="1"&gt;
  </code></pre>