Display datepicker of with javascript for Chrome

Asked Apr 27 '18 at 19:21

Active May 12 '18 at 08:18

Viewed 153 times

I'm looking for a way to show the calendar with a button just as if you clicked the drop-down arrow in the input box. Target = Chrome(65+)

There are a few questions that have addressed this but I cant get it working for the browser. Like this one: Is there a JavaScript method to make a html date input display the datepicker?

Ideally, Id like the date input itself to not be visible, and the calendar widget show when the button is pressed(space is important).

<button type="button" onclick="openCalendar()">
    <img src="...Images/calendar.png" height="25"/></button>

<input id="datePick" type="date" style="visibility:hidden;width:0px">

in script:

function openCalendar() {
    document.getElementById('datePick').style.visibility = "visible"
    document.getElementById('datePick').focus().click() // this is the line!!
}

In other words, the entire input element would be replaced by a button, the value would not be shown. I would think bootstrap/jQuery unnecessary for this in chrome, anybody know? Thanks

edited May 12 '18 at 08:18

marc_s

732,580
175
1,330
1,459

asked Apr 27 '18 at 19:21

EndUserAbuser

I'll also include a function to hide the input once date has changed, unless the datepicker's visibility is independent from the input box which I doubt. – EndUserAbuser Apr 27 '18 at 19:27
I wonder if wrapping the button in a `` would work? – ceejayoz Apr 27 '18 at 19:41
Crapsnacks you are correct, I'll delete question once I find what I need from that thread, thank you for the link!! – EndUserAbuser Apr 27 '18 at 19:42

Display datepicker of with javascript for Chrome

0 Answers0