我有一个HTML5日期选择器。当我单击日期选择器文本框时,它将打开。

待办事项:

  • 我必须将事件更改为图标,但是我不确定如何实现。单击日历图标时,我必须打开日期选择器。

  • 这是我的日期选择器的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
    }
    

    通过单击图标,我必须获得打开的日历 View ,如下图所示

    最佳答案

    如果您不介意在日期输入字段中包含日历图标,则跨浏览器的另一种选择是将日历图标放置在三角形日历选择器指示器上方,然后将日历图标设置为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>


    也可以更改日期输入字段的某些外观(但不能更改日历日期选择器),因为它的样式类似于文本输入字段。此外,它们还有许多WebKit CSS属性,在此进行了说明Are there any style options for the HTML5 Date picker?

    09-10 02:52
    查看更多