~jstys-z/helioviewer.org/timeline

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

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

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

</p>

<ul>

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

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

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

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

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

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

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

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

</ul>

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

<ul>

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

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

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

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

</ul>

</div>

<h3>Dependencies</h3>

<ul>

</ul>

</div>

<h3>Example</h3>

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

A simple jQuery UI Datepicker.<br />

</p>

<pre>$("#datepicker").datepicker();

</pre>

</p>

<html>

<head>

$(document).ready(function(){

$("#datepicker").datepicker();

});

</script>

</head>

</body>

</html>

</pre>

</p><p></div>

</div>

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

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

<dl>

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

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

</dl>

</div>

<p>The jQuery selector for another field that is to be updated with the selected date from the datepicker. Use the <code>altFormat</code> setting below to change the format of the date within this field. Leave as blank for no alternate field.</p>

</div>

<h4>Code examples</h4>

100

<dt>

101

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

102

</dt>

103

<dd>

104

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

105

</dd>

106

107

108

<dt>

109

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

110

</dt>

111

<dd>

112

<pre><code>//getter

113

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

114

//setter

115

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

116

</dd>

117

118

</dl>

119

</div>

120

</li>

121

122

123

124

125

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

126

<dl>

127

128

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

129

130

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

131

132

133

</dl>

134

</div>

135

136

<p>The <code>dateFormat</code> to be used for the <code>altField</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>

137

</div>

138

139

<h4>Code examples</h4>

140

141

142

<dt>

143

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

144

</dt>

145

<dd>

146

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

147

</dd>

148

149

150

<dt>

151

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

152

</dt>

153

<dd>

154

<pre><code>//getter

155

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

156

//setter

157

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

158

</dd>

159

160

</dl>

161

</div>

162

</li>

163

164

165

166

167

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

168

<dl>

169

170

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

171

172

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

173

174

175

</dl>

176

</div>

177

178

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

179

</div>

180

181

<h4>Code examples</h4>

182

183

184

<dt>

185

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

186

</dt>

187

<dd>

188

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

189

</dd>

190

191

192

<dt>

193

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

194

</dt>

195

<dd>

196

<pre><code>//getter

197

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

198

//setter

199

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

200

</dd>

201

202

</dl>

203

</div>

204

</li>

205

206

207

208

209

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

210

<dl>

211

212

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

213

214

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

215

216

217

</dl>

218

</div>

219

220

<p>The URL for the popup button image. If set, button text becomes the <i>alt</i> value and is not directly displayed.</p>

221

</div>

222

223

<h4>Code examples</h4>

224

225

226

<dt>

227

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

228

</dt>

229

<dd>

230

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

231

</dd>

232

233

234

<dt>

235

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

236

</dt>

237

<dd>

238

<pre><code>//getter

239

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

240

//setter

241

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

242

</dd>

243

244

</dl>

245

</div>

246

</li>

247

248

249

250

251

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

252

<dl>

253

254

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

255

256

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

257

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

258

259

</dl>

260

</div>

261

262

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

263

</div>

264

265

<h4>Code examples</h4>

266

267

268

<dt>

269

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

270

</dt>

271

<dd>

272

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

273

</dd>

274

275

276

<dt>

277

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

278

</dt>

279

<dd>

280

<pre><code>//getter

281

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

282

//setter

283

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

284

</dd>

285

286

</dl>

287

</div>

288

</li>

289

290

291

292

293

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

294

<dl>

295

296

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

297

298

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

299

300

301

</dl>

302

</div>

303

304

<p>The text to display on the trigger button. Use in conjunction with <i>showOn</i> equal to 'button' or 'both'.</p>

305

</div>

306

307

<h4>Code examples</h4>

308

309

310

<dt>

311

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

312

</dt>

313

<dd>

314

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

315

</dd>

316

317

318

<dt>

319

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

320

</dt>

321

<dd>

322

<pre><code>//getter

323

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

324

//setter

325

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

326

</dd>

327

328

</dl>

329

</div>

330

</li>

331

332

333

334

335

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

336

<dl>

337

338

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

339

340

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

341

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

342

343

</dl>

344

</div>

345

346

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

347

</div>

348

349

<h4>Code examples</h4>

350

351

352

<dt>

353

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

354

</dt>

355

<dd>

356

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

357

</dd>

358

359

360

<dt>

361

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

362

</dt>

363

<dd>

364

<pre><code>//getter

365

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

366

//setter

367

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

368

</dd>

369

370

</dl>

371

</div>

372

</li>

373

374

375

376

377

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

378

<dl>

379

380

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

381

382

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

383

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

384

385

</dl>

386

</div>

387

388

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

389

</div>

390

391

<h4>Code examples</h4>

392

393

394

<dt>

395

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

396

</dt>

397

<dd>

398

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

399

</dd>

400

401

402

<dt>

403

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

404

</dt>

405

<dd>

406

<pre><code>//getter

407

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

408

//setter

409

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

410

</dd>

411

412

</dl>

413

</div>

414

</li>

415

416

417

418

419

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

420

<dl>

421

422

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

423

424

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

425

426

427

</dl>

428

</div>

429

430

<p>The text to display for the close link. This attribute is one of the regionalisation attributes. Use the <code>showButtonPanel</code> to display this button.</p>

431

</div>

432

433

<h4>Code examples</h4>

434

435

436

<dt>

437

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

438

</dt>

439

<dd>

440

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

441

</dd>

442

443

444

<dt>

445

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

446

</dt>

447

<dd>

448

<pre><code>//getter

449

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

450

//setter

451

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

452

</dd>

453

454

</dl>

455

</div>

456

</li>

457

458

459

460

461

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

462

<dl>

463

464

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

465

466

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

467

468

469

</dl>

470

</div>

471

472

<p>True if the input field is constrained to the current date format.</p>

473

</div>

474

475

<h4>Code examples</h4>

476

477

478

<dt>

479

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

480

</dt>

481

<dd>

482

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

483

</dd>

484

485

486

<dt>

487

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

488

</dt>

489

<dd>

490

<pre><code>//getter

491

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

492

//setter

493

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

494

</dd>

495

496

</dl>

497

</div>

498

</li>

499

500

501

502

503

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

504

<dl>

505

506

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

507

508

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

509

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

510

511

</dl>

512

</div>

513

514

<p>The text to display for the current day link. This attribute is one of the regionalisation attributes. Use the <code>showButtonPanel</code> to display this button.</p>

515

</div>

516

517

<h4>Code examples</h4>

518

519

520

<dt>

521

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

522

</dt>

523

<dd>

524

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

525

</dd>

526

527

528

<dt>

529

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

530

</dt>

531

<dd>

532

<pre><code>//getter

533

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

534

//setter

535

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

536

</dd>

537

538

</dl>

539

</div>

540

</li>

541

542

543

544

545

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

546

<dl>

547

548

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

549

550

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

551

552

553

</dl>

554

</div>

555

556

<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 <a href="http://docs.jquery.com/UI/Datepicker/formatDate" title="UI/Datepicker/formatDate">formatDate</a> function.</p>

557

</div>

558

559

<h4>Code examples</h4>

560

561

562

<dt>

563

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

564

</dt>

565

<dd>

566

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

567

</dd>

568

569

570

<dt>

571

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

572

</dt>

573

<dd>

574

<pre><code>//getter

575

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

576

//setter

577

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

578

</dd>

579

580

</dl>

581

</div>

582

</li>

583

584

585

586

587

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

588

<dl>

589

590

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

591

592

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

593

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

594

595

</dl>

596

</div>

597

598

<p>The list of long day names, starting from Sunday, for use as requested via the <code>dateFormat</code> setting. They also appear as popup hints when hovering over the corresponding column headings. This attribute is one of the regionalisation attributes.</p>

599

</div>

600

601

<h4>Code examples</h4>

602

603

604

<dt>

605

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

606

</dt>

607

<dd>

608

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

609

</dd>

610

611

612

<dt>

613

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

614

</dt>

615

<dd>

616

<pre><code>//getter

617

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

618

//setter

619

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

620

</dd>

621

622

</dl>

623

</div>

624

</li>

625

626

627

628

629

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

630

<dl>

631

632

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

633

634

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

635

636

637

</dl>

638

</div>

639

640

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

641

</div>

642

643

<h4>Code examples</h4>

644

645

646

<dt>

647

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

648

</dt>

649

<dd>

650

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

651

</dd>

652

653

654

<dt>

655

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

656

</dt>

657

<dd>

658

<pre><code>//getter

659

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

660

//setter

661

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

662

</dd>

663

664

</dl>

665

</div>

666

</li>

667

668

669

670

671

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

672

<dl>

673

674

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

675

676

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

677

678

679

</dl>

680

</div>

681

682

<p>The list of abbreviated day names, starting from Sunday, for use as requested via the <code>dateFormat</code> setting. This attribute is one of the regionalisation attributes.</p>

683

</div>

684

685

<h4>Code examples</h4>

686

687

688

<dt>

689

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

690

</dt>

691

<dd>

692

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

693

</dd>

694

695

696

<dt>

697

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

698

</dt>

699

<dd>

700

<pre><code>//getter

701

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

702

//setter

703

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

704

</dd>

705

706

</dl>

707

</div>

708

</li>

709

710

711

712

713

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

714

<dl>

715

716

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

717

718

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

719

720

721

</dl>

722

</div>

723

724

<p>Set the date to highlight on first opening if the field is blank. Specify either an actual date via a Date object, 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>

725

</div>

726

727

<h4>Code examples</h4>

728

729

730

<dt>

731

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

732

</dt>

733

<dd>

734

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

735

</dd>

736

737

738

<dt>

739

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

740

</dt>

741

<dd>

742

<pre><code>//getter

743

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

744

//setter

745

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

746

</dd>

747

748

</dl>

749

</div>

750

</li>

751

752

753

754

755

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

756

<dl>

757

758

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

759

760

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

761

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

762

763

</dl>

764

</div>

765

766

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

767

</div>

768

769

<h4>Code examples</h4>

770

771

772

<dt>

773

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

774

</dt>

775

<dd>

776

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

777

</dd>

778

779

780

<dt>

781

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

782

</dt>

783

<dd>

784

<pre><code>//getter

785

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

786

//setter

787

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

788

</dd>

789

790

</dl>

791

</div>

792

</li>

793

794

795

796

797

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

798

<dl>

799

800

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

801

802

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

803

804

805

</dl>

806

</div>

807

808

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

809

</div>

810

811

<h4>Code examples</h4>

812

813

814

<dt>

815

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

816

</dt>

817

<dd>

818

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

819

</dd>

820

821

822

<dt>

823

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

824

</dt>

825

<dd>

826

<pre><code>//getter

827

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

828

//setter

829

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

830

</dd>

831

832

</dl>

833

</div>

834

</li>

835

836

837

838

839

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

840

<dl>

841

842

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

843

844

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

845

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

846

847

</dl>

848

</div>

849

850

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

851

</div>

852

853

<h4>Code examples</h4>

854

855

856

<dt>

857

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

858

</dt>

859

<dd>

860

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

861

</dd>

862

863

864

<dt>

865

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

866

</dt>

867

<dd>

868

<pre><code>//getter

869

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

870

//setter

871

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

872

</dd>

873

874

</dl>

875

</div>

876

</li>

877

878

879

880

881

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

882

<dl>

883

884

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

885

886

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

887

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

888

889

</dl>

890

</div>

891

892

<p>Normally the previous and next links are disabled when not applicable (see <code>minDate</code>/<code>maxDate</code>). You can hide them altogether by setting this attribute to true.</p>

893

</div>

894

895

<h4>Code examples</h4>

896

897

898

<dt>

899

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

900

</dt>

901

<dd>

902

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

903

</dd>

904

905

906

<dt>

907

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

908

</dt>

909

<dd>

910

<pre><code>//getter

911

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

912

//setter

913

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

914

</dd>

915

916

</dl>

917

</div>

918

</li>

919

920

921

922

923

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

924

<dl>

925

926

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

927

928

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

929

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

930

931

</dl>

932

</div>

933

934

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

935

</div>

936

937

<h4>Code examples</h4>

938

939

940

<dt>

941

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

942

</dt>

943

<dd>

944

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

945

</dd>

946

947

948

<dt>

949

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

950

</dt>

951

<dd>

952

<pre><code>//getter

953

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

954

//setter

955

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

956

</dd>

957

958

</dl>

959

</div>

960

</li>

961

962

963

964

965

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

966

<dl>

967

968

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

969

970

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

971

972

973

</dl>

974

</div>

975

976

<p>Set a maximum selectable date via a Date object, 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>

977

</div>

978

979

<h4>Code examples</h4>

980

981

982

<dt>

983

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

984

</dt>

985

<dd>

986

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

987

</dd>

988

989

990

<dt>

991

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

992

</dt>

993

<dd>

994

<pre><code>//getter

995

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

996

//setter

997

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

998

</dd>

999

1000

</dl>

1001

</div>

1002

</li>

1003

1004

1005

1006

1007

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

1008

<dl>

1009

1010

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

1011

1012

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

1013

1014

1015

</dl>

1016

</div>

1017

1018

<p>Set a minimum selectable date via a Date object, 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>

1019

</div>

1020

1021

<h4>Code examples</h4>

1022

1023

1024

<dt>

1025

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

1026

</dt>

1027

<dd>

1028

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

1029

</dd>

1030

1031

1032

<dt>

1033

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

1034

</dt>

1035

<dd>

1036

<pre><code>//getter

1037

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

1038

//setter

1039

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

1040

</dd>

1041

1042

</dl>

1043

</div>

1044

</li>

1045

1046

1047

1048

1049

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

1050

<dl>

1051

1052

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

1053

1054

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

1055

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

1056

1057

</dl>

1058

</div>

1059

1060

<p>The list of full month names, as used in the month header on each datepicker and as requested via the <code>dateFormat</code> setting. This attribute is one of the regionalisation attributes.</p>

1061

</div>

1062

1063

<h4>Code examples</h4>

1064

1065

1066

<dt>

1067

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

1068

</dt>

1069

<dd>

1070

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

1071

</dd>

1072

1073

1074

<dt>

1075

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

1076

</dt>

1077

<dd>

1078

<pre><code>//getter

1079

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

1080

//setter

1081

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

1082

</dd>

1083

1084

</dl>

1085

</div>

1086

</li>

1087

1088

1089

1090

1091

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

1092

<dl>

1093

1094

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

1095

1096

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

1097

1098

1099

</dl>

1100

</div>

1101

1102

<p>The list of abbreviated month names, for use as requested via the <code>dateFormat</code> setting. This attribute is one of the regionalisation attributes.</p>

1103

</div>

1104

1105

<h4>Code examples</h4>

1106

1107

1108

<dt>

1109

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

1110

</dt>

1111

<dd>

1112

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

1113

</dd>

1114

1115

1116

<dt>

1117

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

1118

</dt>

1119

<dd>

1120

<pre><code>//getter

1121

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

1122

//setter

1123

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

1124

</dd>

1125

1126

</dl>

1127

</div>

1128

</li>

1129

1130

1131

1132

1133

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

1134

<dl>

1135

1136

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

1137

1138

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

1139

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

1140

1141

</dl>

1142

</div>

1143

1144

<p>When true the <code>formatDate</code> function is applied to the <code>prevText</code>, <code>nextText</code>, and <code>currentText</code> values before display, allowing them to display the target month names for example.</p>

1145

</div>

1146

1147

<h4>Code examples</h4>

1148

1149

1150

<dt>

1151

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

1152

</dt>

1153

<dd>

1154

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

1155

</dd>

1156

1157

1158

<dt>

1159

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

1160

</dt>

1161

<dd>

1162

<pre><code>//getter

1163

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

1164

//setter

1165

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

1166

</dd>

1167

1168

</dl>

1169

</div>

1170

</li>

1171

1172

1173

1174

1175

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

1176

<dl>

1177

1178

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

1179

1180

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

1181

1182

1183

</dl>

1184

</div>

1185

1186

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

1187

</div>

1188

1189

<h4>Code examples</h4>

1190

1191

1192

<dt>

1193

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

1194

</dt>

1195

<dd>

1196

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

1197

</dd>

1198

1199

1200

<dt>

1201

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

1202

</dt>

1203

<dd>

1204

<pre><code>//getter

1205

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

1206

//setter

1207

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

1208

</dd>

1209

1210

</dl>

1211

</div>

1212

</li>

1213

1214

1215

1216

1217

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

1218

<dl>

1219

1220

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

1221

1222

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

1223

1224

1225

</dl>

1226

</div>

1227

1228

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

1229

</div>

1230

1231

<h4>Code examples</h4>

1232

1233

1234

<dt>

1235

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

1236

</dt>

1237

<dd>

1238

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

1239

</dd>

1240

1241

1242

<dt>

1243

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

1244

</dt>

1245

<dd>

1246

<pre><code>//getter

1247

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

1248

//setter

1249

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

1250

</dd>

1251

1252

</dl>

1253

</div>

1254

</li>

1255

1256

1257

1258

1259

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

1260

<dl>

1261

1262

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

1263

1264

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

1265

1266

1267

</dl>

1268

</div>

1269

1270

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

1271

</div>

1272

1273

<h4>Code examples</h4>

1274

1275

1276

<dt>

1277

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

1278

</dt>

1279

<dd>

1280

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

1281

</dd>

1282

1283

1284

<dt>

1285

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

1286

</dt>

1287

<dd>

1288

<pre><code>//getter

1289

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

1290

//setter

1291

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

1292

</dd>

1293

1294

</dl>

1295

</div>

1296

</li>

1297

1298

1299

1300

1301

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

1302

<dl>

1303

1304

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

1305

1306

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

1307

1308

1309

</dl>

1310

</div>

1311

1312

<p>Set the cutoff year for determining the century for a date (used in conjunction with <code>dateFormat</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>

1313

</div>

1314

1315

<h4>Code examples</h4>

1316

1317

1318

<dt>

1319

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

1320

</dt>

1321

<dd>

1322

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

1323

</dd>

1324

1325

1326

<dt>

1327

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

1328

</dt>

1329

<dd>

1330

<pre><code>//getter

1331

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

1332

//setter

1333

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

1334

</dd>

1335

1336

</dl>

1337

</div>

1338

</li>

1339

1340

1341

1342

1343

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

1344

<dl>

1345

1346

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

1347

1348

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

1349

1350

1351

</dl>

1352

</div>

1353

1354

<p>Set the name of the animation used to show/hide the datepicker. Use 'show' (the default), 'slideDown', 'fadeIn', or 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>.</p>

1355

</div>

1356

1357

<h4>Code examples</h4>

1358

1359

1360

<dt>

1361

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

1362

</dt>

1363

<dd>

1364

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

1365

</dd>

1366

1367

1368

<dt>

1369

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

1370

</dt>

1371

<dd>

1372

<pre><code>//getter

1373

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

1374

//setter

1375

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

1376

</dd>

1377

1378

</dl>

1379

</div>

1380

</li>

1381

1382

1383

1384

1385

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

1386

<dl>

1387

1388

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

1389

1390

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

1391

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

1392

1393

</dl>

1394

</div>

1395

1396

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

1397

</div>

1398

1399

<h4>Code examples</h4>

1400

1401

1402

<dt>

1403

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

1404

</dt>

1405

<dd>

1406

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

1407

</dd>

1408

1409

1410

<dt>

1411

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

1412

</dt>

1413

<dd>

1414

<pre><code>//getter

1415

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

1416

//setter

1417

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

1418

</dd>

1419

1420

</dl>

1421

</div>

1422

</li>

1423

1424

1425

1426

1427

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

1428

<dl>

1429

1430

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

1431

1432

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

1433

1434

1435

</dl>

1436

</div>

1437

1438

<p>Specify where in a multi-month display the current month shows, starting from 0 at the top/left.</p>

1439

</div>

1440

1441

<h4>Code examples</h4>

1442

1443

1444

<dt>

1445

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

1446

</dt>

1447

<dd>

1448

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

1449

</dd>

1450

1451

1452

<dt>

1453

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

1454

</dt>

1455

<dd>

1456

<pre><code>//getter

1457

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

1458

//setter

1459

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

1460

</dd>

1461

1462

</dl>

1463

</div>

1464

</li>

1465

1466

1467

1468

1469

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

1470

<dl>

1471

1472

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

1473

1474

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

1475

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

1476

1477

</dl>

1478

</div>

1479

1480

<p>Whether to show the month after the year in the header.</p>

1481

</div>

1482

1483

<h4>Code examples</h4>

1484

1485

1486

<dt>

1487

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

1488

</dt>

1489

<dd>

1490

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

1491

</dd>

1492

1493

1494

<dt>

1495

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

1496

</dt>

1497

<dd>

1498

<pre><code>//getter

1499

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

1500

//setter

1501

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

1502

</dd>

1503

1504

</dl>

1505

</div>

1506

</li>

1507

1508

1509

1510

1511

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

1512

<dl>

1513

1514

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

1515

1516

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

1517

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

1518

1519

</dl>

1520

</div>

1521

1522

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

1523

</div>

1524

1525

<h4>Code examples</h4>

1526

1527

1528

<dt>

1529

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

1530

</dt>

1531

<dd>

1532

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

1533

</dd>

1534

1535

1536

<dt>

1537

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

1538

</dt>

1539

<dd>

1540

<pre><code>//getter

1541

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

1542

//setter

1543

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

1544

</dd>

1545

1546

</dl>

1547

</div>

1548

</li>

1549

1550

1551

1552

1553

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

1554

<dl>

1555

1556

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

1557

1558

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

1559

1560

1561

</dl>

1562

</div>

1563

1564

<p>If using one of the jQuery UI effects for <code>showAnim</code>, you can provide additional settings for that animation via this option.</p>

1565

</div>

1566

1567

<h4>Code examples</h4>

1568

1569

1570

<dt>

1571

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

1572

</dt>

1573

<dd>

1574

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

1575

</dd>

1576

1577

1578

<dt>

1579

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

1580

</dt>

1581

<dd>

1582

<pre><code>//getter

1583

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

1584

//setter

1585

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

1586

</dd>

1587

1588

</dl>

1589

</div>

1590

</li>

1591

1592

1593

1594

1595

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

1596

<dl>

1597

1598

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

1599

1600

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

1601

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

1602

1603

</dl>

1604

</div>

1605

1606

<p>Display dates in other months (non-selectable) at the start or end of the current month.</p>

1607

</div>

1608

1609

<h4>Code examples</h4>

1610

1611

1612

<dt>

1613

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

1614

</dt>

1615

<dd>

1616

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

1617

</dd>

1618

1619

1620

<dt>

1621

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

1622

</dt>

1623

<dd>

1624

<pre><code>//getter

1625

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

1626

//setter

1627

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

1628

</dd>

1629

1630

</dl>

1631

</div>

1632

</li>

1633

1634

1635

1636

1637

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

1638

<dl>

1639

1640

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

1641

1642

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

1643

1644

1645

</dl>

1646

</div>

1647

1648

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

1649

</div>

1650

1651

<h4>Code examples</h4>

1652

1653

1654

<dt>

1655

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

1656

</dt>

1657

<dd>

1658

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

1659

</dd>

1660

1661

1662

<dt>

1663

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

1664

</dt>

1665

<dd>

1666

<pre><code>//getter

1667

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

1668

//setter

1669

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

1670

</dd>

1671

1672

</dl>

1673

</div>

1674

</li>

1675

1676

1677

1678

1679

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

1680

<dl>

1681

1682

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

1683

1684

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

1685

1686

1687

</dl>

1688

</div>

1689

1690

<p>Control the range of years displayed in the year drop-down: either relative to current year (-nn:+nn) or absolute (nnnn:nnnn).</p>

1691

</div>

1692

1693

<h4>Code examples</h4>

1694

1695

1696

<dt>

1697

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

1698

</dt>

1699

<dd>

1700

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

1701

</dd>

1702

1703

1704

<dt>

1705

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

1706

</dt>

1707

<dd>

1708

<pre><code>//getter

1709

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

1710

//setter

1711

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

1712

</dd>

1713

1714

</dl>

1715

</div>

1716

</li>

1717

1718

</ul>

1719

</div>

1720

1721

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

1722

1723

1724

1725

1726

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

1727

<dl>

1728

1729

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

1730

</dl>

1731

</div>

1732

1733

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

1734

</div>

1735

1736

<h4>Code examples</h4>

1737

1738

1739

<dt>

1740

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

1741

</dt>

1742

<dd>

1743

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

1744

beforeShow: function(input) { ... }

1745

});</code></pre>

1746

</dd>

1747

1748

</dl>

1749

</div>

1750

</li>

1751

1752

1753

1754

1755

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

1756

<dl>

1757

1758

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

1759

</dl>

1760

</div>

1761

1762

<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 is it displayed.</p>

1763

</div>

1764

1765

<h4>Code examples</h4>

1766

1767

1768

<dt>

1769

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

1770

</dt>

1771

<dd>

1772

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

1773

beforeShowDay: function(date) { ... }

1774

});</code></pre>

1775

</dd>

1776

1777

</dl>

1778

</div>

1779

</li>

1780

1781

1782

1783

1784

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

1785

<dl>

1786

1787

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

1788

</dl>

1789

</div>

1790

1791

<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 and the datepicker instance as parameters. <code>this</code> refers to the associated input field.</p>

1792

</div>

1793

1794

<h4>Code examples</h4>

1795

1796

1797

<dt>

1798

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

1799

</dt>

1800

<dd>

1801

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

1802

onChangeMonthYear: function(date) { ... }

1803

});</code></pre>

1804

</dd>

1805

1806

</dl>

1807

</div>

1808

</li>

1809

1810

1811

1812

1813

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

1814

<dl>

1815

1816

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

1817

</dl>

1818

</div>

1819

1820

<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 a Date and the datepicker instance as parameters. <code>this</code> refers to the associated input field.</p>

1821

</div>

1822

1823

<h4>Code examples</h4>

1824

1825

1826

<dt>

1827

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

1828

</dt>

1829

<dd>

1830

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

1831

onClose: function(date) { ... }

1832

});</code></pre>

1833

</dd>

1834

1835

</dl>

1836

</div>

1837

</li>

1838

1839

1840

1841

1842

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

1843

<dl>

1844

1845

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

1846

</dl>

1847

</div>

1848

1849

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

1850

</div>

1851

1852

<h4>Code examples</h4>

1853

1854

1855

<dt>

1856

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

1857

</dt>

1858

<dd>

1859

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

1860

onSelect: function(dateText) { ... }

1861

});</code></pre>

1862

</dd>

1863

1864

</dl>

1865

</div>

1866

</li>

1867

1868

</ul>

1869

</div>

1870

1871

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

1872

1873

1874

1875

1876

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

1877

<dl>

1878

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

1879

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

1880

1881

1882

1883

1884

1885

1886

1887

)</dd>

1888

</dl>

1889

</div>

1890

1891

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

1892

</div>

1893

</li>

1894

1895

1896

1897

1898

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

1899

<dl>

1900

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

1901

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

1902

1903

1904

1905

1906

1907

1908

1909

)</dd>

1910

</dl>

1911

</div>

1912

1913

<p>Disable the datepicker.</p>

1914

</div>

1915

</li>

1916

1917

1918

1919

1920

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

1921

<dl>

1922

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

1923

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

1924

1925

1926

1927

1928

1929

1930

1931

)</dd>

1932

</dl>

1933

</div>

1934

1935

<p>Enable the datepicker.</p>

1936

</div>

1937

</li>

1938

1939

1940

1941

1942

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

1943

<dl>

1944

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

1945

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

1946

1947

, optionName

1948

1949

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

1950

1951

1952

1953

)</dd>

1954

</dl>

1955

</div>

1956

1957

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

1958

</div>

1959

</li>

1960

1961

1962

1963

1964

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

1965

<dl>

1966

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

1967

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

1968

1969

, dateText

1970

1971

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

1972

1973

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

1974

1975

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

1976

</dl>

1977

</div>

1978

1979

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

1980

</p><p>dateText: the initial date for the date picker.

1981

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

1982

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

1983

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

1984

</div>

1985

</li>

1986

1987

1988

1989

1990

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

1991

<dl>

1992

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

1993

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

1994

1995

1996

1997

1998

1999

2000

2001

)</dd>

2002

</dl>

2003

</div>

2004

2005

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

2006

</div>

2007

</li>

2008

2009

2010

2011

2012

2013

<dl>

2014

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

2015

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

2016

2017

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

2018

2019

2020

2021

2022

2023

)</dd>

2024

</dl>

2025

</div>

2026

2027

<p>Close a previously opened date picker.

2028

</p><p>speed: The speed at which to close the date picker.</p>

2029

</div>

2030

</li>

2031

2032

2033

2034

2035

2036

<dl>

2037

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

2038

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

2039

2040

2041

2042

2043

2044

2045

2046

)</dd>

2047

</dl>

2048

</div>

2049

2050

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

2051

</div>

2052

</li>

2053

2054

2055

2056

2057

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

2058

<dl>

2059

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

2060

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

2061

2062

2063

2064

2065

2066

2067

2068

)</dd>

2069

</dl>

2070

</div>

2071

2072

<p>Returns the current date for the datepicker.</p>

2073

</div>

2074

</li>

2075

2076

2077

2078

2079

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

2080

<dl>

2081

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

2082

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

2083

2084

, date

2085

2086

2087

2088

2089

2090

)</dd>

2091

</dl>

2092

</div>

2093

2094

<p>Sets the current date for the datepicker. The new date may also be 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>

2095

</div>

2096

</li>

2097

2098

</ul>

2099

</div>

2100

2101

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

2102

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

2103

</p>

2104

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

2105

</p>

2106

2107

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

2108

<div id="ui-datepicker-div" class="<strong>ui-datepicker</strong> ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"><br />

2109

   <div class="<strong>ui-datepicker-header</strong> ui-widget-header ui-helper-clearfix ui-corner-all"><br />

2110

      <a class="<strong>ui-datepicker-prev</strong> ui-corner-all">title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a><br />

2111

      <a class="<strong>ui-datepicker-next</strong> ui-corner-all" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a><br />

2112

      <div class="<strong>ui-datepicker-title</strong>"><br />

2113

         <span class="<strong>ui-datepicker-month</strong>">January</span><span class="<strong>ui-datepicker-year</strong>">2009</span><br />

2114

      </div><br />

2115

   </div><br />

2116

   <table class="<strong>ui-datepicker-calendar</strong>"><br />

2117

2118

2119

         <th class="<strong>ui-datepicker-week-end</strong>"><span title="Sunday">Su</span></th><br />

2120

         ...<br />

2121

      </tr><br />

2122

      </thead><br />

2123

2124

         <td class="<strong>ui-datepicker-week-end ui-datepicker-other-month</strong> "> 1 </td><br />

2125

         ...<br />

2126

      </tr><br />

2127

      </tbody><br />

2128

   </table><br />

2129

   <div class="<strong>ui-datepicker-buttonpane</strong> ui-widget-content"><br />

2130

      <button type="button" class="<strong>ui-datepicker-current</strong> ui-state-default ui-priority-secondary ui-corner-all">Today</button><br />

2131

      <button type="button" class="<strong>ui-datepicker-close</strong> ui-state-default ui-priority-primary ui-corner-all">Done</button><br />

2132

   </div><br />

2133

</div><br />

2134

2135

2136

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 <input type="text" /> or <div></div>.

2137

</strong>

2138

</p>

2139

2140

</div>

2141

</div>

2142

2143

</p><!--

2144

Pre-expand include size: 82090 bytes

2145

Post-expand include size: 159207 bytes

2146

Template argument size: 100044 bytes

2147

Maximum: 2097152 bytes

2148

-->

2149

2150

Older »