Я хочу открыть диалоговое окно выбора даты при нажатии на поле ввода, а также на значок.
мой код: <input type = "date" name = "bday" id = "bday" >
Есть ли способ исправить это с помощью ТОЛЬКО JavaScript.
Посмотрите на тег jquery в вопросе, так что вы пробовали $(#bday).on('click', function() { $(this).datepicker() }
или просто $('#bday').datepicker()
Короткий ответ: Нет.
Кроме того, это дублированный вопрос, см.: Открыть средство выбора даты HTML5 при нажатии на значок
правильно, с помощью JS кажется сложно. И в дубликате qus никто не ответил правильно
Обратите внимание, что input type = "date"
не поддерживается в Safari или Internet Explorer 11 и более ранних версиях, поэтому я бы не рекомендовал его использовать — см. эту ссылку https://caniuse.com/#search=дата
Вот простой пример использования Bootstrap Datepicker, совместимого с разными браузерами.
$(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, но можно ли это сделать, не меняя тип = 'дата' на тип = 'текст'
Не вижу смысла использовать input type = "date"
из-за плохой поддержки некоторых браузеров. Почему вы хотите использовать дату?
type='date' - это тип по умолчанию для поля даты в sitecore (приложение для управления контентом), и кажется, что они не могут использовать текстовое поле в этом месте.
взгляните на: jqueryui.com/datepicker