This is a migrated thread and some comments may be shown as answers.

Date-range slider

0 Answers 211 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
eyal asked on 13 Jul 2010, 11:04 AM

I created a customized date-range slider (screenshot attached) in one of my projects that I would like to share and get feedback.

aspx markup:
<telerik:RadScriptBlock ID="radScriptBlock1" runat="server">
<script type="text/javascript">
function onClientValueChanging(sender, args)
        if(!isSliding) return;
           //OADate origin is midnight, 30 December 1899                             
        var date = new Date('December 30,1899 00:00:00');
        var tooltip = $find("<%= radToolTipSlider.ClientID %>");
        var day  = date.getDate();
        var month = date.getMonth() + 1;
        var year = date.getFullYear();
        tooltip.set_text(day+'.'+month+'.'+year); // finnish-localized date format
var isSliding = false;
function onClientSlideStart(sender, args)
        isSliding = true;
        var tooltip = $find("<%= radToolTipSlider.ClientID %>");
        showRadToolTip(tooltip, sender);
function onClientSlide(sender, args)
        var tooltip = $find("<%= radToolTipSlider.ClientID %>");
        showRadToolTip(tooltip, sender);
function onClientSlideEnd(sender, args)
        isSliding = false;
        var tooltip = $find("<%= radToolTipSlider.ClientID %>");
function showRadToolTip(tooltip, slider)
        var activeHandle = slider.get_activeHandle();
        if(!activeHandle) return;
function resetToolTipLocation(tooltip)
        if (!tooltip.isVisible())
<telerik:RadAjaxManager ID="radAjaxManager" runat="server">
    <telerik:AjaxSetting AjaxControlID="radSliderDates">
            <telerik:AjaxUpdatedControl ControlID="lblSliderStartDate" UpdatePanelRenderMode="Inline" />
            <telerik:AjaxUpdatedControl ControlID="lblSliderEndDate" UpdatePanelRenderMode="Inline" />
<telerik:RadAjaxLoadingPanel ID="radAjaxLoadingPanel1" runat="server" />
<telerik:RadToolTip  ID="radToolTipSlider" runat="server" Position="TopCenter" OffsetY="3"
            ShowCallout="false" Height="20px" ShowEvent="FromCode" HideEvent="FromCode"></telerik:RadToolTip>
    <fieldset style="width:700px">
        <table border="0" cellpadding="2" cellspacing="0">
                <td><asp:Label ID="lblSliderStartDate" runat="server" /></td>
                    <telerik:RadSlider runat="server" ID="radSliderDates" IsSelectionRangeEnabled="true" Width="370"
                        AutoPostBack="true" ShowDecreaseHandle="false" ShowIncreaseHandle="false"
                         OnClientValueChanging="onClientValueChanging" OnClientSlideStart="onClientSlideStart" OnClientSlideEnd="onClientSlideEnd" OnClientSlide="onClientSlide" />
                <td><asp:Label ID="lblSliderEndDate" runat="server" /></td>

Code-behind (VB)
Private Sub InitDates()
        ' dtStart and dtEnd are fetched from db
        Dim dtStart As Date = CDate(getStartDate()).ToShortDateString
        Dim dtEnd As Date = CDate(getEndDate()).ToShortDateString
        lblSliderStartDate.Text = dtStart.ToShortDateString
        lblSliderEndDate.Text = dtEnd.ToShortDateString
        radSliderDates.MinimumValue = CInt(dtStart.ToOADate)
        radSliderDates.MaximumValue = CInt(dtEnd.ToOADate)
        radSliderDates.SelectionStart = CInt(dtStart.ToOADate)
        radSliderDates.SelectionEnd = CInt(dtEnd.ToOADate)
        radSliderDates.SmallChange = 1
    End Sub
Protected Sub radSliderDates_ValueChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles radSliderDates.ValueChanged
        Dim dtStart As Date = Date.FromOADate(radSliderDates.SelectionStart.ToString)
        Dim dtEnd As Date = Date.FromOADate(radSliderDates.SelectionEnd.ToString)
        lblSliderStartDate.Text = dtStart.ToShortDateString
        lblSliderEndDate.Text = dtEnd.ToShortDateString
    End Sub

In the project, the slider is used as a filter for ajaxified grid.
There might be some glitches in the code snippets due to the copy-paste-modify from the project. Sorry for that..

Telerik dll - 2010.1.309.35
Tested on FF 3.6.6, IE 8, Chrome 5, Safari 5

Comments are most welcome!


No answers yet. Maybe you can help?

Asked by
Top achievements
Rank 1
Share this question