jQuery UI Datepicker

jQuery UI Datepicker attaches a calendar to an input field so users can choose a date. You can control formatting, allowed ranges, default dates, year/month navigation and per-day availability.

Basic Datepicker Top ↑

<input type="text" id="date_picker" placeholder="Calendar">

$( function () {
    $( "#date_picker" ).datepicker({
        dateFormat: "dd-mm-yy"
    });
});

Date Format Top ↑

Use the dateFormat option to control how the selected date appears in the input.

const dateFormats = [
    "dd-mm-yy",                         // 15-12-2026
    "d-mm-yy",                          // 5-12-2026
    "dd-m-yy",                          // 05-2-2026
    "dd-mm-y",                          // 05-02-26
    "dd-M-yy",                          // 05-Sep-2026
    "dd-MM-yy",                         // 05-September-2026
    "'On' d 'Day of' MM ', Year:' yy"
];

• d / dd: day of month.
• D / DD: short/full weekday name.
• m / mm: month number.
• M / MM: short/full month name.
• y / yy: two-digit/four-digit year.

Demo: Datepicker date formats →

Read a Changed Date Top ↑

Date:
<input type="text" id="date_picker1">
<div id="date_selected"></div>

$( function () {
    $( "#date_picker1" ).datepicker({
        dateFormat: "dd-mm-yy"
    });

    $( "#date_picker1" ).on( "change", function () {
        const selectedDate = $( this ).val();
        $( "#date_selected" ).text( selectedDate );
    });
});

Demo: change event with Datepicker →

Choose the First Day of the Week Top ↑

firstDay accepts 0 to 6. The default is 0 for Sunday; 1 starts with Monday and 6 starts with Saturday.

$( "#date_picker" ).datepicker({
    firstDay: 1
});

Demo: change the first day of the week →

Limit Selection with minDate and maxDate Top ↑

Use relative values or Date objects to prevent selection outside an allowed range.

$( "#date_picker" ).datepicker({
    dateFormat: "mm-dd-yy",
    maxDate: 0
});

$( "#date_picker" ).datepicker({
    dateFormat: "dd-mm-yy",
    minDate: "-1w",
    maxDate: "+1w"
});

Demo: minimum and maximum dates →

Demo: maxDate options →

Demo: minDate options →

defaultDate and setDate Top ↑

defaultDate controls the date initially shown when the input has no value. Use setDate when you want to set the widget's selected date and input value.

<input type="text"
       id="date_picker"
       class="form-control"
       value="14-05-2026">

$( "#date_picker1" ).datepicker({
    dateFormat: "dd-mm-yy",
    defaultDate: "14-05-2026"
});

const selectedDate = new Date( 2026, 4, 14 );
$( "#date_picker2" ).datepicker( "setDate", selectedDate );

Demo: defaultDate and setDate →

Month and Year Dropdowns Top ↑

$( "#date_picker1" ).datepicker({
    dateFormat: "dd-mm-yy",
    changeMonth: true,
    changeYear: true,
    yearRange: "c-15:c+5"
});

You can also use a fixed range such as "1990:2035".

Demo: year selection with a range →

Interlink Start and End Datepickers Top ↑

When a start date is selected, use it as the minimum allowed end date. When an end date is selected, use it as the maximum allowed start date.

$( function () {
    const $start = $( "#start_date" );
    const $end = $( "#end_date" );

    $start.datepicker({
        dateFormat: "dd-mm-yy",
        onSelect: function () {
            $end.datepicker(
                "option",
                "minDate",
                $start.datepicker( "getDate" )
            );
        }
    });

    $end.datepicker({
        dateFormat: "dd-mm-yy",
        onSelect: function () {
            $start.datepicker(
                "option",
                "maxDate",
                $end.datepicker( "getDate" )
            );
        }
    });
});

Demo: linked start and end dates →

Limit an Event to a Fixed Number of Days Top ↑

The same minDate/maxDate pattern can enforce a maximum event duration, such as two weeks.

function addDays( date, days ) {
    const result = new Date( date );
    result.setDate( result.getDate() + days );
    return result;
}

// After choosing the start date:
const start = $( "#start_date" ).datepicker( "getDate" );

$( "#end_date" ).datepicker(
    "option",
    {
        minDate: start,
        maxDate: addDays( start, 14 )
    }
);

Demo: fixed range using separate start/end calendars →

Demo: fixed range using a single calendar →

beforeShowDay Top ↑

beforeShowDay runs for each date before its cell is displayed. Return an array with three values:

[
    true,               // selectable?
    "special-date",     // CSS class
    "Available date"    // tooltip text
]

A callback can decide availability:

function checkDate( selectedDate ) {
    const day = selectedDate.getDay();
    const isWeekend = day === 0 || day === 6;

    return [
        !isWeekend,
        isWeekend ? "unavailable-date" : "",
        isWeekend ? "Not available" : "Available"
    ];
}

$( "#date_picker" ).datepicker({
    dateFormat: "dd-mm-yy",
    beforeShowDay: checkDate
});

Demo: disable selected day numbers →

For weekend logic, see the JavaScript getDay() tutorial.

Demo: disable weekends →

Demo: disable fixed dates across different months →

Database-backed availability can populate the unavailable-date list before initializing Datepicker. The event calendar tutorial shows the broader PHP/MySQL application pattern.

Clear or Reset a Datepicker Top ↑

$( "#date_picker" ).datepicker( "setDate", null );

$( "#reset" ).on( "click", function () {
    $( "#date_picker1" )
        .datepicker( "option", {
            minDate: null,
            maxDate: null
        })
        .datepicker( "setDate", null );

    $( "#msg" ).text( "" );
});

Related Datepicker Examples Top ↑

• Difference in days between two selected dates
• Select month and year only
• Use the month/year picker on multiple fields
• Event calendar with PHP and MySQL

Change Datepicker Size Top ↑

.ui-datepicker {
    width: 24em;
}

Keep the Datepicker Visible Top ↑

Use a <div> instead of an input to create an inline Datepicker that stays visible.

<div id="date_picker_inline"></div>

Date and Time with Sliders Top ↑

Demo: date plus hour, minute and second sliders →

Collect a Date in PHP Top ↑

Parse the exact format you expect instead of letting PHP guess the input format.

<?php
$input = $_POST['date_enq'] ?? '';

$date = DateTime::createFromFormat('d-m-Y', $input);

if ($date && $date->format('d-m-Y') === $input) {
    $dateEnquiry = $date->format('Y-m-d');
} else {
    $dateEnquiry = date('Y-m-d');
}
?>

Apply Different Themes Top ↑

jQuery UI themes change the visual style without changing the Datepicker API.

Demo: Datepicker with selectable themes →

← jQuery UI tutorials

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: