0

I am trying to make a custom datepicker using input[type='date'] and something that ressembles the code below :

#dpk{
  display: none;
}
label{
  border: 1px solid black;
  padding: .2em .3em;
  cursor: pointer;
}
<div class='input'>
  <label for="dpk">Chose a date</label>
  <input type='date' id='dpk'/>
</div>

For all types of input, clicking on a label (if the 'for' attribute is setup correctly) will trigger automatically a click on the input. We can use this technique to make a custom input[type='file'] as explained by this answer and this jsfiddle.

The output that I expected for the date input was that clicking on the label would show the date picker and it works fine on Firefox but doesn't do anything in Chrome and Edge. And the code snippet above will show a date picker when you click on the text if you use Firefox but won't show anything if you're on Edge or Chrome.

This is what I think causes the problem : In Firefox, a date input looks like this

enter image description here

but in Chrome and Edge they look like this

enter image description hereenter image description here

In Firefox, clicking on any area of the input will trigger the datepicker to show (while the user can also type the date manually) but in the two others one must click on the calendar icon since clicking elsewhere would just let us edit the date just as a text input.

So my question is : is there a way to make this work with JavaScript (or in HTML and CSS)?

document.querySelector('input[type="date"').click() won't work here for the reason I explained above.

Thanks in advance.

mqbaka mqbaka
  • 235
  • 1
  • 7
  • 1
    Perhaps [this question](https://stackoverflow.com/questions/15530850/method-to-show-native-datepicker-in-chrome) will shed light on this?! – Professor Abronsius Aug 23 '21 at 07:44
  • Thanks for your comments. [One of the answers](https://stackoverflow.com/a/53483852/14623816) solved my problem perfectly ! – mqbaka mqbaka Aug 23 '21 at 08:54

1 Answers1

0

You can simply use jquery CDN for this.

$(function() {
  $("#dpk").datepicker();
});
#dpk {
  border: 1px solid black;
  padding: .2em .3em;
  cursor: pointer;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class='input'>
  <input type='text' value="Chose a date" id='dpk' />
</div>
Hedayat H
  • 329
  • 1
  • 7
  • Thanks for the answer, it would have solved my problem if I didn't mind using JQuery but I was actually looking for a way to do it with JavaScript. – mqbaka mqbaka Aug 23 '21 at 11:12