jquery/jquery-ui

Datepicker show/hide function not working

Open

#2360 opened on Jul 13, 2025

View on GitHub
 (3 comments) (0 reactions) (0 assignees)JavaScript (11,194 stars) (5,390 forks)batch import
Comp: Datepickerhelp wanted

Description

When create a datepicker for a div (non-input) elementm the show/hide functions don't work.

<div id="datepicker"></div>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
<script>
$("#datepicker").datepicker();
$("#datepicker").datepicker("hide");
</script>

Contributor guide

Tech stack
javascripthtmlcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
jQuery basicsdatepicker usage
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
Investigate why calling datepicker('hide') does not work when the datepicker is attached to a div element instead of an input. The issue likely lies in the show/hide logic of the datepicker widget, which may assume an input element. Look at the source code for the showDatepicker and hideDatepicker methods in jquery.ui.datepicker.js. A fix might involve adjusting the visibility toggle or the dialog positioning for non input elements. Ensure that the hide method properly triggers the widget's hide functionality.