O'Reilly logo

jQuery UI Cookbook by Adam Boduch

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Additional calendar data and controls

The datepicker widget has a variety of additional data and control options that may be exposed by the developer using the widget. These are simple Boolean configuration options that turn on the data or the control.

Getting started

Let's prepare two div elements with which we can create two inline datepicker instances.

<div>
    <strong>Regular:</strong>
    <div id="regular"></div>
</div>

<div>
    <strong>Expanded:</strong>
    <div id="expanded"></div>
</div>

How to do it...

Let's create the two datepicker widgets. We're creating two widgets so that we can contrast the differences between a regular datepicker and one with expanded data and controls.

$(function() { $( "#regular" ).datepicker(); $( "#expanded" ).datepicker({ changeYear: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required