/lib/style/common/jquery/jqueryui/development-bundle/docs/datepicker.html - Annotate - Metacat - Ecoinformatics Redmine

5703

leinfelder

<ul class="UIAPIPlugin-toc">

3

<li><a href="#overview">Overview</a></li>

4

<li><a href="#options">Options</a></li>

5

<li><a href="#events">Events</a></li>

6

<li><a href="#methods">Methods</a></li>

7

<li><a href="#theming">Theming</a></li>

8

</ul>

9

<div class="UIAPIPlugin">

10

  <h1>jQuery UI Datepicker</h1>

11

  <div id="overview">

12

    <h2 class="top-header">Overview</h2>

13

    <div id="overview-main">

14

        <p>The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.</p>

15

<p>By default, the datepicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date is selected. For an inline calendar, simply attach the datepicker to a div or span.

16

</p><p>You can use keyboard shortcuts to drive the datepicker:

17

</p>

18

<ul>

19

 <li>page up/down - previous/next month</li>

20

 <li>ctrl+page up/down - previous/next year</li>

21

 <li>ctrl+home - current month or open when closed</li>

22

 <li>ctrl+left/right - previous/next day</li>

23

 <li>ctrl+up/down - previous/next week</li>

24

 <li>enter - accept the selected date</li>

25

 <li>ctrl+end - close and erase the date</li>

26

 <li>escape - close the datepicker without selection</li>

27

</ul>

28

<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/UI/API/1.8/Datepicker?section=1" title="Edit section: Utility functions">edit</a>]</div><a name="Utility_functions"></a><h3 id="utility-functions">Utility functions</h3>

29

<ul>

30

 <li><a href="http://docs.jquery.com/UI/Datepicker/setDefaults" title="UI/Datepicker/setDefaults">$.datepicker.setDefaults( settings )</a> - Set settings for all datepicker instances.</li>

31

 <li><a href="http://docs.jquery.com/UI/Datepicker/formatDate" title="UI/Datepicker/formatDate">$.datepicker.formatDate( format, date, settings )</a> - Format a date into a string value with a specified format.</li>

32

 <li><a href="http://docs.jquery.com/UI/Datepicker/parseDate" title="UI/Datepicker/parseDate">$.datepicker.parseDate( format, value, settings ) </a> - Extract a date from a string value with a specified format.</li>

33

 <li><a href="http://docs.jquery.com/UI/Datepicker/iso8601Week" title="UI/Datepicker/iso8601Week">$.datepicker.iso8601Week( date )</a> - Determine the week of the year for a given date: 1 to 53.</li>

34

 <li><a href="http://docs.jquery.com/UI/Datepicker/noWeekends" title="UI/Datepicker/noWeekends">$.datepicker.noWeekends</a> - Set as beforeShowDay function to prevent selection of weekends.</li>

35

</ul>

36

<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/UI/API/1.8/Datepicker?section=2" title="Edit section: Localization">edit</a>]</div><a name="Localization"></a><h3>Localization</h3>

37

<p>Datepicker provides support for localizing its content to cater for different languages

38

	and date formats. Each localization is contained within its own file with the

39

	language code appended to the name, e.g. <code>jquery.ui.datepicker-fr.js</code> for French.

40

	The desired localization file should be include after the main datepicker code. They add their settings to the set

41

	of available localizations and automatically apply them as defaults for all instances.</p>

42

<p>The <code>$.datepicker.regional</code> attribute holds an array of localizations,

43

	indexed by language code, with '' referring to the default (English). Each entry is

44

	an object with the following attributes: <code>closeText</code>, <code>prevText</code>,

45

	<code>nextText</code>, <code>currentText</code>, <code>monthNames</code>,

46

	<code>monthNamesShort</code>, <code>dayNames</code>, <code>dayNamesShort</code>,

47

	<code>dayNamesMin</code>, <code>weekHeader</code>, <code>dateFormat</code>,

48

	<code>firstDay</code>, <code>isRTL</code>, <code>showMonthAfterYear</code>,

49

	and <code>yearSuffix</code>.</p>

50

<p>You can restore the default localizations with:</p>

51

<p><code>$.datepicker.setDefaults($.datepicker.regional['']);</code>

52

</p>

53

<p>And can then override an individual datepicker for a specific locale:</p>

54

<p><code>$(selector).datepicker($.datepicker.regional['fr']);</code>

55

</p>

56

The localization files are also available in the UI svn: <a href="http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/" class="external free" title="http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/">http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/</a>

57

    </div>

58

    <div id="overview-dependencies">

59

        <h3>Dependencies</h3>

60

        <ul>

61

<li>UI Core</li>

62

</ul>

63

    </div>

64

    <div id="overview-example">

65

        <h3>Example</h3>

66

        <div id="overview-example" class="example">

67

<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>

68

<p><div id="demo" class="tabs-container" rel="220">

69

A simple jQuery UI Datepicker.<br />

70

</p>

71

<pre>$(&quot;#datepicker&quot;).datepicker();

72

</pre>

73

<p></div><div id="source" class="tabs-container">

74

</p>

75

<pre>&lt;!DOCTYPE html&gt;

76

&lt;html&gt;

77

&lt;head&gt;

78

  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;

79

  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&quot;&gt;&lt;/script&gt;

80

  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;

81

82

  &lt;script&gt;

83

  $(document).ready(function() {

84

    $(&quot;#datepicker&quot;).datepicker();

85

});

86

  &lt;/script&gt;

87

&lt;/head&gt;

88

&lt;body style="font-size:62.5%;"&gt;

89

90

&lt;div type=&quot;text&quot; id=&quot;datepicker&quot;&gt;&lt;/div&gt;

91

92

&lt;/body&gt;

93

&lt;/html&gt;

94

</pre>

95

<p></div>

96

</p><p></div>

97

    </div>

98

  </div>

99

  <div id="options">

100

    <h2 class="top-header">Options</h2>

101

    <ul class="options-list">

102

103

<li class="option" id="option-disabled">

104

  <div class="option-header">

105

    <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>

106

    <dl>

107

      <dt class="option-type-label">Type:</dt>

108

        <dd class="option-type">Boolean</dd>

109

110

      <dt class="option-default-label">Default:</dt>

111

        <dd class="option-default">false</dd>

112

113

    </dl>

114

  </div>

115

  <div class="option-description">

116

    <p>Disables (true) or enables (false) the datepicker. Can be set when initialising (first creating) the datepicker.</p>

117

  </div>

118

  <div class="option-examples">

119

    <h4>Code examples</h4>

120

    <dl class="option-examples-list">

121

122

<dt>

123

  Initialize a datepicker with the <code>disabled</code> option specified.

124

</dt>

125

<dd>

126

<pre><code>$( ".selector" ).datepicker({ disabled: true });</code></pre>

127

</dd>

128

129

130

<dt>

131

  Get or set the <code>disabled</code> option, after init.

132

</dt>

133

<dd>

134

<pre><code>//getter

135

var disabled = $( ".selector" ).datepicker( "option", "disabled" );

136

//setter

137

$( ".selector" ).datepicker( "option", "disabled", true );</code></pre>

138

</dd>

139

140

    </dl>

141

  </div>

142

</li>

143

144

145

<li class="option" id="option-altField">

146

  <div class="option-header">

147

    <h3 class="option-name"><a href="#option-altField">altField</a></h3>

148

    <dl>

149

      <dt class="option-type-label">Type:</dt>

150

        <dd class="option-type">Selector, jQuery, Element</dd>

151

152

      <dt class="option-default-label">Default:</dt>

153

        <dd class="option-default">''</dd>

154

155

    </dl>

156

  </div>

157

  <div class="option-description">

158

    <p>The jQuery selector for another field that is to be updated with the selected date from the datepicker. Use the <code><a href="http://docs.jquery.com/UI/Datepicker#option-altFormat" title="UI/Datepicker">altFormat</a></code> setting to change the format of the date within this field. Leave as blank for no alternate field.</p>

159

  </div>

160

  <div class="option-examples">

161

    <h4>Code examples</h4>

162

    <dl class="option-examples-list">

163

164

<dt>

165

  Initialize a datepicker with the <code>altField</code> option specified.

166

</dt>

167

<dd>

168

<pre><code>$( ".selector" ).datepicker({ altField: '#actualDate' });</code></pre>

169

</dd>

170

171

172

<dt>

173

  Get or set the <code>altField</code> option, after init.

174

</dt>

175

<dd>

176

<pre><code>//getter

177

var altField = $( ".selector" ).datepicker( "option", "altField" );

178

//setter

179

$( ".selector" ).datepicker( "option", "altField", '#actualDate' );</code></pre>

180

</dd>

181

182

    </dl>

183

  </div>

184

</li>

185

186

187

<li class="option" id="option-altFormat">

188

  <div class="option-header">

189

    <h3 class="option-name"><a href="#option-altFormat">altFormat</a></h3>

190

    <dl>

191

      <dt class="option-type-label">Type:</dt>

192

        <dd class="option-type">String</dd>

193

194

      <dt class="option-default-label">Default:</dt>

195

        <dd class="option-default">''</dd>

196

197

    </dl>

198

  </div>

199

  <div class="option-description">

200

    <p>The <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code> to be used for the <code><a href="http://docs.jquery.com/UI/Datepicker#option-altField" title="UI/Datepicker">altField</a></code> option. This allows one date format to be shown to the user for selection purposes, while a different format is actually sent behind the scenes. For a full list of the possible formats see the <a href="http://docs.jquery.com/UI/Datepicker/formatDate" title="UI/Datepicker/formatDate">formatDate</a> function</p>

201

  </div>

202

  <div class="option-examples">

203

    <h4>Code examples</h4>

204

    <dl class="option-examples-list">

205

206

<dt>

207

  Initialize a datepicker with the <code>altFormat</code> option specified.

208

</dt>

209

<dd>

210

<pre><code>$( ".selector" ).datepicker({ altFormat: 'yy-mm-dd' });</code></pre>

211

</dd>

212

213

214

<dt>

215

  Get or set the <code>altFormat</code> option, after init.

216

</dt>

217

<dd>

218

<pre><code>//getter

219

var altFormat = $( ".selector" ).datepicker( "option", "altFormat" );

220

//setter

221

$( ".selector" ).datepicker( "option", "altFormat", 'yy-mm-dd' );</code></pre>

222

</dd>

223

224

    </dl>

225

  </div>

226

</li>

227

228

229

<li class="option" id="option-appendText">

230

  <div class="option-header">

231

    <h3 class="option-name"><a href="#option-appendText">appendText</a></h3>

232

    <dl>

233

      <dt class="option-type-label">Type:</dt>

234

        <dd class="option-type">String</dd>

235

236

      <dt class="option-default-label">Default:</dt>

237

        <dd class="option-default">''</dd>

238

239

    </dl>

240

  </div>

241

  <div class="option-description">

242

    <p>The text to display after each date field, e.g. to show the required format.</p>

243

  </div>

244

  <div class="option-examples">

245

    <h4>Code examples</h4>

246

    <dl class="option-examples-list">

247

248

<dt>

249

  Initialize a datepicker with the <code>appendText</code> option specified.

250

</dt>

251

<dd>

252

<pre><code>$( ".selector" ).datepicker({ appendText: '(yyyy-mm-dd)' });</code></pre>

253

</dd>

254

255

256

<dt>

257

  Get or set the <code>appendText</code> option, after init.

258

</dt>

259

<dd>

260

<pre><code>//getter

261

var appendText = $( ".selector" ).datepicker( "option", "appendText" );

262

//setter

263

$( ".selector" ).datepicker( "option", "appendText", '(yyyy-mm-dd)' );</code></pre>

264

</dd>

265

266

    </dl>

267

  </div>

268

</li>

269

270

271

<li class="option" id="option-autoSize">

272

  <div class="option-header">

273

    <h3 class="option-name"><a href="#option-autoSize">autoSize</a></h3>

274

    <dl>

275

      <dt class="option-type-label">Type:</dt>

276

        <dd class="option-type">Boolean</dd>

277

278

      <dt class="option-default-label">Default:</dt>

279

        <dd class="option-default">false</dd>

280

281

    </dl>

282

  </div>

283

  <div class="option-description">

284

    <p>Set to true to automatically resize the input field to accomodate dates in the current <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code>.</p>

285

  </div>

286

  <div class="option-examples">

287

    <h4>Code examples</h4>

288

    <dl class="option-examples-list">

289

290

<dt>

291

  Initialize a datepicker with the <code>autoSize</code> option specified.

292

</dt>

293

<dd>

294

<pre><code>$( ".selector" ).datepicker({ autoSize: true });</code></pre>

295

</dd>

296

297

298

<dt>

299

  Get or set the <code>autoSize</code> option, after init.

300

</dt>

301

<dd>

302

<pre><code>//getter

303

var autoSize = $( ".selector" ).datepicker( "option", "autoSize" );

304

//setter

305

$( ".selector" ).datepicker( "option", "autoSize", true );</code></pre>

306

</dd>

307

308

    </dl>

309

  </div>

310

</li>

311

312

313

<li class="option" id="option-buttonImage">

314

  <div class="option-header">

315

    <h3 class="option-name"><a href="#option-buttonImage">buttonImage</a></h3>

316

    <dl>

317

      <dt class="option-type-label">Type:</dt>

318

        <dd class="option-type">String</dd>

319

320

      <dt class="option-default-label">Default:</dt>

321

        <dd class="option-default">''</dd>

322

323

    </dl>

324

  </div>

325

  <div class="option-description">

326

    <p>The URL for the popup button image. If set, <code><a href="http://docs.jquery.com/UI/Datepicker#option-buttonText" title="UI/Datepicker">buttonText</a></code> becomes the <i>alt</i> value and is not directly displayed.</p>

327

  </div>

328

  <div class="option-examples">

329

    <h4>Code examples</h4>

330

    <dl class="option-examples-list">

331

332

<dt>

333

  Initialize a datepicker with the <code>buttonImage</code> option specified.

334

</dt>

335

<dd>

336

<pre><code>$( ".selector" ).datepicker({ buttonImage: '/images/datepicker.gif' });</code></pre>

337

</dd>

338

339

340

<dt>

341

  Get or set the <code>buttonImage</code> option, after init.

342

</dt>

343

<dd>

344

<pre><code>//getter

345

var buttonImage = $( ".selector" ).datepicker( "option", "buttonImage" );

346

//setter

347

$( ".selector" ).datepicker( "option", "buttonImage", '/images/datepicker.gif' );</code></pre>

348

</dd>

349

350

    </dl>

351

  </div>

352

</li>

353

354

355

<li class="option" id="option-buttonImageOnly">

356

  <div class="option-header">

357

    <h3 class="option-name"><a href="#option-buttonImageOnly">buttonImageOnly</a></h3>

358

    <dl>

359

      <dt class="option-type-label">Type:</dt>

360

        <dd class="option-type">Boolean</dd>

361

362

      <dt class="option-default-label">Default:</dt>

363

        <dd class="option-default">false</dd>

364

365

    </dl>

366

  </div>

367

  <div class="option-description">

368

    <p>Set to true to place an image after the field to use as the trigger without it appearing on a button.</p>

369

  </div>

370

  <div class="option-examples">

371

    <h4>Code examples</h4>

372

    <dl class="option-examples-list">

373

374

<dt>

375

  Initialize a datepicker with the <code>buttonImageOnly</code> option specified.

376

</dt>

377

<dd>

378

<pre><code>$( ".selector" ).datepicker({ buttonImageOnly: true });</code></pre>

379

</dd>

380

381

382

<dt>

383

  Get or set the <code>buttonImageOnly</code> option, after init.

384

</dt>

385

<dd>

386

<pre><code>//getter

387

var buttonImageOnly = $( ".selector" ).datepicker( "option", "buttonImageOnly" );

388

//setter

389

$( ".selector" ).datepicker( "option", "buttonImageOnly", true );</code></pre>

390

</dd>

391

392

    </dl>

393

  </div>

394

</li>

395

396

397

<li class="option" id="option-buttonText">

398

  <div class="option-header">

399

    <h3 class="option-name"><a href="#option-buttonText">buttonText</a></h3>

400

    <dl>

401

      <dt class="option-type-label">Type:</dt>

402

        <dd class="option-type">String</dd>

403

404

      <dt class="option-default-label">Default:</dt>

405

        <dd class="option-default">'...'</dd>

406

407

    </dl>

408

  </div>

409

  <div class="option-description">

410

    <p>The text to display on the trigger button. Use in conjunction with <code><a href="http://docs.jquery.com/UI/Datepicker#option-showOn" title="UI/Datepicker">showOn</a></code> equal to 'button' or 'both'.</p>

411

  </div>

412

  <div class="option-examples">

413

    <h4>Code examples</h4>

414

    <dl class="option-examples-list">

415

416

<dt>

417

  Initialize a datepicker with the <code>buttonText</code> option specified.

418

</dt>

419

<dd>

420

<pre><code>$( ".selector" ).datepicker({ buttonText: 'Choose' });</code></pre>

421

</dd>

422

423

424

<dt>

425

  Get or set the <code>buttonText</code> option, after init.

426

</dt>

427

<dd>

428

<pre><code>//getter

429

var buttonText = $( ".selector" ).datepicker( "option", "buttonText" );

430

//setter

431

$( ".selector" ).datepicker( "option", "buttonText", 'Choose' );</code></pre>

432

</dd>

433

434

    </dl>

435

  </div>

436

</li>

437

438

439

<li class="option" id="option-calculateWeek">

440

  <div class="option-header">

441

    <h3 class="option-name"><a href="#option-calculateWeek">calculateWeek</a></h3>

442

    <dl>

443

      <dt class="option-type-label">Type:</dt>

444

        <dd class="option-type">Function</dd>

445

446

      <dt class="option-default-label">Default:</dt>

447

        <dd class="option-default">$.datepicker.iso8601Week</dd>

448

449

    </dl>

450

  </div>

451

  <div class="option-description">

452

    <p>A function to calculate the week of the year for a given date. The default implementation uses the ISO 8601 definition: weeks start on a Monday; the first week of the year contains the first Thursday of the year.</p>

453

  </div>

454

  <div class="option-examples">

455

    <h4>Code examples</h4>

456

    <dl class="option-examples-list">

457

458

<dt>

459

  Initialize a datepicker with the <code>calculateWeek</code> option specified.

460

</dt>

461

<dd>

462

<pre><code>$( ".selector" ).datepicker({ calculateWeek: myWeekCalc });</code></pre>

463

</dd>

464

465

466

<dt>

467

  Get or set the <code>calculateWeek</code> option, after init.

468

</dt>

469

<dd>

470

<pre><code>//getter

471

var calculateWeek = $( ".selector" ).datepicker( "option", "calculateWeek" );

472

//setter

473

$( ".selector" ).datepicker( "option", "calculateWeek", myWeekCalc );</code></pre>

474

</dd>

475

476

    </dl>

477

  </div>

478

</li>

479

480

481

<li class="option" id="option-changeMonth">

482

  <div class="option-header">

483

    <h3 class="option-name"><a href="#option-changeMonth">changeMonth</a></h3>

484

    <dl>

485

      <dt class="option-type-label">Type:</dt>

486

        <dd class="option-type">Boolean</dd>

487

488

      <dt class="option-default-label">Default:</dt>

489

        <dd class="option-default">false</dd>

490

491

    </dl>

492

  </div>

493

  <div class="option-description">

494

    <p>Allows you to change the month by selecting from a drop-down list. You can enable this feature by setting the attribute to true.</p>

495

  </div>

496

  <div class="option-examples">

497

    <h4>Code examples</h4>

498

    <dl class="option-examples-list">

499

500

<dt>

501

  Initialize a datepicker with the <code>changeMonth</code> option specified.

502

</dt>

503

<dd>

504

<pre><code>$( ".selector" ).datepicker({ changeMonth: true });</code></pre>

505

</dd>

506

507

508

<dt>

509

  Get or set the <code>changeMonth</code> option, after init.

510

</dt>

511

<dd>

512

<pre><code>//getter

513

var changeMonth = $( ".selector" ).datepicker( "option", "changeMonth" );

514

//setter

515

$( ".selector" ).datepicker( "option", "changeMonth", true );</code></pre>

516

</dd>

517

518

    </dl>

519

  </div>

520

</li>

521

522

523

<li class="option" id="option-changeYear">

524

  <div class="option-header">

525

    <h3 class="option-name"><a href="#option-changeYear">changeYear</a></h3>

526

    <dl>

527

      <dt class="option-type-label">Type:</dt>

528

        <dd class="option-type">Boolean</dd>

529

530

      <dt class="option-default-label">Default:</dt>

531

        <dd class="option-default">false</dd>

532

533

    </dl>

534

  </div>

535

  <div class="option-description">

536

    <p>Allows you to change the year by selecting from a drop-down list. You can enable this feature by setting the attribute to true. Use the <code><a href="http://docs.jquery.com/UI/Datepicker#option-yearRange" title="UI/Datepicker">yearRange</a></code> option to control which years are made available for selection.</p>

537

  </div>

538

  <div class="option-examples">

539

    <h4>Code examples</h4>

540

    <dl class="option-examples-list">

541

542

<dt>

543

  Initialize a datepicker with the <code>changeYear</code> option specified.

544

</dt>

545

<dd>

546

<pre><code>$( ".selector" ).datepicker({ changeYear: true });</code></pre>

547

</dd>

548

549

550

<dt>

551

  Get or set the <code>changeYear</code> option, after init.

552

</dt>

553

<dd>

554

<pre><code>//getter

555

var changeYear = $( ".selector" ).datepicker( "option", "changeYear" );

556

//setter

557

$( ".selector" ).datepicker( "option", "changeYear", true );</code></pre>

558

</dd>

559

560

    </dl>

561

  </div>

562

</li>

563

564

565

<li class="option" id="option-closeText">

566

  <div class="option-header">

567

    <h3 class="option-name"><a href="#option-closeText">closeText</a></h3>

568

    <dl>

569

      <dt class="option-type-label">Type:</dt>

570

        <dd class="option-type">String</dd>

571

572

      <dt class="option-default-label">Default:</dt>

573

        <dd class="option-default">'Done'</dd>

574

575

    </dl>

576

  </div>

577

  <div class="option-description">

578

    <p>The text to display for the close link. This attribute is one of the regionalisation attributes. Use the <code><a href="http://docs.jquery.com/UI/Datepicker#option-showButtonPanel" title="UI/Datepicker">showButtonPanel</a></code> to display this button.</p>

579

  </div>

580

  <div class="option-examples">

581

    <h4>Code examples</h4>

582

    <dl class="option-examples-list">

583

584

<dt>

585

  Initialize a datepicker with the <code>closeText</code> option specified.

586

</dt>

587

<dd>

588

<pre><code>$( ".selector" ).datepicker({ closeText: 'X' });</code></pre>

589

</dd>

590

591

592

<dt>

593

  Get or set the <code>closeText</code> option, after init.

594

</dt>

595

<dd>

596

<pre><code>//getter

597

var closeText = $( ".selector" ).datepicker( "option", "closeText" );

598

//setter

599

$( ".selector" ).datepicker( "option", "closeText", 'X' );</code></pre>

600

</dd>

601

602

    </dl>

603

  </div>

604

</li>

605

606

607

<li class="option" id="option-constrainInput">

608

  <div class="option-header">

609

    <h3 class="option-name"><a href="#option-constrainInput">constrainInput</a></h3>

610

    <dl>

611

      <dt class="option-type-label">Type:</dt>

612

        <dd class="option-type">Boolean</dd>

613

614

      <dt class="option-default-label">Default:</dt>

615

        <dd class="option-default">true</dd>

616

617

    </dl>

618

  </div>

619

  <div class="option-description">

620

    <p>When true entry in the input field is constrained to those characters allowed by the current <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code>.</p>

621

  </div>

622

  <div class="option-examples">

623

    <h4>Code examples</h4>

624

    <dl class="option-examples-list">

625

626

<dt>

627

  Initialize a datepicker with the <code>constrainInput</code> option specified.

628

</dt>

629

<dd>

630

<pre><code>$( ".selector" ).datepicker({ constrainInput: false });</code></pre>

631

</dd>

632

633

634

<dt>

635

  Get or set the <code>constrainInput</code> option, after init.

636

</dt>

637

<dd>

638

<pre><code>//getter

639

var constrainInput = $( ".selector" ).datepicker( "option", "constrainInput" );

640

//setter

641

$( ".selector" ).datepicker( "option", "constrainInput", false );</code></pre>

642

</dd>

643

644

    </dl>

645

  </div>

646

</li>

647

648

649

<li class="option" id="option-currentText">

650

  <div class="option-header">

651

    <h3 class="option-name"><a href="#option-currentText">currentText</a></h3>

652

    <dl>

653

      <dt class="option-type-label">Type:</dt>

654

        <dd class="option-type">String</dd>

655

656

      <dt class="option-default-label">Default:</dt>

657

        <dd class="option-default">'Today'</dd>

658

659

    </dl>

660

  </div>

661

  <div class="option-description">

662

    <p>The text to display for the current day link. This attribute is one of the regionalisation attributes. Use the <code><a href="http://docs.jquery.com/UI/Datepicker#option-showButtonPanel" title="UI/Datepicker">showButtonPanel</a></code> to display this button.</p>

663

  </div>

664

  <div class="option-examples">

665

    <h4>Code examples</h4>

666

    <dl class="option-examples-list">

667

668

<dt>

669

  Initialize a datepicker with the <code>currentText</code> option specified.

670

</dt>

671

<dd>

672

<pre><code>$( ".selector" ).datepicker({ currentText: 'Now' });</code></pre>

673

</dd>

674

675

676

<dt>

677

  Get or set the <code>currentText</code> option, after init.

678

</dt>

679

<dd>

680

<pre><code>//getter

681

var currentText = $( ".selector" ).datepicker( "option", "currentText" );

682

//setter

683

$( ".selector" ).datepicker( "option", "currentText", 'Now' );</code></pre>

684

</dd>

685

686

    </dl>

687

  </div>

688

</li>

689

690

691

<li class="option" id="option-dateFormat">

692

  <div class="option-header">

693

    <h3 class="option-name"><a href="#option-dateFormat">dateFormat</a></h3>

694

    <dl>

695

      <dt class="option-type-label">Type:</dt>

696

        <dd class="option-type">String</dd>

697

698

      <dt class="option-default-label">Default:</dt>

699

        <dd class="option-default">'mm/dd/yy'</dd>

700

701

    </dl>

702

  </div>

703

  <div class="option-description">

704

    <p>The format for parsed and displayed dates. This attribute is one of the regionalisation attributes. For a full list of the possible formats see the <code><a href="http://docs.jquery.com/UI/Datepicker/formatDate" title="UI/Datepicker/formatDate">formatDate</a></code> function.</p>

705

  </div>

706

  <div class="option-examples">

707

    <h4>Code examples</h4>

708

    <dl class="option-examples-list">

709

710

<dt>

711

  Initialize a datepicker with the <code>dateFormat</code> option specified.

712

</dt>

713

<dd>

714

<pre><code>$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });</code></pre>

715

</dd>

716

717

718

<dt>

719

  Get or set the <code>dateFormat</code> option, after init.

720

</dt>

721

<dd>

722

<pre><code>//getter

723

var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );

724

//setter

725

$( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );</code></pre>

726

</dd>

727

728

    </dl>

729

  </div>

730

</li>

731

732

733

<li class="option" id="option-dayNames">

734

  <div class="option-header">

735

    <h3 class="option-name"><a href="#option-dayNames">dayNames</a></h3>

736

    <dl>

737

      <dt class="option-type-label">Type:</dt>

738

        <dd class="option-type">Array</dd>

739

740

      <dt class="option-default-label">Default:</dt>

741

        <dd class="option-default">['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']</dd>

742

743

    </dl>

744

  </div>

745

  <div class="option-description">

746

    <p>The list of long day names, starting from Sunday, for use as requested via the <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code> setting. They also appear as popup hints when hovering over the corresponding column headings. This attribute is one of the regionalisation attributes.</p>

747

  </div>

748

  <div class="option-examples">

749

    <h4>Code examples</h4>

750

    <dl class="option-examples-list">

751

752

<dt>

753

  Initialize a datepicker with the <code>dayNames</code> option specified.

754

</dt>

755

<dd>

756

<pre><code>$( ".selector" ).datepicker({ dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] });</code></pre>

757

</dd>

758

759

760

<dt>

761

  Get or set the <code>dayNames</code> option, after init.

762

</dt>

763

<dd>

764

<pre><code>//getter

765

var dayNames = $( ".selector" ).datepicker( "option", "dayNames" );

766

//setter

767

$( ".selector" ).datepicker( "option", "dayNames", ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] );</code></pre>

768

</dd>

769

770

    </dl>

771

  </div>

772

</li>

773

774

775

<li class="option" id="option-dayNamesMin">

776

  <div class="option-header">

777

    <h3 class="option-name"><a href="#option-dayNamesMin">dayNamesMin</a></h3>

778

    <dl>

779

      <dt class="option-type-label">Type:</dt>

780

        <dd class="option-type">Array</dd>

781

782

      <dt class="option-default-label">Default:</dt>

783

        <dd class="option-default">['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']</dd>

784

785

    </dl>

786

  </div>

787

  <div class="option-description">

788

    <p>The list of minimised day names, starting from Sunday, for use as column headers within the datepicker. This attribute is one of the regionalisation attributes.</p>

789

  </div>

790

  <div class="option-examples">

791

    <h4>Code examples</h4>

792

    <dl class="option-examples-list">

793

794

<dt>

795

  Initialize a datepicker with the <code>dayNamesMin</code> option specified.

796

</dt>

797

<dd>

798

<pre><code>$( ".selector" ).datepicker({ dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] });</code></pre>

799

</dd>

800

801

802

<dt>

803

  Get or set the <code>dayNamesMin</code> option, after init.

804

</dt>

805

<dd>

806

<pre><code>//getter

807

var dayNamesMin = $( ".selector" ).datepicker( "option", "dayNamesMin" );

808

//setter

809

$( ".selector" ).datepicker( "option", "dayNamesMin", ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] );</code></pre>

810

</dd>

811

812

    </dl>

813

  </div>

814

</li>

815

816

817

<li class="option" id="option-dayNamesShort">

818

  <div class="option-header">

819

    <h3 class="option-name"><a href="#option-dayNamesShort">dayNamesShort</a></h3>

820

    <dl>

821

      <dt class="option-type-label">Type:</dt>

822

        <dd class="option-type">Array</dd>

823

824

      <dt class="option-default-label">Default:</dt>

825

        <dd class="option-default">['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']</dd>

826

827

    </dl>

828

  </div>

829

  <div class="option-description">

830

    <p>The list of abbreviated day names, starting from Sunday, for use as requested via the <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code> setting. This attribute is one of the regionalisation attributes.</p>

831

  </div>

832

  <div class="option-examples">

833

    <h4>Code examples</h4>

834

    <dl class="option-examples-list">

835

836

<dt>

837

  Initialize a datepicker with the <code>dayNamesShort</code> option specified.

838

</dt>

839

<dd>

840

<pre><code>$( ".selector" ).datepicker({ dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] });</code></pre>

841

</dd>

842

843

844

<dt>

845

  Get or set the <code>dayNamesShort</code> option, after init.

846

</dt>

847

<dd>

848

<pre><code>//getter

849

var dayNamesShort = $( ".selector" ).datepicker( "option", "dayNamesShort" );

850

//setter

851

$( ".selector" ).datepicker( "option", "dayNamesShort", ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] );</code></pre>

852

</dd>

853

854

    </dl>

855

  </div>

856

</li>

857

858

859

<li class="option" id="option-defaultDate">

860

  <div class="option-header">

861

    <h3 class="option-name"><a href="#option-defaultDate">defaultDate</a></h3>

862

    <dl>

863

      <dt class="option-type-label">Type:</dt>

864

        <dd class="option-type">Date, Number, String</dd>

865

866

      <dt class="option-default-label">Default:</dt>

867

        <dd class="option-default">null</dd>

868

869

    </dl>

870

  </div>

871

  <div class="option-description">

872

    <p>Set the date to highlight on first opening if the field is blank. Specify either an actual date via a Date object or as a string in the current <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code>, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null for today.</p>

873

  </div>

874

  <div class="option-examples">

875

    <h4>Code examples</h4>

876

    <dl class="option-examples-list">

877

878

<dt>

879

  Initialize a datepicker with the <code>defaultDate</code> option specified.

880

</dt>

881

<dd>

882

<pre><code>$( ".selector" ).datepicker({ defaultDate: +7 });</code></pre>

883

</dd>

884

885

886

<dt>

887

  Get or set the <code>defaultDate</code> option, after init.

888

</dt>

889

<dd>

890

<pre><code>//getter

891

var defaultDate = $( ".selector" ).datepicker( "option", "defaultDate" );

892

//setter

893

$( ".selector" ).datepicker( "option", "defaultDate", +7 );</code></pre>

894

</dd>

895

896

    </dl>

897

  </div>

898

</li>

899

900

901

<li class="option" id="option-duration">

902

  <div class="option-header">

903

    <h3 class="option-name"><a href="#option-duration">duration</a></h3>

904

    <dl>

905

      <dt class="option-type-label">Type:</dt>

906

        <dd class="option-type">String, Number</dd>

907

908

      <dt class="option-default-label">Default:</dt>

909

        <dd class="option-default">'normal'</dd>

910

911

    </dl>

912

  </div>

913

  <div class="option-description">

914

    <p>Control the speed at which the datepicker appears, it may be a time in milliseconds or a string representing one of the three predefined speeds ("slow", "normal", "fast").</p>

915

  </div>

916

  <div class="option-examples">

917

    <h4>Code examples</h4>

918

    <dl class="option-examples-list">

919

920

<dt>

921

  Initialize a datepicker with the <code>duration</code> option specified.

922

</dt>

923

<dd>

924

<pre><code>$( ".selector" ).datepicker({ duration: 'slow' });</code></pre>

925

</dd>

926

927

928

<dt>

929

  Get or set the <code>duration</code> option, after init.

930

</dt>

931

<dd>

932

<pre><code>//getter

933

var duration = $( ".selector" ).datepicker( "option", "duration" );

934

//setter

935

$( ".selector" ).datepicker( "option", "duration", 'slow' );</code></pre>

936

</dd>

937

938

    </dl>

939

  </div>

940

</li>

941

942

943

<li class="option" id="option-firstDay">

944

  <div class="option-header">

945

    <h3 class="option-name"><a href="#option-firstDay">firstDay</a></h3>

946

    <dl>

947

      <dt class="option-type-label">Type:</dt>

948

        <dd class="option-type">Number</dd>

949

950

      <dt class="option-default-label">Default:</dt>

951

        <dd class="option-default">0</dd>

952

953

    </dl>

954

  </div>

955

  <div class="option-description">

956

    <p>Set the first day of the week: Sunday is 0, Monday is 1, ... This attribute is one of the regionalisation attributes.</p>

957

  </div>

958

  <div class="option-examples">

959

    <h4>Code examples</h4>

960

    <dl class="option-examples-list">

961

962

<dt>

963

  Initialize a datepicker with the <code>firstDay</code> option specified.

964

</dt>

965

<dd>

966

<pre><code>$( ".selector" ).datepicker({ firstDay: 1 });</code></pre>

967

</dd>

968

969

970

<dt>

971

  Get or set the <code>firstDay</code> option, after init.

972

</dt>

973

<dd>

974

<pre><code>//getter

975

var firstDay = $( ".selector" ).datepicker( "option", "firstDay" );

976

//setter

977

$( ".selector" ).datepicker( "option", "firstDay", 1 );</code></pre>

978

</dd>

979

980

    </dl>

981

  </div>

982

</li>

983

984

985

<li class="option" id="option-gotoCurrent">

986

  <div class="option-header">

987

    <h3 class="option-name"><a href="#option-gotoCurrent">gotoCurrent</a></h3>

988

    <dl>

989

      <dt class="option-type-label">Type:</dt>

990

        <dd class="option-type">Boolean</dd>

991

992

      <dt class="option-default-label">Default:</dt>

993

        <dd class="option-default">false</dd>

994

995

    </dl>

996

  </div>

997

  <div class="option-description">

998

    <p>When true the current day link moves to the currently selected date instead of today.</p>

999

  </div>

1000

  <div class="option-examples">

1001

    <h4>Code examples</h4>

1002

    <dl class="option-examples-list">

1003

1004

<dt>

1005

  Initialize a datepicker with the <code>gotoCurrent</code> option specified.

1006

</dt>

1007

<dd>

1008

<pre><code>$( ".selector" ).datepicker({ gotoCurrent: true });</code></pre>

1009

</dd>

1010

1011

1012

<dt>

1013

  Get or set the <code>gotoCurrent</code> option, after init.

1014

</dt>

1015

<dd>

1016

<pre><code>//getter

1017

var gotoCurrent = $( ".selector" ).datepicker( "option", "gotoCurrent" );

1018

//setter

1019

$( ".selector" ).datepicker( "option", "gotoCurrent", true );</code></pre>

1020

</dd>

1021

1022

    </dl>

1023

  </div>

1024

</li>

1025

1026

1027

<li class="option" id="option-hideIfNoPrevNext">

1028

  <div class="option-header">

1029

    <h3 class="option-name"><a href="#option-hideIfNoPrevNext">hideIfNoPrevNext</a></h3>

1030

    <dl>

1031

      <dt class="option-type-label">Type:</dt>

1032

        <dd class="option-type">Boolean</dd>

1033

1034

      <dt class="option-default-label">Default:</dt>

1035

        <dd class="option-default">false</dd>

1036

1037

    </dl>

1038

  </div>

1039

  <div class="option-description">

1040

    <p>Normally the previous and next links are disabled when not applicable (see <code><a href="http://docs.jquery.com/UI/Datepicker#option-minDate" title="UI/Datepicker">minDate</a></code>/<code><a href="http://docs.jquery.com/UI/Datepicker#option-maxDate" title="UI/Datepicker">maxDate</a></code>). You can hide them altogether by setting this attribute to true.</p>

1041

  </div>

1042

  <div class="option-examples">

1043

    <h4>Code examples</h4>

1044

    <dl class="option-examples-list">

1045

1046

<dt>

1047

  Initialize a datepicker with the <code>hideIfNoPrevNext</code> option specified.

1048

</dt>

1049

<dd>

1050

<pre><code>$( ".selector" ).datepicker({ hideIfNoPrevNext: true });</code></pre>

1051

</dd>

1052

1053

1054

<dt>

1055

  Get or set the <code>hideIfNoPrevNext</code> option, after init.

1056

</dt>

1057

<dd>

1058

<pre><code>//getter

1059

var hideIfNoPrevNext = $( ".selector" ).datepicker( "option", "hideIfNoPrevNext" );

1060

//setter

1061

$( ".selector" ).datepicker( "option", "hideIfNoPrevNext", true );</code></pre>

1062

</dd>

1063

1064

    </dl>

1065

  </div>

1066

</li>

1067

1068

1069

<li class="option" id="option-isRTL">

1070

  <div class="option-header">

1071

    <h3 class="option-name"><a href="#option-isRTL">isRTL</a></h3>

1072

    <dl>

1073

      <dt class="option-type-label">Type:</dt>

1074

        <dd class="option-type">Boolean</dd>

1075

1076

      <dt class="option-default-label">Default:</dt>

1077

        <dd class="option-default">false</dd>

1078

1079

    </dl>

1080

  </div>

1081

  <div class="option-description">

1082

    <p>True if the current language is drawn from right to left. This attribute is one of the regionalisation attributes.</p>

1083

  </div>

1084

  <div class="option-examples">

1085

    <h4>Code examples</h4>

1086

    <dl class="option-examples-list">

1087

1088

<dt>

1089

  Initialize a datepicker with the <code>isRTL</code> option specified.

1090

</dt>

1091

<dd>

1092

<pre><code>$( ".selector" ).datepicker({ isRTL: true });</code></pre>

1093

</dd>

1094

1095

1096

<dt>

1097

  Get or set the <code>isRTL</code> option, after init.

1098

</dt>

1099

<dd>

1100

<pre><code>//getter

1101

var isRTL = $( ".selector" ).datepicker( "option", "isRTL" );

1102

//setter

1103

$( ".selector" ).datepicker( "option", "isRTL", true );</code></pre>

1104

</dd>

1105

1106

    </dl>

1107

  </div>

1108

</li>

1109

1110

1111

<li class="option" id="option-maxDate">

1112

  <div class="option-header">

1113

    <h3 class="option-name"><a href="#option-maxDate">maxDate</a></h3>

1114

    <dl>

1115

      <dt class="option-type-label">Type:</dt>

1116

        <dd class="option-type">Date, Number, String</dd>

1117

1118

      <dt class="option-default-label">Default:</dt>

1119

        <dd class="option-default">null</dd>

1120

1121

    </dl>

1122

  </div>

1123

  <div class="option-description">

1124

    <p>Set a maximum selectable date via a Date object or as a string in the current <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code>, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +1w'), or null for no limit.</p>

1125

  </div>

1126

  <div class="option-examples">

1127

    <h4>Code examples</h4>

1128

    <dl class="option-examples-list">

1129

1130

<dt>

1131

  Initialize a datepicker with the <code>maxDate</code> option specified.

1132

</dt>

1133

<dd>

1134

<pre><code>$( ".selector" ).datepicker({ maxDate: '+1m +1w' });</code></pre>

1135

</dd>

1136

1137

1138

<dt>

1139

  Get or set the <code>maxDate</code> option, after init.

1140

</dt>

1141

<dd>

1142

<pre><code>//getter

1143

var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );

1144

//setter

1145

$( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );</code></pre>

1146

</dd>

1147

1148

    </dl>

1149

  </div>

1150

</li>

1151

1152

1153

<li class="option" id="option-minDate">

1154

  <div class="option-header">

1155

    <h3 class="option-name"><a href="#option-minDate">minDate</a></h3>

1156

    <dl>

1157

      <dt class="option-type-label">Type:</dt>

1158

        <dd class="option-type">Date, Number, String</dd>

1159

1160

      <dt class="option-default-label">Default:</dt>

1161

        <dd class="option-default">null</dd>

1162

1163

    </dl>

1164

  </div>

1165

  <div class="option-description">

1166

    <p>Set a minimum selectable date via a Date object or as a string in the current <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code>, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '-1y -1m'), or null for no limit.</p>

1167

  </div>

1168

  <div class="option-examples">

1169

    <h4>Code examples</h4>

1170

    <dl class="option-examples-list">

1171

1172

<dt>

1173

  Initialize a datepicker with the <code>minDate</code> option specified.

1174

</dt>

1175

<dd>

1176

<pre><code>$( ".selector" ).datepicker({ minDate: new Date(2007, 1 - 1, 1) });</code></pre>

1177

</dd>

1178

1179

1180

<dt>

1181

  Get or set the <code>minDate</code> option, after init.

1182

</dt>

1183

<dd>

1184

<pre><code>//getter

1185

var minDate = $( ".selector" ).datepicker( "option", "minDate" );

1186

//setter

1187

$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );</code></pre>

1188

</dd>

1189

1190

    </dl>

1191

  </div>

1192

</li>

1193

1194

1195

<li class="option" id="option-monthNames">

1196

  <div class="option-header">

1197

    <h3 class="option-name"><a href="#option-monthNames">monthNames</a></h3>

1198

    <dl>

1199

      <dt class="option-type-label">Type:</dt>

1200

        <dd class="option-type">Array</dd>

1201

1202

      <dt class="option-default-label">Default:</dt>

1203

        <dd class="option-default">['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']</dd>

1204

1205

    </dl>

1206

  </div>

1207

  <div class="option-description">

1208

    <p>The list of full month names, for use as requested via the <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code> setting. This attribute is one of the regionalisation attributes.</p>

1209

  </div>

1210

  <div class="option-examples">

1211

    <h4>Code examples</h4>

1212

    <dl class="option-examples-list">

1213

1214

<dt>

1215

  Initialize a datepicker with the <code>monthNames</code> option specified.

1216

</dt>

1217

<dd>

1218

<pre><code>$( ".selector" ).datepicker({ monthNames: ['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December'] });</code></pre>

1219

</dd>

1220

1221

1222

<dt>

1223

  Get or set the <code>monthNames</code> option, after init.

1224

</dt>

1225

<dd>

1226

<pre><code>//getter

1227

var monthNames = $( ".selector" ).datepicker( "option", "monthNames" );

1228

//setter

1229

$( ".selector" ).datepicker( "option", "monthNames", ['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December'] );</code></pre>

1230

</dd>

1231

1232

    </dl>

1233

  </div>

1234

</li>

1235

1236

1237

<li class="option" id="option-monthNamesShort">

1238

  <div class="option-header">

1239

    <h3 class="option-name"><a href="#option-monthNamesShort">monthNamesShort</a></h3>

1240

    <dl>

1241

      <dt class="option-type-label">Type:</dt>

1242

        <dd class="option-type">Array</dd>

1243

1244

      <dt class="option-default-label">Default:</dt>

1245

        <dd class="option-default">['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']</dd>

1246

1247

    </dl>

1248

  </div>

1249

  <div class="option-description">

1250

    <p>The list of abbreviated month names, as used in the month header on each datepicker and as requested via the <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code> setting. This attribute is one of the regionalisation attributes.</p>

1251

  </div>

1252

  <div class="option-examples">

1253

    <h4>Code examples</h4>

1254

    <dl class="option-examples-list">

1255

1256

<dt>

1257

  Initialize a datepicker with the <code>monthNamesShort</code> option specified.

1258

</dt>

1259

<dd>

1260

<pre><code>$( ".selector" ).datepicker({ monthNamesShort: ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec'] });</code></pre>

1261

</dd>

1262

1263

1264

<dt>

1265

  Get or set the <code>monthNamesShort</code> option, after init.

1266

</dt>

1267

<dd>

1268

<pre><code>//getter

1269

var monthNamesShort = $( ".selector" ).datepicker( "option", "monthNamesShort" );

1270

//setter

1271

$( ".selector" ).datepicker( "option", "monthNamesShort", ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec'] );</code></pre>

1272

</dd>

1273

1274

    </dl>

1275

  </div>

1276

</li>

1277

1278

1279

<li class="option" id="option-navigationAsDateFormat">

1280

  <div class="option-header">

1281

    <h3 class="option-name"><a href="#option-navigationAsDateFormat">navigationAsDateFormat</a></h3>

1282

    <dl>

1283

      <dt class="option-type-label">Type:</dt>

1284

        <dd class="option-type">Boolean</dd>

1285

1286

      <dt class="option-default-label">Default:</dt>

1287

        <dd class="option-default">false</dd>

1288

1289

    </dl>

1290

  </div>

1291

  <div class="option-description">

1292

    <p>When true the <code><a href="http://docs.jquery.com/UI/Datepicker/formatDate" title="UI/Datepicker/formatDate">formatDate</a></code> function is applied to the <code><a href="http://docs.jquery.com/UI/Datepicker#option-prevText" title="UI/Datepicker">prevText</a></code>, <code><a href="http://docs.jquery.com/UI/Datepicker#option-nextText" title="UI/Datepicker">nextText</a></code>, and <code><a href="http://docs.jquery.com/UI/Datepicker#option-currentText" title="UI/Datepicker">currentText</a></code> values before display, allowing them to display the target month names for example.</p>

1293

  </div>

1294

  <div class="option-examples">

1295

    <h4>Code examples</h4>

1296

    <dl class="option-examples-list">

1297

1298

<dt>

1299

  Initialize a datepicker with the <code>navigationAsDateFormat</code> option specified.

1300

</dt>

1301

<dd>

1302

<pre><code>$( ".selector" ).datepicker({ navigationAsDateFormat: true });</code></pre>

1303

</dd>

1304

1305

1306

<dt>

1307

  Get or set the <code>navigationAsDateFormat</code> option, after init.

1308

</dt>

1309

<dd>

1310

<pre><code>//getter

1311

var navigationAsDateFormat = $( ".selector" ).datepicker( "option", "navigationAsDateFormat" );

1312

//setter

1313

$( ".selector" ).datepicker( "option", "navigationAsDateFormat", true );</code></pre>

1314

</dd>

1315

1316

    </dl>

1317

  </div>

1318

</li>

1319

1320

1321

<li class="option" id="option-nextText">

1322

  <div class="option-header">

1323

    <h3 class="option-name"><a href="#option-nextText">nextText</a></h3>

1324

    <dl>

1325

      <dt class="option-type-label">Type:</dt>

1326

        <dd class="option-type">String</dd>

1327

1328

      <dt class="option-default-label">Default:</dt>

1329

        <dd class="option-default">'Next'</dd>

1330

1331

    </dl>

1332

  </div>

1333

  <div class="option-description">

1334

    <p>The text to display for the next month link. This attribute is one of the regionalisation attributes. With the standard ThemeRoller styling, this value is replaced by an icon.</p>

1335

  </div>

1336

  <div class="option-examples">

1337

    <h4>Code examples</h4>

1338

    <dl class="option-examples-list">

1339

1340

<dt>

1341

  Initialize a datepicker with the <code>nextText</code> option specified.

1342

</dt>

1343

<dd>

1344

<pre><code>$( ".selector" ).datepicker({ nextText: 'Later' });</code></pre>

1345

</dd>

1346

1347

1348

<dt>

1349

  Get or set the <code>nextText</code> option, after init.

1350

</dt>

1351

<dd>

1352

<pre><code>//getter

1353

var nextText = $( ".selector" ).datepicker( "option", "nextText" );

1354

//setter

1355

$( ".selector" ).datepicker( "option", "nextText", 'Later' );</code></pre>

1356

</dd>

1357

1358

    </dl>

1359

  </div>

1360

</li>

1361

1362

1363

<li class="option" id="option-numberOfMonths">

1364

  <div class="option-header">

1365

    <h3 class="option-name"><a href="#option-numberOfMonths">numberOfMonths</a></h3>

1366

    <dl>

1367

      <dt class="option-type-label">Type:</dt>

1368

        <dd class="option-type">Number, Array</dd>

1369

1370

      <dt class="option-default-label">Default:</dt>

1371

        <dd class="option-default">1</dd>

1372

1373

    </dl>

1374

  </div>

1375

  <div class="option-description">

1376

    <p>Set how many months to show at once. The value can be a straight integer, or can be a two-element array to define the number of rows and columns to display.</p>

1377

  </div>

1378

  <div class="option-examples">

1379

    <h4>Code examples</h4>

1380

    <dl class="option-examples-list">

1381

1382

<dt>

1383

  Initialize a datepicker with the <code>numberOfMonths</code> option specified.

1384

</dt>

1385

<dd>

1386

<pre><code>$( ".selector" ).datepicker({ numberOfMonths: [2, 3] });</code></pre>

1387

</dd>

1388

1389

1390

<dt>

1391

  Get or set the <code>numberOfMonths</code> option, after init.

1392

</dt>

1393

<dd>

1394

<pre><code>//getter

1395

var numberOfMonths = $( ".selector" ).datepicker( "option", "numberOfMonths" );

1396

//setter

1397

$( ".selector" ).datepicker( "option", "numberOfMonths", [2, 3] );</code></pre>

1398

</dd>

1399

1400

    </dl>

1401

  </div>

1402

</li>

1403

1404

1405

<li class="option" id="option-prevText">

1406

  <div class="option-header">

1407

    <h3 class="option-name"><a href="#option-prevText">prevText</a></h3>

1408

    <dl>

1409

      <dt class="option-type-label">Type:</dt>

1410

        <dd class="option-type">String</dd>

1411

1412

      <dt class="option-default-label">Default:</dt>

1413

        <dd class="option-default">'Prev'</dd>

1414

1415

    </dl>

1416

  </div>

1417

  <div class="option-description">

1418

    <p>The text to display for the previous month link. This attribute is one of the regionalisation attributes. With the standard ThemeRoller styling, this value is replaced by an icon.</p>

1419

  </div>

1420

  <div class="option-examples">

1421

    <h4>Code examples</h4>

1422

    <dl class="option-examples-list">

1423

1424

<dt>

1425

  Initialize a datepicker with the <code>prevText</code> option specified.

1426

</dt>

1427

<dd>

1428

<pre><code>$( ".selector" ).datepicker({ prevText: 'Earlier' });</code></pre>

1429

</dd>

1430

1431

1432

<dt>

1433

  Get or set the <code>prevText</code> option, after init.

1434

</dt>

1435

<dd>

1436

<pre><code>//getter

1437

var prevText = $( ".selector" ).datepicker( "option", "prevText" );

1438

//setter

1439

$( ".selector" ).datepicker( "option", "prevText", 'Earlier' );</code></pre>

1440

</dd>

1441

1442

    </dl>

1443

  </div>

1444

</li>

1445

1446

1447

<li class="option" id="option-selectOtherMonths">

1448

  <div class="option-header">

1449

    <h3 class="option-name"><a href="#option-selectOtherMonths">selectOtherMonths</a></h3>

1450

    <dl>

1451

      <dt class="option-type-label">Type:</dt>

1452

        <dd class="option-type">Boolean</dd>

1453

1454

      <dt class="option-default-label">Default:</dt>

1455

        <dd class="option-default">false</dd>

1456

1457

    </dl>

1458

  </div>

1459

  <div class="option-description">

1460

    <p>When true days in other months shown before or after the current month are selectable. This only applies if <code><a href="http://docs.jquery.com/UI/Datepicker#option-showOtherMonths" title="UI/Datepicker">showOtherMonths</a></code> is also true.</p>

1461

  </div>

1462

  <div class="option-examples">

1463

    <h4>Code examples</h4>

1464

    <dl class="option-examples-list">

1465

1466

<dt>

1467

  Initialize a datepicker with the <code>selectOtherMonths</code> option specified.

1468

</dt>

1469

<dd>

1470

<pre><code>$( ".selector" ).datepicker({ selectOtherMonths: true });</code></pre>

1471

</dd>

1472

1473

1474

<dt>

1475

  Get or set the <code>selectOtherMonths</code> option, after init.

1476

</dt>

1477

<dd>

1478

<pre><code>//getter

1479

var selectOtherMonths = $( ".selector" ).datepicker( "option", "selectOtherMonths" );

1480

//setter

1481

$( ".selector" ).datepicker( "option", "selectOtherMonths", true );</code></pre>

1482

</dd>

1483

1484

    </dl>

1485

  </div>

1486

</li>

1487

1488

1489

<li class="option" id="option-shortYearCutoff">

1490

  <div class="option-header">

1491

    <h3 class="option-name"><a href="#option-shortYearCutoff">shortYearCutoff</a></h3>

1492

    <dl>

1493

      <dt class="option-type-label">Type:</dt>

1494

        <dd class="option-type">String, Number</dd>

1495

1496

      <dt class="option-default-label">Default:</dt>

1497

        <dd class="option-default">'+10'</dd>

1498

1499

    </dl>

1500

  </div>

1501

  <div class="option-description">

1502

    <p>Set the cutoff year for determining the century for a date (used in conjunction with <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code> 'y'). If a numeric value (0-99) is provided then this value is used directly. If a string value is provided then it is converted to a number and added to the current year. Once the cutoff year is calculated, any dates entered with a year value less than or equal to it are considered to be in the current century, while those greater than it are deemed to be in the previous century.</p>

1503

  </div>

1504

  <div class="option-examples">

1505

    <h4>Code examples</h4>

1506

    <dl class="option-examples-list">

1507

1508

<dt>

1509

  Initialize a datepicker with the <code>shortYearCutoff</code> option specified.

1510

</dt>

1511

<dd>

1512

<pre><code>$( ".selector" ).datepicker({ shortYearCutoff: 50 });</code></pre>

1513

</dd>

1514

1515

1516

<dt>

1517

  Get or set the <code>shortYearCutoff</code> option, after init.

1518

</dt>

1519

<dd>

1520

<pre><code>//getter

1521

var shortYearCutoff = $( ".selector" ).datepicker( "option", "shortYearCutoff" );

1522

//setter

1523

$( ".selector" ).datepicker( "option", "shortYearCutoff", 50 );</code></pre>

1524

</dd>

1525

1526

    </dl>

1527

  </div>

1528

</li>

1529

1530

1531

<li class="option" id="option-showAnim">

1532

  <div class="option-header">

1533

    <h3 class="option-name"><a href="#option-showAnim">showAnim</a></h3>

1534

    <dl>

1535

      <dt class="option-type-label">Type:</dt>

1536

        <dd class="option-type">String</dd>

1537

1538

      <dt class="option-default-label">Default:</dt>

1539

        <dd class="option-default">'show'</dd>

1540

1541

    </dl>

1542

  </div>

1543

  <div class="option-description">

1544

    <p>Set the name of the animation used to show/hide the datepicker. Use 'show' (the default), 'slideDown', 'fadeIn', any of the show/hide <a href="http://docs.jquery.com/UI/Effects" class="external text" title="http://docs.jquery.com/UI/Effects">jQuery UI effects</a>, or '' for no animation.</p>

1545

  </div>

1546

  <div class="option-examples">

1547

    <h4>Code examples</h4>

1548

    <dl class="option-examples-list">

1549

1550

<dt>

1551

  Initialize a datepicker with the <code>showAnim</code> option specified.

1552

</dt>

1553

<dd>

1554

<pre><code>$( ".selector" ).datepicker({ showAnim: 'fold' });</code></pre>

1555

</dd>

1556

1557

1558

<dt>

1559

  Get or set the <code>showAnim</code> option, after init.

1560

</dt>

1561

<dd>

1562

<pre><code>//getter

1563

var showAnim = $( ".selector" ).datepicker( "option", "showAnim" );

1564

//setter

1565

$( ".selector" ).datepicker( "option", "showAnim", 'fold' );</code></pre>

1566

</dd>

1567

1568

    </dl>

1569

  </div>

1570

</li>

1571

1572

1573

<li class="option" id="option-showButtonPanel">

1574

  <div class="option-header">

1575

    <h3 class="option-name"><a href="#option-showButtonPanel">showButtonPanel</a></h3>

1576

    <dl>

1577

      <dt class="option-type-label">Type:</dt>

1578

        <dd class="option-type">Boolean</dd>

1579

1580

      <dt class="option-default-label">Default:</dt>

1581

        <dd class="option-default">false</dd>

1582

1583

    </dl>

1584

  </div>

1585

  <div class="option-description">

1586

    <p>Whether to show the button panel.</p>

1587

  </div>

1588

  <div class="option-examples">

1589

    <h4>Code examples</h4>

1590

    <dl class="option-examples-list">

1591

1592

<dt>

1593

  Initialize a datepicker with the <code>showButtonPanel</code> option specified.

1594

</dt>

1595

<dd>

1596

<pre><code>$( ".selector" ).datepicker({ showButtonPanel: true });</code></pre>

1597

</dd>

1598

1599

1600

<dt>

1601

  Get or set the <code>showButtonPanel</code> option, after init.

1602

</dt>

1603

<dd>

1604

<pre><code>//getter

1605

var showButtonPanel = $( ".selector" ).datepicker( "option", "showButtonPanel" );

1606

//setter

1607

$( ".selector" ).datepicker( "option", "showButtonPanel", true );</code></pre>

1608

</dd>

1609

1610

    </dl>

1611

  </div>

1612

</li>

1613

1614

1615

<li class="option" id="option-showCurrentAtPos">

1616

  <div class="option-header">

1617

    <h3 class="option-name"><a href="#option-showCurrentAtPos">showCurrentAtPos</a></h3>

1618

    <dl>

1619

      <dt class="option-type-label">Type:</dt>

1620

        <dd class="option-type">Number</dd>

1621

1622

      <dt class="option-default-label">Default:</dt>

1623

        <dd class="option-default">0</dd>

1624

1625

    </dl>

1626

  </div>

1627

  <div class="option-description">

1628

    <p>Specify where in a <a href="http://docs.jquery.com/UI/Datepicker#option-numberOfMonths" title="UI/Datepicker">multi-month</a> display the current month shows, starting from 0 at the top/left.</p>

1629

  </div>

1630

  <div class="option-examples">

1631

    <h4>Code examples</h4>

1632

    <dl class="option-examples-list">

1633

1634

<dt>

1635

  Initialize a datepicker with the <code>showCurrentAtPos</code> option specified.

1636

</dt>

1637

<dd>

1638

<pre><code>$( ".selector" ).datepicker({ showCurrentAtPos: 3 });</code></pre>

1639

</dd>

1640

1641

1642

<dt>

1643

  Get or set the <code>showCurrentAtPos</code> option, after init.

1644

</dt>

1645

<dd>

1646

<pre><code>//getter

1647

var showCurrentAtPos = $( ".selector" ).datepicker( "option", "showCurrentAtPos" );

1648

//setter

1649

$( ".selector" ).datepicker( "option", "showCurrentAtPos", 3 );</code></pre>

1650

</dd>

1651

1652

    </dl>

1653

  </div>

1654

</li>

1655

1656

1657

<li class="option" id="option-showMonthAfterYear">

1658

  <div class="option-header">

1659

    <h3 class="option-name"><a href="#option-showMonthAfterYear">showMonthAfterYear</a></h3>

1660

    <dl>

1661

      <dt class="option-type-label">Type:</dt>

1662

        <dd class="option-type">Boolean</dd>

1663

1664

      <dt class="option-default-label">Default:</dt>

1665

        <dd class="option-default">false</dd>

1666

1667

    </dl>

1668

  </div>

1669

  <div class="option-description">

1670

    <p>Whether to show the month after the year in the header. This attribute is one of the regionalisation attributes.</p>

1671

  </div>

1672

  <div class="option-examples">

1673

    <h4>Code examples</h4>

1674

    <dl class="option-examples-list">

1675

1676

<dt>

1677

  Initialize a datepicker with the <code>showMonthAfterYear</code> option specified.

1678

</dt>

1679

<dd>

1680

<pre><code>$( ".selector" ).datepicker({ showMonthAfterYear: true });</code></pre>

1681

</dd>

1682

1683

1684

<dt>

1685

  Get or set the <code>showMonthAfterYear</code> option, after init.

1686

</dt>

1687

<dd>

1688

<pre><code>//getter

1689

var showMonthAfterYear = $( ".selector" ).datepicker( "option", "showMonthAfterYear" );

1690

//setter

1691

$( ".selector" ).datepicker( "option", "showMonthAfterYear", true );</code></pre>

1692

</dd>

1693

1694

    </dl>

1695

  </div>

1696

</li>

1697

1698

1699

<li class="option" id="option-showOn">

1700

  <div class="option-header">

1701

    <h3 class="option-name"><a href="#option-showOn">showOn</a></h3>

1702

    <dl>

1703

      <dt class="option-type-label">Type:</dt>

1704

        <dd class="option-type">String</dd>

1705

1706

      <dt class="option-default-label">Default:</dt>

1707

        <dd class="option-default">'focus'</dd>

1708

1709

    </dl>

1710

  </div>

1711

  <div class="option-description">

1712

    <p>Have the datepicker appear automatically when the field receives focus ('focus'), appear only when a button is clicked ('button'), or appear when either event takes place ('both').</p>

1713

  </div>

1714

  <div class="option-examples">

1715

    <h4>Code examples</h4>

1716

    <dl class="option-examples-list">

1717

1718

<dt>

1719

  Initialize a datepicker with the <code>showOn</code> option specified.

1720

</dt>

1721

<dd>

1722

<pre><code>$( ".selector" ).datepicker({ showOn: 'both' });</code></pre>

1723

</dd>

1724

1725

1726

<dt>

1727

  Get or set the <code>showOn</code> option, after init.

1728

</dt>

1729

<dd>

1730

<pre><code>//getter

1731

var showOn = $( ".selector" ).datepicker( "option", "showOn" );

1732

//setter

1733

$( ".selector" ).datepicker( "option", "showOn", 'both' );</code></pre>

1734

</dd>

1735

1736

    </dl>

1737

  </div>

1738

</li>

1739

1740

1741

<li class="option" id="option-showOptions">

1742

  <div class="option-header">

1743

    <h3 class="option-name"><a href="#option-showOptions">showOptions</a></h3>

1744

    <dl>

1745

      <dt class="option-type-label">Type:</dt>

1746

        <dd class="option-type">Options</dd>

1747

1748

      <dt class="option-default-label">Default:</dt>

1749

        <dd class="option-default">{}</dd>

1750

1751

    </dl>

1752

  </div>

1753

  <div class="option-description">

1754

    <p>If using one of the jQuery UI effects for <code><a href="http://docs.jquery.com/UI/Datepicker#option-showAnim" title="UI/Datepicker">showAnim</a></code>, you can provide additional settings for that animation via this option.</p>

1755

  </div>

1756

  <div class="option-examples">

1757

    <h4>Code examples</h4>

1758

    <dl class="option-examples-list">

1759

1760

<dt>

1761

  Initialize a datepicker with the <code>showOptions</code> option specified.

1762

</dt>

1763

<dd>

1764

<pre><code>$( ".selector" ).datepicker({ showOptions: {direction: 'up' });</code></pre>

1765

</dd>

1766

1767

1768

<dt>

1769

  Get or set the <code>showOptions</code> option, after init.

1770

</dt>

1771

<dd>

1772

<pre><code>//getter

1773

var showOptions = $( ".selector" ).datepicker( "option", "showOptions" );

1774

//setter

1775

$( ".selector" ).datepicker( "option", "showOptions", {direction: 'up' );</code></pre>

1776

</dd>

1777

1778

    </dl>

1779

  </div>

1780

</li>

1781

1782

1783

<li class="option" id="option-showOtherMonths">

1784

  <div class="option-header">

1785

    <h3 class="option-name"><a href="#option-showOtherMonths">showOtherMonths</a></h3>

1786

    <dl>

1787

      <dt class="option-type-label">Type:</dt>

1788

        <dd class="option-type">Boolean</dd>

1789

1790

      <dt class="option-default-label">Default:</dt>

1791

        <dd class="option-default">false</dd>

1792

1793

    </dl>

1794

  </div>

1795

  <div class="option-description">

1796

    <p>Display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use <code><a href="http://docs.jquery.com/UI/Datepicker#option-selectOtherMonths" title="UI/Datepicker">selectOtherMonths</a></code>.</p>

1797

  </div>

1798

  <div class="option-examples">

1799

    <h4>Code examples</h4>

1800

    <dl class="option-examples-list">

1801

1802

<dt>

1803

  Initialize a datepicker with the <code>showOtherMonths</code> option specified.

1804

</dt>

1805

<dd>

1806

<pre><code>$( ".selector" ).datepicker({ showOtherMonths: true });</code></pre>

1807

</dd>

1808

1809

1810

<dt>

1811

  Get or set the <code>showOtherMonths</code> option, after init.

1812

</dt>

1813

<dd>

1814

<pre><code>//getter

1815

var showOtherMonths = $( ".selector" ).datepicker( "option", "showOtherMonths" );

1816

//setter

1817

$( ".selector" ).datepicker( "option", "showOtherMonths", true );</code></pre>

1818

</dd>

1819

1820

    </dl>

1821

  </div>

1822

</li>

1823

1824

1825

<li class="option" id="option-showWeek">

1826

  <div class="option-header">

1827

    <h3 class="option-name"><a href="#option-showWeek">showWeek</a></h3>

1828

    <dl>

1829

      <dt class="option-type-label">Type:</dt>

1830

        <dd class="option-type">Boolean</dd>

1831

1832

      <dt class="option-default-label">Default:</dt>

1833

        <dd class="option-default">false</dd>

1834

1835

    </dl>

1836

  </div>

1837

  <div class="option-description">

1838

    <p>When true a column is added to show the week of the year. The <code><a href="http://docs.jquery.com/UI/Datepicker#option-calculateWeek" title="UI/Datepicker">calculateWeek</a></code> option determines how the week of the year is calculated. You may also want to change the <code><a href="http://docs.jquery.com/UI/Datepicker#option-firstDay" title="UI/Datepicker">firstDay</a></code> option.</p>

1839

  </div>

1840

  <div class="option-examples">

1841

    <h4>Code examples</h4>

1842

    <dl class="option-examples-list">

1843

1844

<dt>

1845

  Initialize a datepicker with the <code>showWeek</code> option specified.

1846

</dt>

1847

<dd>

1848

<pre><code>$( ".selector" ).datepicker({ showWeek: true });</code></pre>

1849

</dd>

1850

1851

1852

<dt>

1853

  Get or set the <code>showWeek</code> option, after init.

1854

</dt>

1855

<dd>

1856

<pre><code>//getter

1857

var showWeek = $( ".selector" ).datepicker( "option", "showWeek" );

1858

//setter

1859

$( ".selector" ).datepicker( "option", "showWeek", true );</code></pre>

1860

</dd>

1861

1862

    </dl>

1863

  </div>

1864

</li>

1865

1866

1867

<li class="option" id="option-stepMonths">

1868

  <div class="option-header">

1869

    <h3 class="option-name"><a href="#option-stepMonths">stepMonths</a></h3>

1870

    <dl>

1871

      <dt class="option-type-label">Type:</dt>

1872

        <dd class="option-type">Number</dd>

1873

1874

      <dt class="option-default-label">Default:</dt>

1875

        <dd class="option-default">1</dd>

1876

1877

    </dl>

1878

  </div>

1879

  <div class="option-description">

1880

    <p>Set how many months to move when clicking the Previous/Next links.</p>

1881

  </div>

1882

  <div class="option-examples">

1883

    <h4>Code examples</h4>

1884

    <dl class="option-examples-list">

1885

1886

<dt>

1887

  Initialize a datepicker with the <code>stepMonths</code> option specified.

1888

</dt>

1889

<dd>

1890

<pre><code>$( ".selector" ).datepicker({ stepMonths: 3 });</code></pre>

1891

</dd>

1892

1893

1894

<dt>

1895

  Get or set the <code>stepMonths</code> option, after init.

1896

</dt>

1897

<dd>

1898

<pre><code>//getter

1899

var stepMonths = $( ".selector" ).datepicker( "option", "stepMonths" );

1900

//setter

1901

$( ".selector" ).datepicker( "option", "stepMonths", 3 );</code></pre>

1902

</dd>

1903

1904

    </dl>

1905

  </div>

1906

</li>

1907

1908

1909

<li class="option" id="option-weekHeader">

1910

  <div class="option-header">

1911

    <h3 class="option-name"><a href="#option-weekHeader">weekHeader</a></h3>

1912

    <dl>

1913

      <dt class="option-type-label">Type:</dt>

1914

        <dd class="option-type">String</dd>

1915

1916

      <dt class="option-default-label">Default:</dt>

1917

        <dd class="option-default">'Wk'</dd>

1918

1919

    </dl>

1920

  </div>

1921

  <div class="option-description">

1922

    <p>The text to display for the week of the year column heading. This attribute is one of the regionalisation attributes. Use <code><a href="http://docs.jquery.com/UI/Datepicker#option-showWeek" title="UI/Datepicker">showWeek</a></code> to display this column.</p>

1923

  </div>

1924

  <div class="option-examples">

1925

    <h4>Code examples</h4>

1926

    <dl class="option-examples-list">

1927

1928

<dt>

1929

  Initialize a datepicker with the <code>weekHeader</code> option specified.

1930

</dt>

1931

<dd>

1932

<pre><code>$( ".selector" ).datepicker({ weekHeader: 'W' });</code></pre>

1933

</dd>

1934

1935

1936

<dt>

1937

  Get or set the <code>weekHeader</code> option, after init.

1938

</dt>

1939

<dd>

1940

<pre><code>//getter

1941

var weekHeader = $( ".selector" ).datepicker( "option", "weekHeader" );

1942

//setter

1943

$( ".selector" ).datepicker( "option", "weekHeader", 'W' );</code></pre>

1944

</dd>

1945

1946

    </dl>

1947

  </div>

1948

</li>

1949

1950

1951

<li class="option" id="option-yearRange">

1952

  <div class="option-header">

1953

    <h3 class="option-name"><a href="#option-yearRange">yearRange</a></h3>

1954

    <dl>

1955

      <dt class="option-type-label">Type:</dt>

1956

        <dd class="option-type">String</dd>

1957

1958

      <dt class="option-default-label">Default:</dt>

1959

        <dd class="option-default">'c-10:c+10'</dd>

1960

1961

    </dl>

1962

  </div>

1963

  <div class="option-description">

1964

    <p>Control the range of years displayed in the year drop-down: either relative to today's year (-nn:+nn), relative to the currently selected year (c-nn:c+nn), absolute (nnnn:nnnn), or combinations of these formats (nnnn:-nn). Note that this option only affects what appears in the drop-down, to restrict which dates may be selected use the <code><a href="http://docs.jquery.com/UI/Datepicker#option-minDate" title="UI/Datepicker">minDate</a></code> and/or <code><a href="http://docs.jquery.com/UI/Datepicker#option-maxDate" title="UI/Datepicker">maxDate</a></code> options.</p>

1965

  </div>

1966

  <div class="option-examples">

1967

    <h4>Code examples</h4>

1968

    <dl class="option-examples-list">

1969

1970

<dt>

1971

  Initialize a datepicker with the <code>yearRange</code> option specified.

1972

</dt>

1973

<dd>

1974

<pre><code>$( ".selector" ).datepicker({ yearRange: '2000:2010' });</code></pre>

1975

</dd>

1976

1977

1978

<dt>

1979

  Get or set the <code>yearRange</code> option, after init.

1980

</dt>

1981

<dd>

1982

<pre><code>//getter

1983

var yearRange = $( ".selector" ).datepicker( "option", "yearRange" );

1984

//setter

1985

$( ".selector" ).datepicker( "option", "yearRange", '2000:2010' );</code></pre>

1986

</dd>

1987

1988

    </dl>

1989

  </div>

1990

</li>

1991

1992

1993

<li class="option" id="option-yearSuffix">

1994

  <div class="option-header">

1995

    <h3 class="option-name"><a href="#option-yearSuffix">yearSuffix</a></h3>

1996

    <dl>

1997

      <dt class="option-type-label">Type:</dt>

1998

        <dd class="option-type">String</dd>

1999

2000

      <dt class="option-default-label">Default:</dt>

2001

        <dd class="option-default">''</dd>

2002

2003

    </dl>

2004

  </div>

2005

  <div class="option-description">

2006

    <p>Additional text to display after the year in the month headers. This attribute is one of the regionalisation attributes.</p>

2007

  </div>

2008

  <div class="option-examples">

2009

    <h4>Code examples</h4>

2010

    <dl class="option-examples-list">

2011

2012

<dt>

2013

  Initialize a datepicker with the <code>yearSuffix</code> option specified.

2014

</dt>

2015

<dd>

2016

<pre><code>$( ".selector" ).datepicker({ yearSuffix: 'CE' });</code></pre>

2017

</dd>

2018

2019

2020

<dt>

2021

  Get or set the <code>yearSuffix</code> option, after init.

2022

</dt>

2023

<dd>

2024

<pre><code>//getter

2025

var yearSuffix = $( ".selector" ).datepicker( "option", "yearSuffix" );

2026

//setter

2027

$( ".selector" ).datepicker( "option", "yearSuffix", 'CE' );</code></pre>

2028

</dd>

2029

2030

    </dl>

2031

  </div>

2032

</li>

2033

2034

    </ul>

2035

  </div>

2036

  <div id="events">

2037

    <h2 class="top-header">Events</h2>

2038

    <ul class="events-list">

2039

2040

<li class="event" id="event-beforeShow">

2041

  <div class="event-header">

2042

    <h3 class="event-name"><a href="#event-beforeShow">beforeShow</a></h3>

2043

    <dl>

2044

      <dt class="event-type-label"></dt>

2045

        <dd class="event-type">function(input, inst)</dd>

2046

    </dl>

2047

  </div>

2048

  <div class="event-description">

2049

    <p>Can be a function that takes an input field and current datepicker instance and returns an options object to update the datepicker with. It is called just before the datepicker is displayed.</p>

2050

  </div>

2051

  <div class="event-examples">

2052

    <h4>Code examples</h4>

2053

    <dl class="event-examples-list">

2054

2055

<dt>

2056

  Supply a callback function to handle the <code>beforeShow</code> event as an init option.

2057

</dt>

2058

<dd>

2059

<pre><code>$('.selector').datepicker({

2060

   beforeShow: function(input, inst) { ... }

2061

});</code></pre>

2062

</dd>

2063

2064

    </dl>

2065

  </div>

2066

</li>

2067

2068

2069

<li class="event" id="event-beforeShowDay">

2070

  <div class="event-header">

2071

    <h3 class="event-name"><a href="#event-beforeShowDay">beforeShowDay</a></h3>

2072

    <dl>

2073

      <dt class="event-type-label"></dt>

2074

        <dd class="event-type">function(date)</dd>

2075

    </dl>

2076

  </div>

2077

  <div class="event-description">

2078

    <p>The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or '' for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed.</p>

2079

  </div>

2080

  <div class="event-examples">

2081

    <h4>Code examples</h4>

2082

    <dl class="event-examples-list">

2083

2084

<dt>

2085

  Supply a callback function to handle the <code>beforeShowDay</code> event as an init option.

2086

</dt>

2087

<dd>

2088

<pre><code>$('.selector').datepicker({

2089

   beforeShowDay: function(date) { ... }

2090

});</code></pre>

2091

</dd>

2092

2093

    </dl>

2094

  </div>

2095

</li>

2096

2097

2098

<li class="event" id="event-onChangeMonthYear">

2099

  <div class="event-header">

2100

    <h3 class="event-name"><a href="#event-onChangeMonthYear">onChangeMonthYear</a></h3>

2101

    <dl>

2102

      <dt class="event-type-label"></dt>

2103

        <dd class="event-type">function(year, month, inst)</dd>

2104

    </dl>

2105

  </div>

2106

  <div class="event-description">

2107

    <p>Allows you to define your own event when the datepicker moves to a new month and/or year. The function receives the selected year, month (1-12), and the datepicker instance as parameters. <code>this</code> refers to the associated input field.</p>

2108

  </div>

2109

  <div class="event-examples">

2110

    <h4>Code examples</h4>

2111

    <dl class="event-examples-list">

2112

2113

<dt>

2114

  Supply a callback function to handle the <code>onChangeMonthYear</code> event as an init option.

2115

</dt>

2116

<dd>

2117

<pre><code>$('.selector').datepicker({

2118

   onChangeMonthYear: function(year, month, inst) { ... }

2119

});</code></pre>

2120

</dd>

2121

2122

    </dl>

2123

  </div>

2124

</li>

2125

2126

2127

<li class="event" id="event-onClose">

2128

  <div class="event-header">

2129

    <h3 class="event-name"><a href="#event-onClose">onClose</a></h3>

2130

    <dl>

2131

      <dt class="event-type-label"></dt>

2132

        <dd class="event-type">function(dateText, inst)</dd>

2133

    </dl>

2134

  </div>

2135

  <div class="event-description">

2136

    <p>Allows you to define your own event when the datepicker is closed, whether or not a date is selected. The function receives the selected date as text ('' if none) and the datepicker instance as parameters. <code>this</code> refers to the associated input field.</p>

2137

  </div>

2138

  <div class="event-examples">

2139

    <h4>Code examples</h4>

2140

    <dl class="event-examples-list">

2141

2142

<dt>

2143

  Supply a callback function to handle the <code>onClose</code> event as an init option.

2144

</dt>

2145

<dd>

2146

<pre><code>$('.selector').datepicker({

2147

   onClose: function(dateText, inst) { ... }

2148

});</code></pre>

2149

</dd>

2150

2151

    </dl>

2152

  </div>

2153

</li>

2154

2155

2156

<li class="event" id="event-onSelect">

2157

  <div class="event-header">

2158

    <h3 class="event-name"><a href="#event-onSelect">onSelect</a></h3>

2159

    <dl>

2160

      <dt class="event-type-label"></dt>

2161

        <dd class="event-type">function(dateText, inst)</dd>

2162

    </dl>

2163

  </div>

2164

  <div class="event-description">

2165

    <p>Allows you to define your own event when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. <code>this</code> refers to the associated input field.</p>

2166

  </div>

2167

  <div class="event-examples">

2168

    <h4>Code examples</h4>

2169

    <dl class="event-examples-list">

2170

2171

<dt>

2172

  Supply a callback function to handle the <code>onSelect</code> event as an init option.

2173

</dt>

2174

<dd>

2175

<pre><code>$('.selector').datepicker({

2176

   onSelect: function(dateText, inst) { ... }

2177

});</code></pre>

2178

</dd>

2179

2180

    </dl>

2181

  </div>

2182

</li>

2183

2184

    </ul>

2185

  </div>

2186

  <div id="methods">

2187

    <h2 class="top-header">Methods</h2>

2188

    <ul class="methods-list">

2189

2190

<li class="method" id="method-destroy">

2191

  <div class="method-header">

2192

    <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>

2193

    <dl>

2194

      <dt class="method-signature-label">Signature:</dt>

2195

        <dd class="method-signature">.datepicker( "destroy"

)</dd>

2204

    </dl>

2205

  </div>

2206

  <div class="method-description">

2207

    <p>Remove the datepicker functionality completely. This will return the element back to its pre-init state.</p>

2208

  </div>

2209

</li>

2210

2211

2212

<li class="method" id="method-disable">

2213

  <div class="method-header">

2214

    <h3 class="method-name"><a href="#method-disable">disable</a></h3>

2215

    <dl>

2216

      <dt class="method-signature-label">Signature:</dt>

2217

        <dd class="method-signature">.datepicker( "disable"

)</dd>

2226

    </dl>

2227

  </div>

2228

  <div class="method-description">

2229

    <p>Disable the datepicker.</p>

2230

  </div>

2231

</li>

2232

2233

2234

<li class="method" id="method-enable">

2235

  <div class="method-header">

2236

    <h3 class="method-name"><a href="#method-enable">enable</a></h3>

2237

    <dl>

2238

      <dt class="method-signature-label">Signature:</dt>

2239

        <dd class="method-signature">.datepicker( "enable"

)</dd>

2248

    </dl>

2249

  </div>

2250

  <div class="method-description">

2251

    <p>Enable the datepicker.</p>

2252

  </div>

2253

</li>

2254

2255

2256

<li class="method" id="method-option">

2257

  <div class="method-header">

2258

    <h3 class="method-name"><a href="#method-option">option</a></h3>

2259

    <dl>

2260

      <dt class="method-signature-label">Signature:</dt>

2261

        <dd class="method-signature">.datepicker( "option"

2262

2263

, optionName

2264

2265

, <span class="optional">[</span>value<span class="optional">] </span>

)</dd>

2270

    </dl>

2271

  </div>

2272

  <div class="method-description">

2273

    <p>Get or set any datepicker option. If no value is specified, will act as a getter.</p>

2274

  </div>

2275

</li>

2276

2277

2278

<li class="method" id="method-option">

2279

  <div class="method-header">

2280

    <h3 class="method-name"><a href="#method-option">option</a></h3>

2281

    <dl>

2282

      <dt class="method-signature-label">Signature:</dt>

2283

        <dd class="method-signature">.datepicker( "option"

2284

2285

, options

)</dd>

2292

    </dl>

2293

  </div>

2294

  <div class="method-description">

2295

    <p>Set multiple datepicker options at once by providing an options object.</p>

2296

  </div>

2297

</li>

2298

2299

2300

<li class="method" id="method-widget">

2301

  <div class="method-header">

2302

    <h3 class="method-name"><a href="#method-widget">widget</a></h3>

2303

    <dl>

2304

      <dt class="method-signature-label">Signature:</dt>

2305

        <dd class="method-signature">.datepicker( "widget"

)</dd>

2314

    </dl>

2315

  </div>

2316

  <div class="method-description">

2317

    <p>Returns the .ui-datepicker element.</p>

2318

  </div>

2319

</li>

2320

2321

2322

<li class="method" id="method-dialog">

2323

  <div class="method-header">

2324

    <h3 class="method-name"><a href="#method-dialog">dialog</a></h3>

2325

    <dl>

2326

      <dt class="method-signature-label">Signature:</dt>

2327

        <dd class="method-signature">.datepicker( "dialog"

2328

2329

, date

2330

2331

, <span class="optional">[</span>onSelect<span class="optional">] </span>

2332

2333

, <span class="optional">[</span>settings<span class="optional">] </span>

2334

2335

, <span class="optional">[</span>pos<span class="optional">] </span>)</dd>

2336

    </dl>

2337

  </div>

2338

  <div class="method-description">

2339

    <p>Open a datepicker in a "dialog" box.

2340

</p><p>dateText: the initial date for the date picker as either a Date or a string in the current date format.

2341

</p><p>onSelect: A callback function when a date is selected. The function receives the date text and date picker instance as parameters.

2342

</p><p>settings: The new settings for the date picker.

2343

</p><p>pos: The position of the top/left of the dialog as [x, y] or a MouseEvent that contains the coordinates. If not specified the dialog is centered on the screen.</p>

2344

  </div>

2345

</li>

2346

2347

2348

<li class="method" id="method-isDisabled">

2349

  <div class="method-header">

2350

    <h3 class="method-name"><a href="#method-isDisabled">isDisabled</a></h3>

2351

    <dl>

2352

      <dt class="method-signature-label">Signature:</dt>

2353

        <dd class="method-signature">.datepicker( "isDisabled"

)</dd>

2362

    </dl>

2363

  </div>

2364

  <div class="method-description">

2365

    <p>Determine whether a date picker has been disabled.</p>

2366

  </div>

2367

</li>

2368

2369

2370

<li class="method" id="method-hide">

2371

  <div class="method-header">

2372

    <h3 class="method-name"><a href="#method-hide">hide</a></h3>

2373

    <dl>

2374

      <dt class="method-signature-label">Signature:</dt>

2375

        <dd class="method-signature">.datepicker( "hide"

)</dd>

2384

    </dl>

2385

  </div>

2386

  <div class="method-description">

2387

    <p>Close a previously opened date picker.</p>

2388

  </div>

2389

</li>

2390

2391

2392

<li class="method" id="method-show">

2393

  <div class="method-header">

2394

    <h3 class="method-name"><a href="#method-show">show</a></h3>

2395

    <dl>

2396

      <dt class="method-signature-label">Signature:</dt>

2397

        <dd class="method-signature">.datepicker( "show"

)</dd>

2406

    </dl>

2407

  </div>

2408

  <div class="method-description">

2409

    <p>Call up a previously attached date picker.</p>

2410

  </div>

2411

</li>

2412

2413

2414

<li class="method" id="method-refresh">

2415

  <div class="method-header">

2416

    <h3 class="method-name"><a href="#method-refresh">refresh</a></h3>

2417

    <dl>

2418

      <dt class="method-signature-label">Signature:</dt>

2419

        <dd class="method-signature">.datepicker( "refresh"

)</dd>

2428

    </dl>

2429

  </div>

2430

  <div class="method-description">

2431

    <p>Redraw a date picker, after having made some external modifications.</p>

2432

  </div>

2433

</li>

2434

2435

2436

<li class="method" id="method-getDate">

2437

  <div class="method-header">

2438

    <h3 class="method-name"><a href="#method-getDate">getDate</a></h3>

2439

    <dl>

2440

      <dt class="method-signature-label">Signature:</dt>

2441

        <dd class="method-signature">.datepicker( "getDate"

)</dd>

2450

    </dl>

2451

  </div>

2452

  <div class="method-description">

2453

    <p>Returns the current date for the datepicker or null if no date has been selected.</p>

2454

  </div>

2455

</li>

2456

2457

2458

<li class="method" id="method-setDate">

2459

  <div class="method-header">

2460

    <h3 class="method-name"><a href="#method-setDate">setDate</a></h3>

2461

    <dl>

2462

      <dt class="method-signature-label">Signature:</dt>

2463

        <dd class="method-signature">.datepicker( "setDate"

2464

2465

, date

)</dd>

2472

    </dl>

2473

  </div>

2474

  <div class="method-description">

2475

    <p>Sets the current date for the datepicker. The new date may be a Date object or a string in the current <a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">date format</a> (e.g. '01/26/2009'), a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null to clear the selected date.</p>

2476

  </div>

2477

</li>

2478

2479

    </ul>

2480

  </div>

2481

  <div id="theming">

2482

    <h2 class="top-header">Theming</h2>

2483

    <p>The jQuery UI Datepicker plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.

2484

</p>

2485

  <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.datepicker.css stylesheet that can be modified. These classes are highlighed in bold below.

2486

</p>

2487

2488

  <h3>Sample markup with jQuery UI CSS Framework classes</h3>

2489

  &lt;div id=&quot;ui-datepicker-div&quot; class=&quot;<strong>ui-datepicker</strong> ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible&quot;&gt;<br />

2490

&nbsp;&nbsp;&nbsp;&lt;div class=&quot;<strong>ui-datepicker-header</strong> ui-widget-header ui-helper-clearfix ui-corner-all&quot;&gt;<br />

2491

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=&quot;<strong>ui-datepicker-prev</strong> ui-corner-all&quot;&gt;title=&quot;Prev&quot;&gt;&lt;span class=&quot;ui-icon ui-icon-circle-triangle-w&quot;&gt;Prev&lt;/span&gt;&lt;/a&gt;<br />

2492

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=&quot;<strong>ui-datepicker-next</strong> ui-corner-all&quot; title=&quot;Next&quot;&gt;&lt;span class=&quot;ui-icon ui-icon-circle-triangle-e&quot;&gt;Next&lt;/span&gt;&lt;/a&gt;<br />

2493

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;<strong>ui-datepicker-title</strong>&quot;&gt;<br />

2494

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&quot;<strong>ui-datepicker-month</strong>&quot;&gt;January&lt;/span&gt;&lt;span class=&quot;<strong>ui-datepicker-year</strong>&quot;&gt;2009&lt;/span&gt;<br />

2495

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />

2496

&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />

2497

&nbsp;&nbsp;&nbsp;&lt;table class=&quot;<strong>ui-datepicker-calendar</strong>&quot;&gt;<br />

2498

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;thead&gt;<br />

2499

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br />

2500

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th class=&quot;<strong>ui-datepicker-week-end</strong>&quot;&gt;&lt;span title=&quot;Sunday&quot;&gt;Su&lt;/span&gt;&lt;/th&gt;<br />

2501

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...<br />

2502

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br />

2503

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/thead&gt;<br />

2504

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tbody&gt;&lt;tr&gt;<br />

2505

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td class=&quot;<strong>ui-datepicker-week-end ui-datepicker-other-month</strong> &quot;&gt;&nbsp;1&nbsp;&lt;/td&gt;<br />

2506

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...<br />

2507

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br />

2508

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tbody&gt;<br />

2509

&nbsp;&nbsp;&nbsp;&lt;/table&gt;<br />

2510

&nbsp;&nbsp;&nbsp;&lt;div class=&quot;<strong>ui-datepicker-buttonpane</strong> ui-widget-content&quot;&gt;<br />

2511

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=&quot;button&quot; class=&quot;<strong>ui-datepicker-current</strong> ui-state-default ui-priority-secondary ui-corner-all&quot;&gt;Today&lt;/button&gt;<br />

2512

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=&quot;button&quot; class=&quot;<strong>ui-datepicker-close</strong> ui-state-default ui-priority-primary ui-corner-all&quot;&gt;Done&lt;/button&gt;<br />

2513

&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />

2514

&lt;/div&gt;<br />

2515

  <p class="theme-note">

2516

    <strong>

2517

      Note: This is a sample of markup generated by the datepicker plugin, not markup you should use to create a datepicker. The only markup needed for that is &lt;input type="text" /&gt; or &lt;div&gt;&lt;/div&gt;.

2518

    </strong>

2519

  </p>

2520

2521

  </div>

2522

</div>

2523

2524

</p><!--

2525

Pre-expand include size: 97121 bytes

2526

Post-expand include size: 190790 bytes

2527

Template argument size: 119786 bytes

2528

Maximum: 2097152 bytes

2529

-->

2530

2531

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3774-1!1!0!!en!2 and timestamp 20101025002239 -->

Project

General

Profile

Metacat

Project

General

Profile

Metacat

metacat/lib/style/common/jquery/jqueryui/development-bundle/docs/datepicker.html @ 7886