jQuery UI & Datepicker: Restrict date range

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

jQuery UI Datepicker – Restrict date range

Restrict the range of selectable dates with the minDate and maxDate options.

Set the beginning and end dates as actual dates (new Date(2009, 1 – 1, 26)), as a numeric offset from today (-20), or as a string of periods and units (‘+1M +10D’).

For the last, use ‘D’ for days, ‘W’ for weeks, ‘M’ for months, or ‘Y’ for years.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Datepicker - Restrict date range</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({ minDate: -20, maxDate: '+1M +10D' });
        });
    </script>
</head>
<body>

<p>Date: <input type='text' id='datepicker'></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: 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: 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: Localize calendar

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

jQuery UI Datepicker – Localize calendar

Localize the datepicker calendar language and format (English / Western formatting is the default).

The datepicker includes built-in support for languages that read right-to-left, such as Arabic and Hebrew.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Datepicker - Localize calendar</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>
    <script src='//jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-ar.js'></script>
    <script src='//jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-fr.js'></script>
    <script src='//jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-he.js'></script>
    <script src='//jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-zh-TW.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#datepicker').datepicker($.datepicker.regional[ 'fr' ]);
            $('#locale').change(function () {
                $('#datepicker').datepicker('option',
                        $.datepicker.regional[ $(this).val() ]);
            });
        });
    </script>
</head>
<body>

<p>Date: <input type='text' id='datepicker'> 
    <select id='locale'>
        <option value='ar'>Arabic (‫(العربية</option>
        <option value='zh-TW'>Chinese Traditional (繁體中文)</option>
        <option value=''>English</option>
        <option value='fr' selected='selected'>French (Français)</option>
        <option value='he'>Hebrew (‫(עברית</option>
    </select></p>

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