11

I included a fiddle showing what happens when you apply focus to the element, it sets the focus to the 'day' part of the input, but I can't find any documentation on how the DOM renders and identifies each portion of the date.

How can I programmatically focus the month/year portions of an input[type="date"] element, and is there any documentation on how this type of element gets rendered in the DOM?

https://jsfiddle.net/uytdhqax/

<input id="dob" type="date" />

document.getElementById('dob').focus()
James Donnelly
  • 126,410
  • 34
  • 208
  • 218
trickpatty
  • 433
  • 7
  • 18
  • I guess that's browser-side thing.. You could create 3 inputs and focus them continuously after typing the day/month/year – m_pro_m May 06 '15 at 19:18
  • This is not an option. I am using AngularJS along with a UI-Bootstrap datepicker. My question is very direct and I am not open to any other solutions: How can I programmatically focus the month/year portions of an input[type="date"] element, and is there any documentation on how this type of element gets rendered in the dom? – trickpatty May 06 '15 at 19:21
  • 1
    You could read more here - it's dependent on the location of the computer - http://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format – Mathias Rechtzigel May 06 '15 at 19:24
  • 1
    I don't even see anything in Firefox 37. TBH this is probably totally browser-specific. – 0x1F602 May 06 '15 at 19:29
  • ^ just tested in firefox and almost puked in my mouth. probably just going to use a text input type with some kind of mask. so sick of the browser wars, when will it end? forget about getting boots off the ground, get the damn boots off my websockets and html5 elements, thanks Obama. – trickpatty May 06 '15 at 19:36

2 Answers2

5

This isn't possible in any current implementation of the input[type=date] element as far as I'm aware. Furthermore, different browsers implement this element in different ways, so there is no standalone implementation documentation.

One has to ask why you'd want to imitate this behaviour though. Changing the year value alone will not give the element a value unless the day and month have also been set. In Chrome, at least, if you have an input[type=date] element you'll be shown an element containing placeholder text dd/mm/yyyy. If you select the yyyy part manually and change this to 2015, for example, the input's text will now read dd/mm/2015, but its value will be "" (an empty string). Unless you're manually editing the day and month parts, forcing focus onto the year will not achieve anything other than confusion to users.

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
  • thanks for the response. why I am trying to do this: Chrome seems to implement it's own focus on each section of the date when you click on it. You can in fact click on the year in chrome, and enter only the year without any other portion of the date entered. I am not concerned about validation, I have that under control. The Angular UI-Bootstrap datepicker opens a popup, and takes the focus off of the date input, I was trying to refocus the portion of the datepicker that was clicked on using event.target. another option would be to try and stop the focus from leaving the datepicker – trickpatty May 06 '15 at 19:39
  • @PatrickLawler yes, but if you do only change the `yyyy` part and leave the `dd` and `mm` parts as they are you will not be able to read what year the user has entered as the `value` of the element isn't calculated until all parts are filled in. – James Donnelly May 06 '15 at 19:42
  • I see, that's a good point. I wonder what the value looks like when using Angular's ng-model – trickpatty May 06 '15 at 19:45
  • @PatrickLawler haha, that's what I'd do too at the moment. The `date` and `time` input types are great ideas, but until all modern browsers unify their behaviour it'd probably be better to handle it manually - especially as you're using a datepicker anyway. – James Donnelly May 06 '15 at 19:45
2

Short answer: it's not supported.

If you try to set selection (focus) using

var el = document.getElementById('dob');
var r = document.createRange();
el.setSelectionRange(r);

you will get the error:

DOMException: Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('date') does not support selection.

Also the only documentation I found about date input type says "Not supported", so I thinks there's no such documentation. By now seems that only Chrome implements this input type.

Pedro Sanção
  • 1,328
  • 1
  • 11
  • 16