3

I'm using datetime-local type input field to capture date/time from a user. I am fully aware that this is only supported by Chrome & Opera browser and for my application, that's completely fine.

What I am noticing is that if I start with an empty value for this input field, the changes are not reflected when I blur out of this field. However when I start with a non-empty value for this input field, the changes are reflected.

Here's my code:

HTML

<strong>Blank Date/Time (Changes are not reflected)</strong>
<br />
<input id="myDate" type="datetime-local" value="" />
<br />
Date Time Value:
<br />
<div id="myDateValue"></div>
<hr />
<strong>Non-Empty Date/Time (Changes are reflected)</strong>
<br />
<input id="myDate2" type="datetime-local" value="2016-09-16T00:00:00" />
<br />
Date Time Value:
<br />
<div id="myDateValue2"></div>

JavaScript

$(document).ready(function(e) {
    $('#myDate').on('blur', function(evt) {
    var dateTimeValue = document.getElementById('myDate').value;
    $('#myDateValue').text('value = ' + dateTimeValue);
  });
    $('#myDate2').on('blur', function(evt) {
    var dateTimeValue = document.getElementById('myDate2').value;
    $('#myDateValue2').text('value = ' + dateTimeValue);
  });
});

Here's the link for the same on jsFiddle: https://jsfiddle.net/qyyory4r/

This is happening in both Chrome & Opera.

What I am curious to know:

  • Is this a known bug with this control? I tried searching for this but couldn't find anything.
  • I think this input control still doesn't support onChange event and hence I am using onBlur event. Is there another way to get the changed value when starting with empty value?
Gaurav Mantri
  • 128,066
  • 12
  • 206
  • 241
  • 2
    This is not an answer to you questions, so I add some comments as a comment. Hope they will be helpful. I was struggling with the same problem and I think I understood why does it behave in that way. In your example `myDate` value is an empty string and `myDate2` value is a valid full date with time set to 00:00. So in `myDate` the time is not defined, but in `myDate2` it's defined. – Lucenty Nov 12 '16 at 20:07
  • 2
    Now when user selects the date with datepicker in `myDate`, the date is set to - for example - `2017-05-01 --:--` (without time), so the value is invalid (because has no time component set) and is seen in the code as an empty string. Instead in `myDate2` the time component is already set to `00:00`, so when the user changes the date component, the value is valid (becase has both date and time properly set). – Lucenty Nov 12 '16 at 20:07
  • Thank you for the explanation! Much appreciated. Considering it is perfectly legal to have a `null` value for a date/time value, I still think something's amiss in this control. – Gaurav Mantri Nov 13 '16 at 12:32
  • Possible duplicate of [Hot to get incomplete datetime-local input values](http://stackoverflow.com/questions/26615364/hot-to-get-incomplete-datetime-local-input-values) – rluks Dec 11 '16 at 13:19
  • @rluks...Thanks! The problem I am facing is that even if I specify a valid value (though not the complete one - say I only specify the date part and not the time part), I get empty string back. Will that be considered as invalid date per the link you shared? – Gaurav Mantri Dec 11 '16 at 13:35

0 Answers0