skinning a datetime picker

[andieje]

Hi

I want to customise the default skin for the date time picker. I changed the Input.Default.css file and the set the useEmbeddedskins property to false. The date text box is not displaying properly and this is because the background image for the textbox is missing. I can see the image in the DatePicker folder in the skins directory but I cannot find a css file for the date picker that actually tells the datepicker to use this as a background. The calendar part is not displaying properly either. I have included the calendar.css file in my page but the images are not displaying properly.

Please can you tell me what i have done wrong. You can see the page here
http://84.92.22.217/SureTrack2/Tracking/TrackingMap.aspx

thanks a lot
andrea

[andieje]

i've looked a bit more and one of the missing images is called

datePickerPopup.gif











I can see this in the calendar images folder but i can't find any style sheet that references this image. It's not in the Calendar.default.css file as you would expect



thanks

[Iana Tsolova]

Hi andieje,

When you set the EnableEmbeddedSkins property of the DatePicker to false, you need explicitly to register the styles for your custom skin. Hence you need link references to the used css files in the Page's head section. And respectively you have to set the properties for the popup image/hover image and the calendar navigation image properties to set the images you want to display.

Please find the attached sample how the described solution is implemented and let us know if you still have problems. You may also be interested in reviewing these online help resources:

http://www.telerik.com/help/radcontrols/prometheus/?SkinRegistration.html
http://www.telerik.com/help/radcontrols/prometheus/?CreateCustomSkin.html
http://www.telerik.com/help/radcontrols/prometheus/?RadStyleSheetManager.html

http://www.telerik.com/community/forums/thread/b311D-bbmcme.aspx

Best regards,
Iana
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[andieje]

Hi

If you look at the page i mention in my email you will see that I have already set enableEmbedded skins to false and you will see in the html source that i have manually embedded the css files but the images are not displaying. I have already followed the steps in the help file and the skin does not display properly - that's why i'm emailing for support

thanks

[Iana Tsolova]

Hi andieje,

Unfortunately the link you've sent is not opening.
However, if you want the images of the DatePicker to be displayed properly with EmbeddedSkins set to false, you need to take the following steps:

• set the properties ImageUrl and hoverImageUrl of the DatePopupButton;
• set the properties NavigationPrevImage, NavigationNextImage, FastNavigationPrevImage, FastNavigationNextImage for the Calendar.

As a result your DatePicker should look like this in your ascx/aspx page:

<telerik:RadDatePicker ID="RadDatePicker1" runat="server" EnableEmbeddedSkins="False"

Skin="Mac">

<DateInput EnableEmbeddedSkins="False" LabelCssClass="radLabelCss_Mac" Skin="Mac">

</DateInput>

<Calendar CellAlign="Center" CellVAlign="Middle" DayNameFormat="FirstLetter"          EnableEmbeddedSkins="False" FirstDayOfWeek="Default"

Skin="Mac" NavigationNextImage="Skins/Mac/Calendar/arrowRight.gif"          NavigationPrevImage="Skins/Mac/Calendar/arrowLeft.gif"

FastNavigationNextImage="Skins/Mac/Calendar/fastNavRight.gif"          FastNavigationPrevImage="Skins/Mac/Calendar/fastNavLeft.gif">

</Calendar>

<DatePopupButton HoverImageUrl="Skins/Mac/Calendar/datePickerPopupHover.gif"          ImageUrl="Skins/Mac/Calendar/datePickerPopup.gif" />

</telerik:RadDatePicker>

I hope this information helps.

Sincerely yours,
Iana
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[andieje]

thanks very much - that was the information i needed

[Geert]

Hello everyone,

problem: custom skin (for datepicker)
Then images of the calendar and dateinput are gone

solution: set the paths of the images for calendar and dateinput

problem: do I really need to do this for every datepicker all over my project??

solution: No if your using a theme for all pages

create skin file in your theme and paste this inside for example:

<%

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<telerik:RadDatePicker runat="server" skin="Metis" DatePopupButton-ImageUrl="Calendar\datePickerPopup.gif" DatePopupButton-HoverImageUrl="Calendar/datePickerPopupHover.gif" Calendar-FastNavigationNextImage="Calendar/fastNavRight.gif" Calendar-FastNavigationPrevImage="Calendar/fastNavLeft.gif" Calendar-NavigationNextImage="Calendar/arrowRight.gif" Calendar-NavigationPrevImage="Calendar/arrowLeft.gif"></telerik:RadDatePicker>

do not set a skin on your datepicker, the theme will automatically paste this skinning on top of your datepicker, on top of every datepicker that does not has a skin.

Telerik, maybe something to create a example project for?,

greetings

The Sofim-team (Belgium)

[Iana Tsolova]

Hi Geert,

Thank you for your help and for posting your solution here. Maybe we can add your suggestion here as well.

All the best,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.