skinning a datetime picker

8 posts, 0 answers
  1. andieje
    andieje avatar
    473 posts
    Member since:
    Oct 2006

    Posted 12 Mar 2008 Link to this post

    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
  2. andieje
    andieje avatar
    473 posts
    Member since:
    Oct 2006

    Posted 12 Mar 2008 Link to this post

    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
  3. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 13 Mar 2008 Link to this post

    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
  4. andieje
    andieje avatar
    473 posts
    Member since:
    Oct 2006

    Posted 14 Mar 2008 Link to this post

    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
  5. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 17 Mar 2008 Link to this post

    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
  6. andieje
    andieje avatar
    473 posts
    Member since:
    Oct 2006

    Posted 20 Mar 2008 Link to this post

    thanks very much - that was the information i needed
  7. Geert
    Geert avatar
    33 posts
    Member since:
    Jul 2008

    Posted 13 Oct 2008 Link to this post

    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)

  8. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 13 Oct 2008 Link to this post

    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.
Back to Top