How to show HTML5 datetimepicker without having to click the picker-indicator?

Question

I am using a html5 datetimepicker and would like the date popup to appear when you click anywhere on the input field rather than being forced to click the little arrow. How can I do this?

This question here shows that this can be done. Running the code through the link on the question or running the snippet on the answer. Clicking the input field opens the popup. how to style html5 date input, first element focus/active

::-webkit-inner-spin-button {
  display: none;
}
 ::-webkit-datetime-edit-text {
  background: none;
}
 ::-webkit-datetime-edit-month-field {
  background: none;
}
 ::-webkit-datetime-edit-day-field {
  background: none;
}
 ::-webkit-datetime-edit-year-field {
  background: none;
}
 ::-webkit-datetime-edit-text:focus {
  background: rgba(255, 255, 255, 0.5);
}
 ::-webkit-datetime-edit-month-field:focus {
  background: rgba(255, 255, 255, 0.5);
}
 ::-webkit-datetime-edit-day-field:focus {
  background: rgba(255, 255, 255, 0.5);
}
 ::-webkit-datetime-edit-year-field:focus {
  background: rgba(255, 255, 255, 0.5);
}
 ::-webkit-clear-button {
  display: none;
  -webkit-appearance: none;
}
 ::-webkit-calendar-picker-indicator {
  background: none;
}

<input [(ngModel)]="data.value.date_of_visit" id="selectedDate" type="date" name="date_of_visit" class="form-control date-filter pseudo-input live-update" placeholder="Event Date" value="2013-01-08" formControlName="date_of_visit" aria-describedby="inputSuccess2Status"
style="line-height: 20px;">

Any help is greatly appreciated!

Here you go: http://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element Hope it helps! — avilac, Dec 27 '16 at 14:58
This thread suggests it can't be done (and note this is only the appearance/functionality on desktop webkit browsers): http://stackoverflow.com/questions/28091036/expand-input-date-calendar-browser-native — Jon Uleis, Dec 27 '16 at 15:03
First question does not answer my question. And this question shows that it can be done: http://stackoverflow.com/questions/30778668/how-to-style-html5-date-input-first-element-focus-active — Sina Sohi, Dec 27 '16 at 15:05

score 0 · Answer 1 · answered Dec 27 '16 at 15:56

0

Trigger F4 keyboard event on onfocus

function showCal(element) {
   var event = document.createEvent('KeyboardEvent');
   event.initKeyboardEvent('keydown', true, true, document.defaultView, 'F4', 0);
   element.dispatchEvent(event);
}

Bind this function with onfocus event

answered Dec 27 '16 at 15:56

Achal Saini

155
6

So then I have to press F4 everytime I want it to open? I want it to open when on focus only. – Sina Sohi Dec 27 '16 at 16:08
you dont have to press F4, showCal function will trigger that – Achal Saini Dec 27 '16 at 16:19
Okay and the element i send as parameter is my datefield? is it the id or the element itself? – Sina Sohi Dec 28 '16 at 07:27
u need to pass the element itself, not the id – Achal Saini Dec 28 '16 at 11:14
My code runs, and I do send the element: element = document.getElementById("dateField"); But it doesn't to anything. I still have to press F4 myself to open it .. S: – Sina Sohi Dec 28 '16 at 13:15

How to show HTML5 datetimepicker without having to click the picker-indicator?

1 Answers1