can timepicker show range time

2 posts, 0 answers
  1. Byland
    Byland avatar
    5 posts
    Member since:
    Dec 2009

    Posted 12 Jul 2011 Link to this post

     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!!!!
  2. Vasil
    Admin
    Vasil avatar
    1638 posts

    Posted 18 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top