This is a migrated thread and some comments may be shown as answers.

[Solved] RadDatePicker Does not working in Firefox

6 Answers 225 Views

Calendar

This is a migrated thread and some comments may be shown as answers.

Anto (DLL Version : 2008.3.1314.35) asked on 15 Sep 2010, 12:34 PM

Hi All

Have a RadDatePicker, which works fine.

Need only month and Year to view.

So have called up a JaVAscript function which shows date and month

It works fine in IE. In firefox nothing happens when RadDatePicker is clicked.

function setCalendarTable() {

var picker = $find("<%= radDate.ClientID %>");

var calendar = picker.get_calendar();

var fastNavigation = calendar._getFastNavigation();

$clearHandlers(picker.get_popupButton());

picker.get_popupButton().href = "javascript:void(0);";

$addHandler(picker.get_popupButton(), "click", function() {

var textbox = picker.get_textBox();

//adjust where to show the popup table

var x, y;

var adjustElement = textbox;

if (textbox.style.display == "none")

adjustElement = picker.get_popupImage();

var pos = picker.getElementPosition(adjustElement);

x = pos.x;

y = pos.y + adjustElement.offsetHeight;

var e = {

clientX: x,

clientY: y - document.documentElement.scrollTop

};

//synchronize the input date if set with the picker one

var date = picker.get_selectedDate();

if (date) {

calendar.get_focusedDate()[0] = date.getFullYear();

calendar.get_focusedDate()[1] = date.getMonth() + 1;

}

$get(calendar._titleID).onclick(e);

return false;

});

fastNavigation.OnOK =

function() {

var date = new Date(fastNavigation.Year, fastNavigation.Month, 1);

picker.get_dateInput().set_selectedDate(date);

fastNavigation.Popup.Hide();

}

fastNavigation.OnToday =

function() {

var date = new Date();

picker.get_dateInput().set_selectedDate(date);

fastNavigation.Popup.Hide();

}

This is the function called in .cs page

if (!IsPostBack)

{

radDate.DatePopupButton.Attributes.Add("onclick", "setCalendarTable();return false;");

radDate.SelectedDate = Convert.ToDateTime(DateTime.Now.ToString("MMMM-yyyy"));

}

Is there any option to rectify this.

-Anto

6 Answers, 1 is accepted

answered on 15 Sep 2010, 04:15 PM

Hello Anto,

Because of what seems to be a difference in the client-side event sequence between IE and other browsers ( I tested and confirmed for Firefox and Chrome ), calling the setCalendarTable() method on the datepicker's button click is too late for the modified picker to load (for browsers except IE). That is why in the CodeLibrary article which provides this sample code, the method is invoked on the client-side page load.

So, my suggestion is that you follow the CodeLibrary logic and add the following line at the beginning of your javascript:

Sys.Application.add_load(setCalendarTable);

Regards,
Tsvetina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 29 Sep 2010, 06:36 AM

Hi Tsvetina

I Have copied the line and placed it.

Went through the CodeLibrary article and replaced it.

But eventhough anything happens.

Again have sent the JavaScript

//override the onload event handler to change the picker after the page is loaded

Sys.Application.add_load(setCalendarTable);

function setCalendarTable() {

var picker = $find("<%= radDate.ClientID %>");

var calendar = picker.get_calendar();

var fastNavigation = calendar._getFastNavigation();

$clearHandlers(picker.get_popupButton());

picker.get_popupButton().href = "javascript:void(0);";

$addHandler(picker.get_popupButton(), "click", function() {

var textbox = picker.get_textBox();

//adjust where to show the popup table

var x, y;

var adjustElement = textbox;

if (textbox.style.display == "none")

adjustElement = picker.get_popupImage();

var pos = picker.getElementPosition(adjustElement);

x = pos.x;

y = pos.y + adjustElement.offsetHeight;

var e = {

clientX: x,

clientY: y - document.documentElement.scrollTop

};

//synchronize the input date if set with the picker one

var date = picker.get_selectedDate();

if (date) {

calendar.get_focusedDate()[0] = date.getFullYear();

calendar.get_focusedDate()[1] = date.getMonth() + 1;

}

$get(calendar._titleID).onclick(e);

return false;

});

fastNavigation.OnOK =

function() {

var date = new Date(fastNavigation.Year, fastNavigation.Month, 1);

picker.get_dateInput().set_selectedDate(date);

fastNavigation.Popup.Hide();

}

fastNavigation.OnToday =

function() {

var date = new Date();

picker.get_dateInput().set_selectedDate(date);

fastNavigation.Popup.Hide();

}

I think so, I have missed out something. Have checked it.

-Anto

answered on 29 Sep 2010, 03:16 PM

test.zip

Hi Anto,

I am attaching a runnable test project where I posted the javascript and added only a RadDatePicker to tha page, which is using the 2008.3.13.14 version of RadControls under .NET 3.5. With this configuration it is working when I browse it with Firefox. Can you find a way to replicate the issue in the sample webform?

Regards,
Tsvetina
the Telerik team