Setting default time value for datetime-local

Question

I am using this html tag as a datetime picker:

<input  type="datetime-local">

I want to be able to set a default value for the time part only so if someone inserts a date and doesn't insert the time (leaves it as --:--:--) then I will be able to set it as 00:00:00 for example.

The problem is I know only how to set the a value including both the date and time and if someone inserts only a date w/o the time I can't read that value and getting a blank value.

Is it possible to overcome that? or is there any other datetime picker I could use for the described scenario?

Sorry to tell you, but `datetime-local` is likely to be dropped. All your effort trying to make this work might be useless. See http://stackoverflow.com/questions/21263515/why-is-html5-input-type-datetime-removed-from-browsers-already-supporting-it. — Patrick Hofman, Aug 15 '14 at 09:05
So basically I better use 2 inputs of the types 'time' and 'date' separately? — Josh, Aug 15 '14 at 09:11
I don't know. Maybe some masked edit using jQuery or something? — Patrick Hofman, Aug 15 '14 at 09:17
Came to this and saw the comments. Check the updated draft "The latest development: The datetime-local is back on the draft;" — Trevor Panhorst, Aug 30 '16 at 16:59
Why can't you just use an `onblur` event listener to test whether the length of the value is 10 (e.g. `2020-06-02`) and if so, append your default time `T00-00-00`? — kmoser, Jun 02 '20 at 04:29

score 2 · Answer 1 · edited Jan 20 '20 at 05:19

We can not change the behavior of browser against an element. So this is an answer to the second question that if there is another solution for this scenario. I used two separate fields of date and time which control a single datetime-local field.

Please note that the date filed has no value unless the field is totally completed. So I used blur event instead of keyup or change.

$(document).ready(function() {
  var mydate, mytime, mystring;
  $("#dateField").blur(function() {
    if ($(this).val()) {
      setResult();
    }
  })

  $("#timeField").change(function() {
    setResult()
  })
})

function setResult() {
  mydate = $("#dateField").val();
  mytime = $("#timeField").val();
  mystring = mydate + 'T' + mytime;
  document.getElementById('resultField').value = mystring;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="dateField" type="date"><input id="timeField" type="time" value="18:30">

<br>
<strong>Result</strong>:
<br>
<input id="resultField" type="datetime-local">

Footnote 1: The change listener works on time field (when has default value) but I noticed a vague behavior in google-chrome that if you change the value of time filed by mouse clicks, the change event is triggered after mouseOut! This has no effect on the answer above.

Footnote 2: You can hide the result field inside a display:none div.

Setting default time value for datetime-local

1 Answers1

Linked