jQuery UI & Datepicker: Add alternate date box

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

jQuery UI Datepicker – Populate alternate field

Populate an alternate field with its own date format whenever a date is selected using the altField and altFormat options.

This feature could be used to present a human-friendly date for user selection, while passing a more computer-friendly date through for further processing.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Datepicker - Populate alternate field</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({
                altField: '#alternate',
                altFormat: 'DD, d MM, yy'
            });
        });
    </script>
</head>
<body>

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

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

jQuery UI & Datepicker: Date format

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

jQuery UI Datepicker – Format date

Display date feedback in a variety of ways.

Choose a date format from the dropdown, then click on the input and select a date to see it in that format.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Datepicker - Format date</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();
            $('#format').change(function () {
                $('#datepicker').datepicker('option', 'dateFormat', $(this).val());
            });
        });
    </script>
</head>
<body>

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

<p>Format options:<br>
    <select id='format'>
        <option value='mm/dd/yy'>Default - mm/dd/yy</option>
        <option value='yy-mm-dd'>ISO 8601 - yy-mm-dd</option>
        <option value='d M, y'>Short - d M, y</option>
        <option value='d MM, y'>Medium - d MM, y</option>
        <option value='DD, d MM, yy'>Full - DD, d MM, yy</option>
        <option value=''day' d 'of' MM 'in the year' yy'>With text - 'day' d 'of' MM 'in
            the year' yy
        </option>
    </select>
</p>

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

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'>
<head>
    <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='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#datepicker').datepicker({
                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: Dates in other months

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

jQuery UI Datepicker – Dates in other months

The datepicker can show dates that come from other than the main month being displayed. These other dates can also be made selectable.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Datepicker - Dates in other 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({
                showOtherMonths: true,
                selectOtherMonths: true
            });
        });
    </script>
</head>
<body>

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

</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