Showing a calendar on hover is a common UI pattern when you want to reveal date options without taking space on the page. The usual approach is to toggle visibility on hover, focus, or pointer entry.
You can implement it with JavaScript mouseenter or with jQuery hover() and focus(). If the next step is text cleanup around a date field, JavaScript trim is often part of the same form workflow.
Where to run these snippets: The plain JavaScript example needs a real browser (or
jsdom/ similar) because it usesdocumentandaddEventListener. The jQuery examples need a page that loads jQuery and markup with#date-inputand.calendar. Outputs below describe browser behavior, not Node.js console text.
Show the calendar with mouseenter
mouseenter runs when the pointer enters the target field (unlike mouseover, it does not bubble from child elements).
const calendar = document.querySelector(".calendar");
const input = document.querySelector("#date-input");
input.addEventListener("mouseenter", function () {
calendar.classList.add("open");
});In the browser: after the pointer enters #date-input, the element .calendar gains the class open (your CSS should show the calendar when .calendar.open or similar is styled).
Show it with jQuery hover()
hover() is a direct way to attach a show action to pointer entry.
$("#date-input").hover(function () {
$(".calendar").addClass("open");
});In the browser: same visible result as above — calendar receives open when the pointer enters the input (jQuery must be loaded).
Show it on focus
focus is a practical fallback for keyboard users and touch devices where hover is unreliable.
$("#date-input").focus(function () {
$(".calendar").addClass("open");
});In the browser: when #date-input receives keyboard focus, .calendar gets the open class. Pair this with a blur or outside-click handler if you need the calendar to hide again.
Summary
To show a calendar on hover, use mouseenter in plain JavaScript, hover() in jQuery, and focus() when you also want keyboard-friendly behavior. The pattern is small, but it improves date-picker UX because the calendar stays hidden until the user needs it and remains usable on touch devices, mouse input, and keyboard navigation. That makes it a practical fit for forms that need a compact and accessible date interaction.
