Creating an event listener using a calendar icon

Question

Creating an event listener using a calendar icon

I am looking to create a custom datepicker

<input type="text" name="Birth" id="calendarInput" required  class="inputField" placeholder="31.12.2001">
<input type="date" name="Birth" id="calendarHiddenInput" pattern="\d{4}-\d{2}-\d{2}"  style="display: none">
<img id="calendarImg" src="images/calendarIcon.png">

By default, input[type=date] provides a clickable calendar icon for selecting dates. I want to implement a similar functionality with an event listener:

$('#calendarImg').click(function () {
    $('#calendarHiddenInput').click();
});

Unfortunately, the function above is not functioning as expected. My goal is to have a regular input[type=text] with a small calendar icon that displays a datepicker like the input[type=date] when clicked.
P.S. Once implemented, I intend to extract the value from calendarHiddenInput and insert it into calendarInput

javascript html jquery css

Answer 1

Answer №1

Here is an example to consider. Swap out the word "icon" with your own image or text.

document.forms.form01.hiddendate.addEventListener('change', e => {
  e.target.form.date.value = e.target.value;
});

input[type="date"] {
  display: none;
}

<form name="form01">
  <input type="text" name="date" />
  <label>icon<input type="date" name="hiddendate"/></label>
</form>

The <label> tag can be utilized to focus on an input field even when it's hidden. This way, the date picker will still be accessible.

Answer 2

Here is an example to consider. Swap out the word "icon" with your own image or text.

document.forms.form01.hiddendate.addEventListener('change', e => {
  e.target.form.date.value = e.target.value;
});

input[type="date"] {
  display: none;
}

<form name="form01">
  <input type="text" name="date" />
  <label>icon<input type="date" name="hiddendate"/></label>
</form>

The <label> tag can be utilized to focus on an input field even when it's hidden. This way, the date picker will still be accessible.

Creating an event listener using a calendar icon

Answer №1

Similar questions

Error occurs with navctrl when using jquery in Ionic 3

PHP combined with jQTouch

What is the location where UIWebView saves HTML5 offline files?

Is there a way to extract the MIME type from a base64 string?

Creating a uniform system for PHP and CSS that eliminates the need for string parsing

Are there any ways to bring visual attention to a GoDaddy template's SEND button using HTML or JS when the original code is unavailable?

Attempting to utilize Flexbox to populate vacant areas

Protractor: How to Handle Multiple Browser Instances in a Non-Angular Application and Troubleshoot Issues with ignoreSynchronization

code snippet for callback function in javascript

Adjustable DIV based on screen size

Is there a method to retrieve a value from a node.js server when a div is clicked?

Disappear the loading icon once all children have finished rendering

Creating a Rectangular Trapezoid Shape with CSS - Eliminating Unnecessary Spacing

Expand and collapse divs using jQuery when a JavaScript do_PostBack link is clicked

Load the iframe element only when the specified class becomes visible within the container div, without relying on jQuery

What is the best way to trigger an action in response to changes in state within Vuex

When an onClick event is triggered in jQuery, generate a certain number of div blocks based on the available list items, such as image source and heading text

Search for keys that have dots and substitute them with the "@" symbol

Delay the rendering of the MUI DataGrid column until after the DataGrid is visible on the screen

What distinctions can be made between Controlled and Uncontrolled Components when using react-hooks-form?