jQuery UI & Datepicker: Display multiple months

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

jQuery UI Datepicker – Display multiple months

Set the numberOfMonths option to an integer of 2 or more to show multiple months in a single datepicker.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Datepicker - Display multiple months</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='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function() {
            $( '#datepicker' ).datepicker({
                numberOfMonths: 3,
                showButtonPanel: true
            });
        });
    </script>
</head>
<body>

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

</body>
</html>
Try The Code Datepicker Widgets API Doc

jQuery UI & Datepicker: Display month & year menus

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

jQuery UI Datepicker – Display month & year menus

Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes.

Add the boolean changeMonth and changeYear options.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Datepicker - Display month &amp; year menus</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='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#datepicker').datepicker({
                changeMonth: true,
                changeYear: true
            });
        });
    </script>
</head>
<body>

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

</body>
</html>
Try The Code Datepicker Widgets API Doc

jQuery UI & Datepicker: Display inline

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

jQuery UI Datepicker – Display inline

Display the datepicker embedded in the page instead of in an overlay.

Simply call .datepicker() on a div instead of an input.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Datepicker - Display inline</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='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#datepicker').datepicker();
        });
    </script>
</head>
<body>

Date:
<div id='datepicker'></div>

</body>
</html>
Try The Code Datepicker Widgets API Doc

jQuery UI & Datepicker: Datepicker with animations

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

jQuery UI Datepicker – Animations

Use different animations when opening or closing the datepicker.

Choose an animation from the dropdown, then click on the input to see its effect.

You can use one of the three standard animations or any of the UI Effects.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Datepicker - Animations</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='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#datepicker').datepicker();
            $('#anim').change(function () {
                $('#datepicker').datepicker('option', 'showAnim', $(this).val());
            });
        });
    </script>
</head>
<body>

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

<p>Animations:<br>
    <select id='anim'>
        <option value='show'>Show (default)</option>
        <option value='slideDown'>Slide down</option>
        <option value='fadeIn'>Fade in</option>
        <option value='blind'>Blind (UI Effect)</option>
        <option value='bounce'>Bounce (UI Effect)</option>
        <option value='clip'>Clip (UI Effect)</option>
        <option value='drop'>Drop (UI Effect)</option>
        <option value='fold'>Fold (UI Effect)</option>
        <option value='slide'>Slide (UI Effect)</option>
        <option value=''>None</option>
    </select>
</p>

</body>
</html>
Try The Code Datepicker Widgets API Doc

jQuery UI & Datepicker: Basic datepicker

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

jQuery UI Datepicker – Default functionality

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.

Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close.

If a date is chosen, feedback is shown as the input’s value.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Datepicker - Default functionality</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='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#datepicker').datepicker();
        });
    </script>
</head>
<body>

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

</body>
</html>
Try The Code Datepicker Widgets API Doc