Откройте элемент выбора даты в формате HTML5 на значке

У меня есть сборщик дат HTML5.
Он открывается, когда я нажимаю на текстовое поле выбора даты.

Todo:

Мне нужно изменить событие на значок, но я не уверен, как этого добиться.
Я должен открыть средство выбора даты, когда нажимаю на значок календаря.

Вот код HTML для моего средства выбора даты:

<img src="date.png" alt="Date Picker" id="datepickericon" />
<input name="calendarselect{ContactID}" class="timeselect" type="date" id="calendar">
<script>
document.getElementById("datepickericon").onclick = function(e){
console.log('inside click');
    document.getElementById("calendar").style.visibility="visible";
    // document.getElementById("calendar").focus();
    // You could write code to toggle this
}

Нажав на иконку, я должен получить открытый вид календаря, как показано ниже

Ответ 1

HTML5 <input> с type='date' будет работать только с несколькими браузерами. Кроме того, как программист вы не можете контролировать его внешний вид или любой другой аспект (например, показывать и скрывать его) (Быстрые часто задаваемые вопросы по дате ввода типа)

Таким образом, если вы должны это сделать, тэг HTML5 <input type='date'> не является параметром. Вам нужно будет использовать что-то встроенное в JavaScript, например jQuery UI или Bootstrap.

Старый ответ

Вам нужно прикрепить событие к щелчку значка. Предполагая, что ваш HTML выглядит примерно так:

<img src="date.png" alt="Date Picker" id="datepickericon" />
<input name="calendarselect{ContactID}" class="timeselect" type="date" id="calendar">

Вам нужно будет проверить событие onclick на значке и показать или скрыть календарь.

document.getElementById("datepickericon").onclick = function(e){
    document.getElementById("calendar").focus();
    // You could write code to toggle this
}

Ответ 2

Если вы не против иметь значок календаря внутри поля ввода даты, альтернативой перекрестного браузера будет расположение значка календаря поверх индикатора выбора треугольника календаря, а затем установите значок календаря на pointer-events: none, который будет вызвать все события кликов, которые будут переданы в индикатор треугольника календаря треугольника. Я не совсем уверен, насколько согласуется позиция индикатора выбора календаря в разных браузерах, но это должно быть очень похоже. См. Пример ниже.

.sd-container {
  position: relative;
  float: left;
}

.sd {
  border: 1px solid #1cbaa5;
  padding: 5px 10px;
  height: 30px;
  width: 150px;
}

.open-button {
  position: absolute;
  top: 10px;
  right: 3px;
  width: 25px;
  height: 25px;
  background: #fff;
  pointer-events: none;
}

.open-button button {
  border: none;
  background: transparent;
}

<form>
  <div class="sd-container">
    <input class="sd" type="date" name="selected_date" />
    <span class="open-button">
      <button type="button">📅</button>
    </span>
  </div>
</form>

Ответ 3

Я отвечаю на это, надеясь, что кто-то новый найдет его полезным: Мой html был примерно таким:

<div class='child_dob input-group <?php echo $user->parent_type>2 ?'hidden':''?>'>
  <input type='date' class='form-control hidden' name='dob[]' value='<?php echo $dob?>'>
  <div class='form-control datedisplay'>
     <?php echo date('m/d/Y',strtotime($dob))?>
  </div>
  <input type='hidden' value='<?php echo $id?>' name='id[]'>
  <div class='input-group-addon'>
     <span class='cursor glyphicon glyphicon-remove remove_child_dob'></span>
  </div>
</div>

$(function()
{
 $(document).on('click','.datedisplay',function()
 {
    $(this).siblings('[type="date"]').removeClass('hidden').focus().click();
    $(this).remove();
 });
});

Я тестировал его на хром-симуляторе, а также на устройствах Android, и он отлично работает. Однако требуется тестирование на устройствах iOS.

Ответ 4

вы можете вставить элемент даты над значком и указать ввод opactiy: 0; и дайте размер шрифта размером до значка до даты, а затем он будет wrock

Ответ 5

Большинство, если не все, браузеры фокусируют элемент управления формой, если пользователь щелкает по соответствующему тегу label. Поэтому одно из возможных решений - поместить значок в тег label следующим образом:

<label for="dateinput">Birthday:</label>
<input type="date" id="dateinput">
<label for="dateinput">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAA80lEQVRIie2SzQqCQBDHe5/w1kXt1qUFo6NP1Melp8geIvxgyzbJoIJ6gQ1SA6V6AJ1OG0SsaQkWOPCHPfxmf8wwtVoZZcyXKx0TJwe/0TFZZxaYtgOm7UDhvD8aDD0VxazBV5qZwnhPbcfeqNfnCk4qSiiSHg0USW8/p0h84k8qSvgTKE04tBpgTjSwNA0OrcZbAePN8fjBpwookmAhC0BkAY5IzDDBK58qKCJcARbrUES4gvB6gyJSvoCd3Sfv3xBUK6pW9LngHEZfrycII77A3e1vwReSIIzA3e4vXIFuka4xW57ZyHljYBJMsd3hCv6y7o9Nby8uLYYvAAAAAElFTkSuQmCC" style="vertical-align: middle;" alt="Calendar" title="Set focus on birthday field">
</label>

Ответ 6

<input type="date">

input[type="date"], input[type="month"]{
    position: relative;
}

/* create a new arrow, because we are going to mess up the native one
see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */
input[type="date"]:after,input[type="month"]:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900; 
    content: "\f073";
    color: #555;
    padding: 0 5px;
}

/* change color of symbol on hover */
input[type="date"]:hover:after,input[type="month"]:hover:after {
    color: #bf1400;
}

/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
input[type="date"]::-webkit-calendar-picker-indicator,input[type="month"]::-webkit-calendar-picker-indicator  {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
}

/* adjust increase/decrease button */
input[type="date"]::-webkit-inner-spin-button,input[type="month"]::-webkit-inner-spin-button {
    z-index: 1;
}

 /* adjust clear button */
 input[type="date"]::-webkit-clear-button, input[type="month"]::-webkit-clear-button {
     z-index: 1;
 }

Ответ 7

Следуйте этой гиперссылке https://code.google.com/p/datepickr/ Это сайт javascript Google для кода даты, который вы хотите