can timepicker show range time

[Byland]

 I want to show the time not specific time, but range time, for example: 8:00- 10:00(please see the attached picture),
So I change the timpicker format:

  RadTimePickerVisitTime.Culture = new System.Globalization.CultureInfo("en-US")
                {
                    DateTimeFormat = new System.Globalization.DateTimeFormatInfo
                    {
                        ShortTimePattern = "HH:00-HH:00" , // In case of DisplayFormat="Short"
                        LongTimePattern = "HH:00-HH:00"  // In case of DisplayFormat="long"
                    }
                };

also I change the data show in timepicker:

protected void RadTimePickerVisitTime_ItemDataBound(object sender, TimePickerEventArgs e)
        {
           if ((e.Item.ItemType == ListItemType.Item)|| (e.Item.ItemType == ListItemType.AlternatingItem))
            {
                System.Data.DataRowView dataItem = (System.Data.DataRowView)e.Item.DataItem;
                DateTime boundTime = (DateTime)dataItem.Row["Time"];
                var first = boundTime.Hour + ":00-";
                var second = boundTime.AddHours(2).Hour + ":00";
               System.Globalization.CultureInfo  culture =  new System.Globalization.CultureInfo("en-US")
                {
                    DateTimeFormat = new System.Globalization.DateTimeFormatInfo
                    {
                        ShortTimePattern = "HH:00-HH:00", // In case of DisplayFormat="Short"
                        LongTimePattern = "HH:00-HH:00"  // In case of DisplayFormat="long"
                    }
                };
               boundTime = DateTime.Parse(first + second, culture);
            }
        }

But it not work, anyone can give me some suggestion, thanks a lot!!!!

[Vasil]

Hi Byland,

Basically DateTime object can store only one exact time, and can't be used for storing two times(beginning and end of a period). The TimeView itself uses a given DateTime object to render the times depending on it's display format and will render only one time with a given culture.

If you want to change the visible text, you could do it client side. The code-below demonstrates how you could achieve it. Additionally you have to calculate the second time that is added in the innerHTML
 of the cell.

<telerik:RadTimePicker ID="RadTimePicker1" runat="server">
  <ClientEvents />
  <TimeView runat="server" StartTime="08:00:00" EndTime="21:00:00">
  </TimeView>
</telerik:RadTimePicker>
<script type="text/javascript">

  function formatTheTimeView()
  {
    var tvBody = $get('<%=RadTimePicker1.ClientID%>_timeView_tdl').children[0];
    for (var i = 0; i < tvBody.children.length; i++)        {
      var row = tvBody.children[i];
      for (var j = 0; j < row.children.length; j++)
      {
        var cell = row.children[j];
        var orgTime = cell.innerHTML;
        orgTime = "someChangedTime";
        cell.innerHTML = cell.innerHTML + "-" + orgTime;
      }
    }
  }
  window.onload = formatTheTimeView();

</script>

C#:

protected void Page_Load(object sender, EventArgs e)
{
    RadTimePicker1.TimeView.Interval = new TimeSpan(2, 0, 0);
}

I hope this helps.

Regards,
Vasil
the Telerik team