Custom JavaScript function which is fired just before internal client-side MonthChanged Event is fired. Example: BasicDatePicker.OnClientBeforeVisibleMonthChanged = "myCustomBeforeVisibleMonthChangedFunction";
A string that represents the custom JavaScript function name to be called. The default value is String.Empty.
The following table lists the parameters that are passed by default to the custom OnClientBeforeVisibleMonthChanged JavaScript function.
| Parameter | Description |
|---|---|
| sender | A client-side instance of the BasicDatePicker control. |
| newVisibleDate | The first day of the new visible month. |
The following table lists all properties available through the sender (BasicDatePicker) client-side JavaScript object.
| Property | Description |
|---|---|
| viewingYear | Returns the year of the current visible month. Example: var visibleYear = sender.viewingYear |
| viewingMonth | Returns the month of the current visible month. Example: var visibleMonth = sender.viewingMonth |
| selectedYear | Returns the year of the SelectedDate. Example: var currentSelectedYear = sender.selectedYear |
| selectedMonth | Returns the month of the SelectedDate. Example: var currentSelectedMonth = sender.selectedMonth |
| selectedDay | Returns the day number of the SelectedDay. Example: var currentSelectedDay = sender.selectedDay |
The following table lists all functions available through the client-side JavaScript API.
| JavaScript Function | Description |
|---|---|
| getControlId() | Gets the Id of the currently instantiated date picker. |
| formatDate(date) | Returns the date as a formatted string as per DateFormat or DateFormat properties. |
| parseDate(dateAsString) | Returns a Date object of the string supplied. Formats as per DateFormat or DateFormat properties. |
| setSelectedDate(date) | Set the SelectedDate of the current date picker. |
| setSelectedDate(date, datePickerId) | Set the SelectedDate of another date picker. |
| getSelectedDate() | Get the SelectedDate of the current date picker as a Date object. |
| getSelectedDate(datePickerId) | Get the SelectedDate of another date picker as a Date object. |
| getSelectedDateFormatted() | Get the SelectedDate as a formatted string of the current BasicDatePicker. Same formatted value which appears in the textbox. |
| getSelectedDateFormatted(datePickerId) | Get the SelectedDate as a formatted string of another BasicDatePicker. Same formatted value which appears in the textbox. |
| getEnabled() | Get boolean(true/false) of Enabled status of current BasicDatePicker. |
| getEnabled(datePickerId) | Get boolean(true/false) of Enabled status of another BasicDatePicker. |
| setEnabled(bool) | Set Enabled status of current BasicDatePicker. |
| setEnabled(bool, datePickerId) | Set Enabled status of another BasicDatePicker. |
The following helper functions extend the JavaScript Date object.
| JavaScript Date Helper Function | Description (Extends Date Object) |
|---|---|
| Date.addDays(numberOfDays) | Add specified number of days to a Date. |
| Date.addMonths(numberOfMonths) | Add specified number of Months to Date object. |
| Date.addYears(numberOfYears) | Add specified number of Years to Date object. |
| Date.addHours(numberOfHours) | Add specified number of Hours to Date object. |
| Date.addMinutes(numberOfMinutes) | Add specified number of Minutes to Date object. |
| Date.addSeconds(numberOfSeconds) | Add specified number of Seconds to Date object. |
The following is a full list of all params availble client-side.
| Parameter | Property Reference |
|---|---|
| autoPostBack | See AutoPostBack |
| buttonText | See ButtonText |
| calendarStyle | See CalendarStyle |
| calendarStyleCssClass | See CalendarStyle |
| culture | See Culture |
| dateFormat | See DateFormat |
| dayHeaderStyle | See DayHeaderStyle |
| dayHeaderStyleCssClass | See DayHeaderStyle |
| dayNameFormat | See DayNameFormat |
| dayStatusBarText | See DayStatusBarText |
| dayStyle | See DayStyle |
| dayStyleCssClass | See DayStyle |
| openCalendarOnTextBoxFocus | See OpenCalendarOnTextBoxFocus |
| datePickerDisplayType | See DatePickerDisplayType |
| downYearSelectorImageFileName | See DownYearSelectorImageFileName |
| downYearSelectorText | See DownYearSelectorText |
| enabled | See Enabled |
| firstDayOfWeek | See FirstDayOfWeek |
| footerStyle | See FooterStyle |
| footerStyleCssClass | See FooterStyle |
| footNoteStyle | See FootNoteStyle |
| footNoteStyleCssClass | See FootNoteStyle |
| footNoteText | See FootNoteText |
| forceSixRows | See ForceSixRows |
| maximumDate | See MaximumDate |
| minimumDate | See MinimumDate |
| monthSelectorEnabled | See MonthSelectorEnabled |
| monthSelectorXOffset | See MonthSelectorXOffset |
| monthSelectorYOffset | See MonthSelectorYOffset |
| nextMonthImageFileName | See NextMonthImageFileName |
| nextMonthText | See NextMonthText |
| nextPrevFormat | See NextPrevFormat |
| nextPrevMonthImageHeight | See NextPrevMonthImageHeight |
| nextPrevMonthImageWidth | See NextPrevMonthImageWidth |
| nextPrevStyle | See NextPrevStyle |
| nextPrevStyleCssClass | See NextPrevStyle |
| noneButtonStyle | See NoneButtonStyle |
| noneButtonStyleCssClass | See NoneButtonStyle |
| noneButtonText | See NoneButtonText |
| nullDateText | See NullDateText |
| onClientAfterCalendarOpen | See OnClientAfterCalendarOpen |
| onClientBeforeCalendarOpen | See OnClientBeforeCalendarOpen |
| onClientBeforeCalendarClose | See OnClientBeforeCalendarClose |
| onClientAfterSelectionChanged | See OnClientAfterSelectionChanged |
| onClientAfterVisibleMonthChanged | See OnClientAfterVisibleMonthChanged |
| onClientBeforeSelectionChanged | See OnClientBeforeSelectionChanged |
| onClientBeforeVisibleMonthChanged | See OnClientBeforeVisibleMonthChanged |
| onClientDayRender | See OnClientDayRender |
| otherMonthDayStyle | See OtherMonthDayStyle |
| otherMonthDayStyleCssClass | See OtherMonthDayStyle |
| popUpStyle | See PopUpStyle |
| popUpStyleCssClass | See PopUpStyle |
| prevMonthImageFileName | See PrevMonthImageFileName |
| prevMonthText | See PrevMonthText |
| selectableNextMonthDays | See SelectableNextMonthDays |
| selectablePrevMonthDays | See SelectablePrevMonthDays |
| selectableWeekDays | See SelectableWeekDays |
| selectableWeekendDays | See SelectableWeekendDays |
| selectedDayStyle | See SelectedDayStyle |
| selectedDayStyleCssClass | See SelectedDayStyle |
| showDayHeader | See ShowDayHeader |
| showDaysInNextMonth | See ShowDaysInNextMonth |
| showDaysInPrevMonth | See ShowDaysInPrevMonth |
| showNextPrevMonth | See ShowNextPrevMonth |
| showNoneButton | See ShowNoneButton |
| showTitle | See ShowTitle |
| showTodayButton | See ShowTodayButton |
| showWeekNumbers | See ShowWeekNumbers |
| specialDates | See SpecialDates |
| titleStyle | See TitleStyle |
| titleStyleCssClass | See TitleStyle |
| todayButtonStyle | See TodayButtonStyle |
| todayButtonStyleCssClass | See TodayButtonStyle |
| todayButtonText | See TodayButtonText |
| todayDayStyle | See TodayDayStyle |
| todayDayStyleCssClass | See TodayDayStyle |
| twoDigitYearBreak | See TwoDigitYearBreak |
| upDownYearSelectorFormat | See UpDownYearSelectorFormat |
| upDownYearSelectorImageHeight | See UpDownYearSelectorImageHeight |
| upDownYearSelectorImageWidth | See UpDownYearSelectorImageWidth |
| upYearSelectorImageFileName | See UpYearSelectorImageFileName |
| upYearSelectorText | See UpYearSelectorText |
| visibleDate | See VisibleDate |
| weekendDayStyle | See WeekendDayStyle |
| weekendDayStyleCssClass | See WeekendDayStyle |
| weekNumberStyle | See WeekNumberStyle |
| weekNumberStyleCssClass | See WeekNumberStyle |
| xOffset | See XOffset |
| yearSelectorEnabled | See YearSelectorEnabled |
| yearSelectorXOffset | See YearSelectorXOffset |
| yearSelectorYOffset | See YearSelectorYOffset |
| yOffset | See YOffset |
[Visual Basic, C#] The following example demonstrates how to use the OnClientBeforeVisibleMonthChanged and OnClientAfterSelectionChanged property to link two BasicDatePicker controls together to allow users to select a 7 day (week) period.
[Visual Basic]
<%@ Page Language="VB" AutoEventWireup="True" %>
<%@ Register TagPrefix="bdp" Namespace="BasicFrame.WebControls" Assembly="BasicFrame.WebControls.BasicDatePicker" %>
<html>
<head>
<title>Basic Date Picker OnClientBeforeVisibleMonthChanged Example</title>
<script runat="server">
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
If Not IsPostBack Then
BasicDatePicker1.SelectedDate = DateTime.Today
BasicDatePicker2.SelectedDate = DateTime.Today.AddDays(7)
End If
End Sub
</script>
<script type="text/javascript">
function fromBefore(sender, newVisibleDate) {
var tempDate = new Date(newVisibleDate.getFullYear(), newVisibleDate.getMonth(), sender.selectedDay);
sender.setSelectedDate(tempDate);
sender.setSelectedDate(tempDate.addDays(7),"BasicDatePicker2")
}
function fromAfter(sender) {
sender.setSelectedDate(sender.getSelectedDate().addDays(7),"BasicDatePicker2")
}
function toBefore(sender, newVisibleDate) {
var tempDate = new Date(newVisibleDate.getFullYear(), newVisibleDate.getMonth(), sender.selectedDay);
sender.setSelectedDate(tempDate);
sender.setSelectedDate(tempDate.addDays(-7),"BasicDatePicker1")
}
function toAfter(sender) {
sender.setSelectedDate(sender.getSelectedDate().addDays(-7),"BasicDatePicker1")
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<h3>Basic Date Picker OnClientBeforeVisibleMonthChanged Example</h3>
Week starting <bdp:basicdatepicker id="BasicDatePicker1"
runat="server"
TextBoxColumns="12"
DatePickerDisplayType="TextBox"
OnClientBeforeVisibleMonthChanged="fromBefore"
OnClientAfterSelectionChanged="fromAfter"></bdp:basicdatepicker>
ending <bdp:basicdatepicker id="BasicDatePicker2"
runat="server"
TextBoxColumns="12"
DatePickerDisplayType="TextBox"
OnClientBeforeVisibleMonthChanged="toBefore"
OnClientAfterSelectionChanged="toAfter"></bdp:basicdatepicker>.
</form>
</body>
</html>
[C#]
<%@ Page Language="C#" AutoEventWireup="True" %>
<%@ Register TagPrefix="bdp" Namespace="BasicFrame.WebControls" Assembly="BasicFrame.WebControls.BasicDatePicker" %>
<html>
<head>
<title>Basic Date Picker OnClientBeforeVisibleMonthChanged Example</title>
<script runat="server">
void Page_Load(Object sender, System.EventArgs e)
{
if(!IsPostBack)
{
BasicDatePicker1.SelectedDate = DateTime.Today;
BasicDatePicker2.SelectedDate = DateTime.Today.AddDays(7);
}
}
</script>
<script type="text/javascript">
function fromBefore(sender, newVisibleDate) {
var tempDate = new Date(newVisibleDate.getFullYear(), newVisibleDate.getMonth(), sender.selectedDay);
sender.setSelectedDate(tempDate);
sender.setSelectedDate(tempDate.addDays(7),"BasicDatePicker2")
}
function fromAfter(sender) {
sender.setSelectedDate(sender.getSelectedDate().addDays(7),"BasicDatePicker2")
}
function toBefore(sender, newVisibleDate) {
var tempDate = new Date(newVisibleDate.getFullYear(), newVisibleDate.getMonth(), sender.selectedDay);
sender.setSelectedDate(tempDate);
sender.setSelectedDate(tempDate.addDays(-7),"BasicDatePicker1")
}
function toAfter(sender) {
sender.setSelectedDate(sender.getSelectedDate().addDays(-7),"BasicDatePicker1")
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<h3>Basic Date Picker OnClientBeforeVisibleMonthChanged Example</h3>
Week starting <bdp:basicdatepicker id="BasicDatePicker1"
runat="server"
TextBoxColumns="12"
DatePickerDisplayType="TextBox"
OnClientBeforeVisibleMonthChanged="fromBefore"
OnClientAfterSelectionChanged="fromAfter"></bdp:basicdatepicker>
ending <bdp:basicdatepicker id="BasicDatePicker2"
runat="server"
TextBoxColumns="12"
DatePickerDisplayType="TextBox"
OnClientBeforeVisibleMonthChanged="toBefore"
OnClientAfterSelectionChanged="toAfter"></bdp:basicdatepicker>.
</form>
</body>
</html>
BasicDatePicker Class | BasicFrame.WebControls Namespace | OnClientDayRender | OnClientBeforeCalendarOpen | OnClientAfterCalendarOpen | OnClientBeforeCalendarClose | OnClientBeforeSelectionChanged | OnClientAfterSelectionChanged | OnClientAfterVisibleMonthChanged