Open HTML5 date picker on icon click

by

If you don’t mind having the calendar icon inside the date input field then a cross browser alternative would be to position a calendar icon over top of the triangle calendar picker indicator and then set the calendar icon to pointer-events: none which will cause all click events to be passed through to the triangle calendar picker indicator underneath. I’m not entirely sure how consistent the position of the calendar picker indicator is in different browsers but it should be pretty similar. See the example below.

.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>

Also it is possible to change some of the appearance of the date input field (but not the calendar date picker) as it styles similar to a text input field. In addition there are a number of WebKit CSS properties that are explained here Are there any style options for the HTML5 Date picker?

More Related Contents:

  1. How to clear the canvas for redrawing
  2. Real mouse position in canvas
  3. Accessing JPEG EXIF rotation data in JavaScript on the client side
  4. JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
  5. HTML5 Canvas Resize (Downscale) Image High Quality?
  6. Resize image with javascript canvas (smoothly)
  7. How to fix getImageData() error The canvas has been tainted by cross-origin data?
  8. Why is requestAnimationFrame better than setInterval or setTimeout
  9. HTML5 Canvas vs. SVG vs. div
  10. Javascript how to parse JSON array
  11. Firefox error rendering an SVG image to HTML5 canvas with drawImage
  12. How can I let a user download multiple files when a button is clicked?
  13. How to upload image into HTML5 canvas
  14. Cropping images in the browser BEFORE the upload [closed]
  15. Capture frames from video with HTML5 and JavaScript
  16. Web Workers and Canvas
  17. How to free up the memory in JavaScript
  18. Load image from url and draw to HTML5 Canvas
  19. Canvas image masking / overlapping
  20. Total canvas memory use exceeds the maximum limit (Safari 12)
  21. HTML canvas – drawing disappear on resizing
  22. How to resize then crop an image with canvas
  23. Calculate FPS in Canvas using requestAnimationFrame
  24. How to upload string as file with jQuery or other js framework
  25. How to detect shape on a transparent canvas?
  26. HTML5 Canvas API – formatting individual words with italics
  27. How can I animate the drawing of text on a web page?
  28. What is the value of var me = this;
  29. Split text into pages and present separately (HTML5)
  30. How to position Path2D SVG element in canvas?

Leave a Comment