telerik:RadDatePicker

[jaisabari]

hi,

We are using rad date picker for date selection in one of our project, as per the requirement the date icon should appear on the left side of the textbox instead if right side, which is the usual scenario. We had look and feel issue while calling RadDatePicker from the left side of the textbox.
The month navigation button directions are not proper.
Am attaching the screen shot here for your reference.

[Shinu]

Hello,


Try the following approach to get rtl support for RadDatePicker.

CSS:

<style type="text/css">
    .rtlSupport
    {
        direction: rtl !important;
    }
</style>

Mark-up:

<telerik:RadDatePicker CssClass="rtlSupport" ID="RadDatePicker5" runat="server" Width="258px"
    PopupDirection="BottomRight">
    <Calendar ID="Calendar1" CssClass="rtlSupport" ShowOtherMonthsDays="False" ShowRowHeaders="False"
        UseColumnHeadersAsSelectors="False">
    </Calendar>
</telerik:RadDatePicker>

-Shinu.

[jaisabari]

hi shinu,

Thanks for your fix. the UI looks good now.

[jaisabari]

hi,

We are facing another issue now after fixing the UI. On click of the increment month instead of showing the next month the controls show the previous month content.  Similarly on click of the decrement month instead of showing previous month the control show the next month contents.

Is there any server side fix available for this issue. please revert back!

[Shinu]

Hello Sabari,

You can achieve this by modifying the default CSS like below.

CSS:

<style type="text/css">
    .RadCalendar_[SkinName] .rcTitlebar .rcFastPrev
    {
        background-position: 1px -197px !important;
    }
    .RadCalendar_[SkinName] .rcTitlebar .rcPrev
    {
        background-position: 4px -297px !important;
    }
    .RadCalendar_[SkinName] .rcTitlebar .rcNext
    {
        background-position: 3px -397px !important;
    }
    .RadCalendar_[SkinName] .rcTitlebar .rcFastNext
    {
        background-position: 1px -497px !important;
    }
</style>

Another suggestion is to use an image instead of the default PopUp Button. And attatch onClick event to image. for showing the Pop-Up. Sample code here.

aspx:

  <img src="../Images/calender_popup.jpg" onclick="showPopup()" />
<telerik:RadDatePicker ID="RadDatePicker1" runat="server">
            <DatePopupButton Visible="false" />
   </telerik:RadDatePicker>

javascript:

function showPopup()
  {
      var picker = $find("<%= RadDatePicker1.ClientID %>");
      picker.showPopup();
  }

Thanks,
Shinu.

[Andrew]

When I use RadDatePicker the edit results in data stored as "2016-08-08-00.00.00.000000" which RadDatePicker does not understand if the page is loaded a second time. The backend datasource is VARCHAR 30

 

How can I get rid of the time and have RadDatePicker send data as string like:  08/08/2016  without any time?

[Konstantin Dikov]

Hello Andrew,

The RadDatePicker works with DateTime objects and in your database you need to have date column and not a string one. If you need to store the dates as strings you will have to retrieve the selected date of the RadDatePicker, through its SelectedDate propery, and handle the DateTime object as per your requirements, before passing the value to your database.


Regards,
Konstantin Dikov
Telerik by Progress