Recommended Free Tools
To select today in jQuery UI Datepicker, call datepicker("setDate", new Date()). For a browser-native <input type="date">, assign its value in yyyy-mm-dd form. These are different controls: use jQuery UI on a text input, not on a native date input.
First identify which datepicker you are using
“Datepicker” may mean jQuery UI’s widget attached to a text field, or the picker supplied by the browser and operating system for an HTML date input. The code for setting a date differs between them, as do their value formats.
| Control | Who provides the picker UI | Value format | Integration notes |
|---|---|---|---|
| jQuery UI Datepicker on a text input | jQuery UI | The configured jQuery UI dateFormat; the documented default is mm/dd/yy, where yy is a four-digit year. |
Requires jQuery UI and its functional CSS. Programmatic updates may not fire a native change event. |
Native <input type="date"> |
The browser and operating system | Normalized yyyy-mm-dd, even if the displayed date looks different. |
Do not attach jQuery UI Datepicker to this input; the two picker interfaces conflict. |
Set today in jQuery UI Datepicker
Attach the widget to a text input, then call its setDate method with a JavaScript Date object:
<input id="date" type="text">
<script>
$("#date").datepicker();
$("#date").datepicker("setDate", new Date());
</script>new Date() represents the current date when that code runs. If the datepicker has already been initialized, call only the second line. The jQuery UI API also allows a string in the widget’s active date format, but a Date object avoids manually building that formatted string.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11#1 Best Overall
Use setDate, not defaultDate, to fill the field
setDate sets the selected date in the widget and its input. The defaultDate option instead controls the date highlighted when the picker first opens while the field is blank. Its default is null, which means today; it is not the documented way to populate the input with today’s date.
Read the selected date back
Use getDate when application code needs the selected value as a JavaScript Date object. It returns the current selected date, or null if there is no selection.
Rank #2
const selectedDate = $("#date").datepicker("getDate");Set today in a native HTML date input
Assign the input’s value using the normalized yyyy-mm-dd format. The date the user sees can be displayed differently according to browser locale, so do not build the value from the visible presentation.
<input id="date" type="date">
<script>
const input = document.querySelector("#date");
input.value = "2026-10-04"; // Example only; generate the intended current date.
</script>The example is a fixed date, not a production method for “today.” Generate the string at runtime, making sure your application’s intended date semantics—such as local calendar date—match how the date is constructed.
Choose one picker per field
jQuery UI’s documentation says its Datepicker is unsupported on <input type="date"> because it conflicts with the browser’s native picker. Use a text input for the jQuery UI widget, or keep type="date" and set its value directly.
Quick Recap
Rank #4
Handle formatting, events, and dependencies
- jQuery UI string formats: The documented default is
mm/dd/yy; in jQuery UI’s format tokens,yymeans a four-digit year. If passing a string tosetDate, match the activedateFormat. The API also showsyy-mm-ddas an example format. - Native input values: The value contract is
yyyy-mm-dd, regardless of the locale-dependent format rendered in the control. - Change handling: jQuery UI notes that it updates the element’s value programmatically, so a native
changeevent may not fire. If other code must react to the update, call that application update path explicitly or verify the event behavior in your integration; do not assumesetDatetriggers every handler. - jQuery UI setup: The widget requires its functional CSS. Its documented dependencies include UI Core; Effects Core is optional.
- Native appearance: The browser and operating system determine how the native picker looks. Its normalized value is more consistent than its visual presentation.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
