JavaScript API : Quick Start


Start Date

End Date



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
Download Basic Date Picker Trial

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


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

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

// Get the SelectedDate as a formatted string.
// Same formatted value which appears in the textbox.

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

// Set Enabled status of date picker.

JavaScript Date object Helpers
// Add specified number of days to a Date.

// Add specified number of Months to Date object.

// Add specified number of Years to Date object.

// Add specified number of Hours to Date object.

// Add specified number of Minutes to Date object.

// Add specified number of Seconds to Date object.


Download samples

See Also

ClientSelectionChangedFunction | ClientCalendarDisplayFunction