I want to open datepicker dialog box on click of input box as well as icon.
my code: <input type="date" name="bday" id="bday" >
Is there any way to fix this using JavaScript ONLY.
Asked
Active
Viewed 1,486 times
1

Avinash
- 879
- 2
- 14
- 26
-
have a look at : https://jqueryui.com/datepicker/ – Towkir Apr 08 '19 at 11:32
-
Insee the jquery tag in the question so have you tried `$(#bday).on('click', function() { $(this).datepicker() }` or just `$('#bday').datepicker()` – Michael Cacciano Apr 08 '19 at 11:34
2 Answers
1
Note that input type="date"
is not supported in Safari or Internet Explorer 11 and earlier versions, so I wouldn't recommend using that - see this link https://caniuse.com/#search=date
Here is a simple example using the Bootstrap Datepicker that is cross-browser compatible
$(document).ready(function() {
$('input[id="js-date"]').datepicker();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css">
<h3>Bootstrap datepicker demo</h3>
<div class="input-group date">
<label for="js-date">Date:</label>
<input type="text" class="form-control" id="js-date">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

Marc Hjorth
- 1,797
- 2
- 18
- 24
-
thanks @Marc , but is there any to do it without changing _type='date'_ to _type='text'_ – Avinash Apr 08 '19 at 11:58
-
I don't see any reason to use `input type="date"`, due to the poor support of several browsers. Why do you want to use date? – Marc Hjorth Apr 08 '19 at 12:00
-
type='date' is default type for date field in sitecore (content management application) and it seems they cannot use text field in that place . – Avinash Apr 08 '19 at 12:08
0
The short answer is No.
Also, this is a duplicated question, see: Open HTML5 date picker on icon click

Majvall
- 21
- 3
-
correct , using JS it is difficult it seems. And in duplicate qus noone answered correctly – Avinash Apr 08 '19 at 11:49