jQuery UI & Datepicker: Display button bar

This entry is part 7 of 14 in the series jQuery UI Datepicker

jQuery UI Datepicker – Display button bar

Display a button for selecting Today’s date and a Done button for closing the calendar with the boolean showButtonPanel option.

Each button is enabled by default when the bar is displayed, but can be turned off with additional options.

Button text is customizable.

<!doctype html>
<html lang='en'>
    <meta charset='utf-8'>
    <title>jQuery UI Datepicker - Display button bar</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='http://codecrawl.com/code/jqueryui/jqueryui_style.css'>
        $(function () {
                showButtonPanel: true

<p>Date: <input type='text' id='datepicker'></p>

Try The Code Datepicker Widgets API Doc
Series Navigation<< jQuery UI & Datepicker: Restrict date range
jQuery UI & Datepicker: Add alternate date box >>

Leave a comment

Leave a Reply