13

I have the following form on my page:

<input id='startDate' type='datetime-local' step=1 name='startDate'>

I use this code to get the value of the field:

var start = $('#startDate').val();

My problem is that the value of the input field remains undefined until every part of it has been filled out, including hours, minutes, seconds, and AM/PM. I would like to be able to get a value from the form with as little as just the year selected.

How can I go about doing this? I'm happy to zero out the values not filled out, but I can't figure out how to get the part of the datetime-local that the user did fill out.

I know I can do this using the timepicker addon for jQuery UI's datepicker, but I don't really want to go this route - I like the Chrome implementation significantly better.

2
  • its not possible to get AM/PM it's a ISO date format (meaning 24 hour) so you would have to convert it...
    – Endless
    Oct 28, 2014 at 18:15
  • jQuery .val() already does the conversion for me. The problem I have is when the datetime is not wholly qualified. Oct 28, 2014 at 18:18

1 Answer 1

4

The W3C Date State spec defines the sanitization algorithm:

  • The value sanitization algorithm is as follows: If the value of the element is not a valid date string, then set it to the empty string instead.

Which is invoked whenever setting the value of the input element, as defined in DOM input value spec:

  • On getting, it must return the current value of the element. On setting, it must set the element's value to the new value, set the element's dirty value flag to true, invoke the value sanitization algorithm, if the element's type attribute's current state defines one, and then, if the element has a text entry cursor position, should move the text entry cursor position to the end of the text field, unselecting any selected text and resetting the selection direction to none.

So the value property will always be an empty string when the date is not valid. There doesn't seem to be any property for "original/dirty/user-typed text value" specified as it is not a text input after all.

IMO it is a good thing, it facilitates form validation as invalid dates are treated as falsy values (empty strings), it also leaves browsers to more freely implement the UI for date inputs.

4
  • Can I capture the event before it reaches the sanitization algorithm so that I can manually force it into a valid date string? I'm happy to do something like this with an onchange to, even if that means showing the user some default value for the unfilled parts of the datetime. Oct 28, 2014 at 18:13
  • The input is local aware mening i will see a 24h clock while you might see a 12h and AM/PM option. so i think its best left alone
    – Endless
    Oct 28, 2014 at 18:21
  • You can however disable the validation and do it by yourself but the time when you could fetch the input.value it would already be valid
    – Endless
    Oct 28, 2014 at 18:22
  • 3
    there is one helpfull property you can use input.validity that will provide you with badInput customError patternMismatch rangeOverflow rangeUnderflow stepMismatch tooLong typeMismatch valid
    – Endless
    Oct 28, 2014 at 18:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.