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 overe that? or is there any other datetime picker I could use for the described scenario?

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 overe that? or is there any other datetime picker I could use for the described scenario?

• javascript
• jquery
• html
• datetime

Share Improve this question Follow asked Aug 15, 2014 at 9:04 JoshJosh 21122 silver badges33 bronze badges 7

• Sorry to tell you, but datetime-local is likely to be dropped. All your effort trying to make this work might be useless. See stackoverflow./questions/21263515/…. – Patrick Hofman Commented Aug 15, 2014 at 9:05
• 1 So basically I better use 2 inputs of the types 'time' and 'date' separately? – Josh Commented Aug 15, 2014 at 9:11
• Time is nominated to be removed too. – Patrick Hofman Commented Aug 15, 2014 at 9:11
• So what's the best alternative for a date & time picker/s? – Josh Commented Aug 15, 2014 at 9:14
• 2 Came to this and saw the ments. Check the updated draft "The latest development: The datetime-local is back on the draft;" – user1586843 Commented Aug 30, 2016 at 16:59

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 2

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 pleted. 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./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.