Samples

  

JavaScript API : Quick Start

Example

Start Date

End Date

 

Remarks

This sample demonstrates selecting a Start Date and automatically advancing the End Date seven (7) days.

Basic Date Picker includes a powerful client side JavaScript API

An instance of each date picker control can be accessed in JavaScript using the client-side id of the date picker control. The client-side id will be the same value as the .ClientID property from the server-side.

NOTE: The client-side id and server-side id may not be the same.

Custom user defined JavaScript functions can be called. See:

  1. OnClientBeforeCalendarDisplay - fires before the Calendar is opened .
  2. OnClientAfterCalendarDisplay - fires after the Calendar is opened.
  3. OnClientBeforeVisibleMonthChanged - fires before the month is changed.
  4. OnClientAfterVisibleMonthChanged - fires after the month is changed
  5. OnClientBeforeSelectionChanged - fires before a new date is selected.
  6. OnClientAfterSelectionChanged - fires after a new date is selected.
  7. OnClientDayRender - fires on creation of each day. Parameters passed to custom function include:
    1. sender (BasicDatePicker) object
    2. Date being created
    3. Cell html element

Basic Date Picker:

Quick Start

AutoPostBack

DataGrid

Minimum/Maximum Dates

Globalization

Custom Style

Dynamic Creation

Misc. Properties

Special Dates


JavaScript API:

Quick Start

Advanced Min/Max Dates

DayRender


BDPLite:

Quick Start

Globalization

Validators


Web Accessibility & Validation:

XHTML, Section 508 & WAI

Download Basic Date Picker Trial

The Basic Date Picker JavaScript API includes the following client-side functions:

[JavaScript]

// A client-side (JavaScript) instance of the current date picker object.
BasicDatePicker1 

// Set the SelectedDate of the "BasicDatePicker1" control.
BasicDatePicker1.setSelectedDate(new Date()) 

// Set the SelectedDate of another date picker.
BasicDatePicker2.setSelectedDate(new Date()) 

// Get the SelectedDate. Returns a JavaScript Date object
BasicDatePicker1.getSelectedDate() 

// Get the SelectedDate as a formatted string.
// Same formatted value which appears in the textbox.
BasicDatePicker1.getSelectedDateFormatted() 

// Get boolean(true/false) of Enabled status of date picker.
BasicDatePicker1.getEnabled() 

// Set Enabled status of date picker.
BasicDatePicker1.setEnabled(bool) 

JavaScript Date object Helpers
// Add specified number of days to a Date.
Date.addDays(numberOfDays) 

// Add specified number of Months to Date object.
Date.addMonths(numberOfMonths) 

// Add specified number of Years to Date object.
Date.addYears(numberOfYears)

// Add specified number of Hours to Date object.
Date.addHours(numberOfHours)

// Add specified number of Minutes to Date object.
Date.addMinutes(numberOfMinutes)

// Add specified number of Seconds to Date object.
Date.addSeconds(numberOfSeconds)

 

Download samples

See Also

ClientSelectionChangedFunction | ClientCalendarDisplayFunction