Is there a JavaScript method to make a html date input display the datepicker?

Question

I would like to trigger the display of a date input's date-picker from an external button.

<input id="date" type="date" />
<button>display date</button>

For instance if I had the above code, how would I show the date-picker (the box which appears and allows you to pick a date) by clicking the button? I do not want to use jQuery or other libraries. Is there a way to show the native date-picker from an external trigger with vanilla JavaScript?

I'm looking for something like this:

var button = document.querySelector("button");
button.onclick = () => {
    var input = document.querySelector("#date");
    input.showDatePicker();
}

Possible duplicate of HTML Input Type Date, Open Calendar by default — Heretic Monkey
– Heretic Monkey, Commented Mar 3, 2018 at 22:02

Simon Loir · Accepted Answer · 2018-03-04 18:28:18Z

1

This works well on firefox and edge :

<input id="date" type="date" />
<button>display date</button>
<script type="text/javascript">
	var button = document.querySelector("button");
button.onclick = () => {
    var input = document.querySelector("#date");
    input.focus()
    input.click()
}
</script>

answered Mar 4, 2018 at 18:28

Simon Loir

1065 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hultqvist Over a year ago

Works on Chrome/Android and Firefox/Desktop but not on Chrome/Desktop nor Firefox/Android...

bru02 · Accepted Answer · 2018-03-03 19:41:49Z

1

You can with

let x = document.getElementById('myDate'),
  d = new Date(),
  m = d.getMonth() < 10 ? `0${d.getMonth()}` : `${d.getMonth()}`,
  day = d.getDay() < 10 ? `0${d.getDay()}` : `${d.getDay()}`;

x.value = d.getFullYear() + "-" + m + "-" + day;

Demo

answered Mar 3, 2018 at 19:41

bru02

3602 silver badges10 bronze badges

1 Comment

niiyeboah Over a year ago

Hi so I didn't want a way to get the date but a way to make the date-picker show. The thing that appears when you click the arrow on pc, or on mobile just touch the input. I want to make that appear from a separate button

Collectives™ on Stack Overflow

Is there a JavaScript method to make a html date input display the datepicker?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related