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.
2 Answers
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>3 Comments
Avinash
thanks @Marc , but is there any to do it without changing type='date' to type='text'
Marc Hjorth
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?Avinash
type='date' is default type for date field in sitecore (content management application) and it seems they cannot use text field in that place .
The short answer is No.
Also, this is a duplicated question, see: Open HTML5 date picker on icon click
1 Comment
Avinash
correct , using JS it is difficult it seems. And in duplicate qus noone answered correctly
$(#bday).on('click', function() { $(this).datepicker() }or just$('#bday').datepicker()