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

radTimePicker set Start and End Time in Client-Side Javascript

30 Answers 678 Views

Calendar

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

30 Answers, 1 is accepted

answered on 23 Feb 2012, 10:09 PM

I needed to do the same thing and accomplished it by adding two methods to the RadTimeView client object:

Telerik.Web.UI.RadTimeView.prototype._rePaint = function()

{

this._detachEventHandlers();

this._timeMatrix = this._setTimeMatrix();

var table = $telerik.$(this._findTableElement(this.DivElement));

var header = this._showHeader ? table.find('tr:first') : null;

var footer = this._showFooter ? table.find('tr:last') : null;

var cellTemplate = table.find('td:not(.rcHeader):first');

var dataRowStart = this._showHeader ? 1 : 0;

var dataRowEnd = this._timeMatrix.length - (this._showFooter ? 1 : 0);

table.find('tr').remove();

var tbody = table.find('tbody');

if(header)

tbody.append(header);

var dateFormatInfo = $find(this.get__OwnerDatePickerID()).get_dateInput().get_dateFormatInfo();

for(var row = dataRowStart; row < dataRowEnd; row++)

{

var tr = $telerik.$('<tr>');

for(var cell = 0; cell < this.get_columns(); cell++)

{

var date = this._timeMatrix[row][cell];

if(date)

{

var td = cellTemplate.clone();

var textElement = td.find('*:not(:empty):last');

textElement.text(dateFormatInfo.FormatDate(date,this._timeFormat));

tr.append(td);

}

tbody.append(tr);

}

if(footer)

tbody.append(footer);

this._attachEventHandlers();

}

Telerik.Web.UI.RadTimeView.prototype._detachEventHandlers = function()

{

if (this._onCellMouseOutDelegate)

{

$removeHandler(this.DivElement, "mouseout", this._onCellMouseOutDelegate);

this._onCellMouseOutDelegate = null;

}

if (this._onCellMouseOverDelegate)

{

$removeHandler(this.DivElement, "mouseover", this._onCellMouseOverDelegate);

this._onCellMouseOverDelegate = null;

}

if (this._onCellClickDelegate)

{

$removeHandler(this.DivElement, "click", this._onCellClickDelegate);

this._onCellClickDelegate = null;

}

Then, I called it within the OnDateSelected event of the RadDateTimePicker object:

function checkStartDate(sender, args)

{

var endDate = $find('<%= PickerEnd.ClientID %>');

if(!endDate) // PickerEnd has been hidden.

return;

var newDate = new Date(args.get_newDate());

endDate.get_timeView().set_startTime(newDate.getDate() + '-' + newDate.getHours() + '-' + newDate.getMinutes() + '-0-0');

endDate.get_timeView().set_endTime(newDate.getDate() + '-23-59-0-0');

endDate.get_timeView()._rePaint(); //custom function to recreate the timeview popup

}

This attempts to use whatever you have in the template (if any) defined in the control. If there's a problem finding the time's text because of custom templates, modify the find selector in the following line in the _rePaint method in order to find that text:

var textElement = td.find('*:not(:empty):last');

Hope this helps.

answered on 17 Oct 2012, 08:56 PM

set-startTime.png

Dean,
I have try your codes, but it doesn't. The NewStartTime is "invalid". I'm try to pass this format "Tue Nov 6 09:00:00 EST 2012"
Please refer to the attached file.
This is my code:

var startDateTuesday = null;
        function dateSelectedTuesdayStart(sender, eventArgs) {
            var picker = $find("RadDateTimePickerTuesdayEnd");
            var newDate = sender.get_selectedDate();
            picker.set_minDate(newDate);
            startDate = newDate;

            var timeview = picker.get_timeView();
            $telerik.toTimeView(timeview).set_startTime(newDate);
        }

answered on 17 Oct 2012, 09:38 PM

set-startTimeError.png

I receive an error: Object doesn't support property or method 'get_timeView'
Please refer to the attached file
Here is my ne code:

answered on 17 Oct 2012, 09:57 PM

set-startTimeError2.png

almost there!!! another errir: Object doesn't support property or method '_rePaint'

my new code:

answered on 17 Oct 2012, 10:47 PM

any thing to do with the culture setting?
Here is my code:

//add codes to set the minimum time of the end time picker when the start tme changed
Telerik.Web.UI.RadTimeView.prototype._rePaint = function () {

this._detachEventHandlers();

this._timeMatrix = this._setTimeMatrix();

var table = $telerik.$(this._findTableElement(this.DivElement));

var header = this._showHeader ? table.find('tr:first') : null;

var footer = this._showFooter ? table.find('tr:last') : null;

var cellTemplate = table.find('td:not(.rcHeader):first');

var dataRowStart = this._showHeader ? 1 : 0;

var dataRowEnd = this._timeMatrix.length - (this._showFooter ? 1 : 0);

table.find('tr').remove();

var tbody = table.find('tbody');

if (header)

tbody.append(header);

var dateFormatInfo = $find(this.get__OwnerDatePickerID()).get_dateInput().get_dateFormatInfo();

for (var row = dataRowStart; row < dataRowEnd; row++) {

var tr = $telerik.$('<tr>');

for (var cell = 0; cell < this.get_columns(); cell++) {

var date = this._timeMatrix[row][cell];

if (date) {

var td = cellTemplate.clone();

var textElement = td.find('*:not(:empty):last');

textElement.text(dateFormatInfo.FormatDate(date, this._timeFormat));

tr.append(td);

}

tbody.append(tr);

}

if (footer)

tbody.append(footer);

this._attachEventHandlers();

}

Telerik.Web.UI.RadTimeView.prototype._detachEventHandlers = function () {

if (this._onCellMouseOutDelegate) {

$removeHandler(this.DivElement, "mouseout", this._onCellMouseOutDelegate);

this._onCellMouseOutDelegate = null;

}

if (this._onCellMouseOverDelegate) {

$removeHandler(this.DivElement, "mouseover", this._onCellMouseOverDelegate);

this._onCellMouseOverDelegate = null;

}

if (this._onCellClickDelegate) {

$removeHandler(this.DivElement, "click", this._onCellClickDelegate);

this._onCellClickDelegate = null;

}

        }
        var startDateSunday = null;
        function dateSelectedSundayStart(sender, eventArgs) {
            var picker = $find("<%=RadDateTimePickerSundayEnd.ClientID%>");
            var newDate = sender.get_selectedDate();
            picker.set_minDate(newDate);
            startDate = newDate;
        }
        function OnErrorSundayEnd(sender, eventArgs) {
            var date = new Date(eventArgs.get_inputText());
            var newDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate(), date.getHours(), date.getMinutes());
            sender.set_selectedDate(newDate);
        }

        var startDateMonday = null;
        function dateSelectedMondayStart(sender, eventArgs) {
            var picker = $find("<%=RadDateTimePickerMondayEnd.ClientID%>");
            var newDate = sender.get_selectedDate();
            picker.set_minDate(newDate);
            startDate = newDate;
        }
        function OnErrorMondayEnd(sender, eventArgs) {
            var date = new Date(eventArgs.get_inputText());
            var newDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate(), date.getHours(), date.getMinutes());
            sender.set_selectedDate(newDate);
        }

        var startDateTuesday = null;
        function dateSelectedTuesdayStart(sender, eventArgs) {
            var picker = $find("<%=RadDateTimePickerTuesdayEnd.ClientID%>");
            var newDate = sender.get_selectedDate();
            picker.set_minDate(newDate);
            startDate = newDate;

            var timeview = picker.get_timeView();
            $telerik.toTimeView(timeview).set_startTime(newDate.getDate() + '-' + newDate.getHours() + '-' + newDate.getMinutes() + '-0-0');
//            $telerik.toTimeView(timeview).get_timeView().set_endTime(newDate.getDate() + '-23-59-0-0');
              $telerik.toTimeView(timeview).set_endTime(newDate.getDate() + '-23-59-0-0');
//            $telerik.toTimeView(timeview).get_timeView()._rePaint(); //custom function to recreate the timeview popup
              $telerik.toTimeView(timeview)._rePaint();
        }
        function OnErrorTuesdayEnd(sender, eventArgs) {
            var date = new Date(eventArgs.get_inputText());
            var newDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate(), date.getHours(), date.getMinutes());
            sender.set_selectedDate(newDate);
        }

        var startDateWednesday = null;
        function dateSelectedWednesdayStart(sender, eventArgs) {
            var picker = $find("<%=RadDateTimePickerWednesdayEnd.ClientID%>");
            var newDate = sender.get_selectedDate();
            picker.set_minDate(newDate);
            startDate = newDate;
        }
        function OnErrorWednesdayEnd(sender, eventArgs) {
            var date = new Date(eventArgs.get_inputText());
            var newDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate(), date.getHours(), date.getMinutes());
            sender.set_selectedDate(newDate);
        }

        var startDateThursday = null;
        function dateSelectedThursdayStart(sender, eventArgs) {
            var picker = $find("<%=RadDateTimePickerThursdayEnd.ClientID%>");
            var newDate = sender.get_selectedDate();
            picker.set_minDate(newDate);
            startDate = newDate;
        }
        function OnErrorThursdayEnd(sender, eventArgs) {
            var date = new Date(eventArgs.get_inputText());
            var newDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate(), date.getHours(), date.getMinutes());
            sender.set_selectedDate(newDate);
        }

        var startDateFriday = null;
        function dateSelectedFridayStart(sender, eventArgs) {
            var picker = $find("<%=RadDateTimePickerFridayEnd.ClientID%>");
            var newDate = sender.get_selectedDate();
            picker.set_minDate(newDate);
            startDate = newDate;
        }
        function OnErrorFridayEnd(sender, eventArgs) {
            var date = new Date(eventArgs.get_inputText());
            var newDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate(), date.getHours(), date.getMinutes());
            sender.set_selectedDate(newDate);
        }

        var startDateSaturday = null;
        function dateSelectedSaturdayStart(sender, eventArgs) {
            var picker = $find("<%=RadDateTimePickerSaturdayEnd.ClientID%>");
            var newDate = sender.get_selectedDate();
            picker.set_minDate(newDate);
            startDate = newDate;
        }
        function OnErrorSaturdayEnd(sender, eventArgs) {
            var date = new Date(eventArgs.get_inputText());
            var newDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate(), date.getHours(), date.getMinutes());
            sender.set_selectedDate(newDate);
        }

</script>

    <div style="width: 175px; height: 193px; float: left;" align="left">
        <fieldset id="fld1" style="width: 175px; margin-left: 0px;">
            <legend></legend>
            <div>
                <label style="font-size: small; font-weight: bold; position: relative; float: left; width: 85px;">Shift Type:</label><label style="font-size: small; font-weight: bold">Sunday</label>
                <%--<ul class="rsResourceControls">--%>
            <div style="margin-top: 0px; margin-right: 0
                px; margin-bottom: 10px; margin-left: 10px;">
                    <p align="left">
                        <%--<span style="margin: 0px 0 0 0px; font-size: 12px;">All Day</span>--%>
                        <span><label style="width: 70px; position: relative; float: left;">All Day</label><input type="radio" name="DefaultTimeButton" id="Radio1" value="AllDay"
                                    onclick="changeStartTime('dayAll');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <%--<span style="margin: 0px 0 0 0px; font-size: 12px;">Morning</span>--%>
                        <span><label style="width: 70px; position: relative; float: left;">Morning</label><input type="radio" name="DefaultTimeButton" id="Radio4" value="Morning"
                                    onclick="changeStartTime('morning');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <span><label style="width: 70px; position: relative; float: left;">Evening</label><input type="radio" name="DefaultTimeButton" id="Radio5" value="Evening"
                                    onclick="changeStartTime('evening');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <%--<span style="margin: 0px 0 0 0px; font-size: 12px;">Day Off</span>--%>
                        <span><label style="width: 70px; position: relative; float: left;">DayOff</label><input type="radio" name="DefaultTimeButton" id="Radio3" value="DayOff"
                                    onclick="changeStartTime('dayOff');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <span><label style="width: 70px; position: relative; float: left;">Other  </label><input type="radio" name="DefaultTimeButton" id="Radio6" value="AllDay"
                                    onclick="changeStartTime('Manual');" style="width: 15px"></input></span>
                    </p>
                </div>
                <div style="margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;">

                        <span><label style="width: 80px; position: relative; float: left;">Start Time</label></span>

                        <telerik:RadDateTimePicker ID="RadDateTimePickerSundayStart" Runat="server"
        Culture="en-US" Width="75px" >
<TimeView CellSpacing="-1" columns="4" culture="en-BZ" interval="00:30:00"
            renderdirection="Vertical"></TimeView>

</telerik:RadDateTimePicker>



                </div>
                <div style="margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;">

                        <span><label style="width: 80px; position: relative; float: left;">End Time</label></span>


            <telerik:RadDateTimePicker ID="RadDateTimePickerSundayEnd" Runat="server"
        Culture="en-US" Width="75px" >
<TimeView CellSpacing="-1" columns="4" culture="en-BZ" interval="00:30:00"
            renderdirection="Vertical"></TimeView>

</telerik:RadDateTimePicker>
                </div>
              </div>

      <%--<ClientEvents OnPopupOpening="AdjustRadWidow" OnPopupClosing="AdjustRadWidow" />--%>
            <div style="margin: 20px 0 0 0; visibility: hidden;">
                <%--<ClientEvents OnPopupOpening="AdjustRadWidow" OnPopupClosing="AdjustRadWidow" />--%>
                <input type="text" style="width: 100px; visibility: hidden;" id="cityName"
                    value="Sofia" />
                <button onclick="openWin2(); return false;" style="visibility: hidden"
                    title="Choose City">
                    ...</button>
            </div>
        </fieldset>
        <div style="margin-top: 4px; text-align: right;">
            <%--<ClientEvents OnPopupOpening="AdjustRadWidow" OnPopupClosing="AdjustRadWidow" />--%>
        </div>
    </div>
    <div style="width: 110px; height: 100px; float: left;" align="left">
        <fieldset id="Fieldset1">
            <legend></legend>
            <div>
                <label style="font-size: small; font-weight: bold">Monday</label>
                <%--<ClientEvents OnPopupOpening="AdjustRadWidow" OnPopupClosing="AdjustRadWidow" />--%>
            <div style="margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 0px;">
                    <p align="left">
                        <%--<asp:Button ID="Button1" runat="server" Text="Button" onclientclick="returnToParent(); return false;"/>--%>
                        <span><input type="radio" name="DefaultTimeButton" id="Radio2" value="AllDay"
                                    onclick="changeStartTime('dayAll');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <%--</ul>--%>
                        <span><input type="radio" name="DefaultTimeButton" id="Radio8" value="Morning"
                                    onclick="changeStartTime('morning');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <span><input type="radio" name="DefaultTimeButton" id="Radio9" value="Evening"
                                    onclick="changeStartTime('evening');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <%--<div style="float: left; margin: 6px 0 0 18px;">
                    Choose City:</div>--%>
                        <span><input type="radio" name="DefaultTimeButton" id="Radio7" value="DayOff"
                                    onclick="changeStartTime('dayOff');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <span><input type="radio" name="DefaultTimeButton" id="Radio10" value="Other"
                                    onclick="changeStartTime('Manual');" style="width: 15px"></input></span>
                    </p>
                </div>
                <div style="margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;">
            <telerik:RadDateTimePicker ID="RadDateTimePickerMondayStart" Runat="server"
        Culture="en-US" Width="75px" >
<TimeView CellSpacing="-1" columns="4" culture="en-BZ" interval="00:30:00"
            renderdirection="Vertical"></TimeView>

</telerik:RadDateTimePicker>

                </div>
                <div style="margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;">
            <telerik:RadDateTimePicker ID="RadDateTimePickerMondayEnd" Runat="server"
        Culture="en-US" Width="75px" >
<TimeView CellSpacing="-1" columns="4" culture="en-BZ" interval="00:30:00"
            renderdirection="Vertical"></TimeView>

</telerik:RadDateTimePicker>

                </div>
              </div>

      <%--<ul class="rsResourceControls">--%>
        </fieldset>
    </div>
    <div style="width: 110px; height: 100px; float: left;" align="left">
        <fieldset id="Fieldset2">
            <legend></legend>
            <div>
                <label style="font-size: small; font-weight: bold">Tuesday</label>
                <%--<span style="margin: 0px 0 0 0px; font-size: 12px;">All Day</span>--%>
            <div style="margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 0px;">
                    <p align="left">
                        <%--<ClientEvents OnPopupOpening="AdjustRadWidow" OnPopupClosing="AdjustRadWidow" />--%>
                        <span><input type="radio" name="DefaultTimeButton" id="Radio11" value="AllDay"
                                    onclick="changeStartTime('dayAll');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <%--<ClientEvents OnPopupOpening="AdjustRadWidow" OnPopupClosing="AdjustRadWidow" />--%>
                        <span><input type="radio" name="DefaultTimeButton" id="Radio13" value="Morning"
                                    onclick="changeStartTime('morning');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <span><input type="radio" name="DefaultTimeButton" id="Radio14" value="Evening"
                                    onclick="changeStartTime('evening');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <%--<span style="margin: 0px 0 0 0px; font-size: 12px;">Morning</span>--%>
                        <span><input type="radio" name="DefaultTimeButton" id="Radio12" value="DayOff"
                                    onclick="changeStartTime('dayOff');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <span><input type="radio" name="DefaultTimeButton" id="Radio15" value="Other"
                                    onclick="changeStartTime('Manual');" style="width: 15px"></input></span>
                    </p>
                </div>
                <div style="margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;">
            <telerik:RadDateTimePicker ID="RadDateTimePickerTuesdayStart" Runat="server"
        Culture="en-US" Width="75px" >
<TimeView CellSpacing="-1" columns="4" culture="en-BZ" interval="00:30:00"
            renderdirection="Vertical"></TimeView>

</telerik:RadDateTimePicker>

                </div>
                <div style="margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;">

            <telerik:RadDateTimePicker ID="RadDateTimePickerTuesdayEnd" Runat="server"
        Culture="en-US" Width="75px" >
<TimeView CellSpacing="-1" columns="4" culture="en-BZ" interval="00:30:00"
            renderdirection="Vertical"></TimeView>

</telerik:RadDateTimePicker>

                </div>
              </div>

      <%--<span style="margin: 0px 0 0 0px; font-size: 12px;">Day Off</span>--%>
        </fieldset>
    </div>
    <div style="width: 110px; height: 100px; float: left;" align="left">
        <fieldset id="Fieldset3">
            <legend></legend>
            <div>
                <label style="font-size: small; font-weight: bold">Wednesday</label>
                <%--<ClientEvents OnPopupOpening="AdjustRadWidow" OnPopupClosing="AdjustRadWidow" />--%>
            <div style="margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 0px;">
                    <p align="left">
                        <%--<ClientEvents OnPopupOpening="AdjustRadWidow" OnPopupClosing="AdjustRadWidow" />--%>
                        <span><input type="radio" name="DefaultTimeButton" id="Radio16" value="AllDay"
                                    onclick="changeStartTime('dayAll');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <%--</ul>--%>
                        <span><input type="radio" name="DefaultTimeButton" id="Radio18" value="Morning"
                                    onclick="changeStartTime('morning');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <span><input type="radio" name="DefaultTimeButton" id="Radio19" value="Evening"
                                    onclick="changeStartTime('evening');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <%--<ClientEvents OnPopupOpening="AdjustRadWidow" OnPopupClosing="AdjustRadWidow" />--%>
                        <span><input type="radio" name="DefaultTimeButton" id="Radio17" value="DayOff"
                                    onclick="changeStartTime('dayOff');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <span><input type="radio" name="DefaultTimeButton" id="Radio20" value="Other"
                                    onclick="changeStartTime('Manual');" style="width: 15px"></input></span>
                    </p>
                </div>
                <div style="margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;">

            <telerik:RadDateTimePicker ID="RadDateTimePickerWednesdayStart" Runat="server"
        Culture="en-US" Width="75px" >
<TimeView CellSpacing="-1" columns="4" culture="en-BZ" interval="00:30:00"
            renderdirection="Vertical"></TimeView>

Culture="en-US" Width="75px" >
<TimeView CellSpacing="-1" columns="4" culture="en-BZ" interval="00:30:00"
renderdirection="Vertical"></TimeView>

</telerik:RadDateTimePicker>

                </div>
              </div>

      <%--<ClientEvents OnPopupOpening="AdjustRadWidow" OnPopupClosing="AdjustRadWidow" />--%>
        </fieldset>
    </div>
    <div style="width: 110px; height: 100px; float: left;" align="left">
        <fieldset id="Fieldset4">
            <legend></legend>
            <div>
                <label style="font-size: small; font-weight: bold">Thursday</label>
                <%--<ul class="rsResourceControls">--%>
            <div style="margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 0px;">
                    <p align="left">
                        <%--<span style="margin: 0px 0 0 0px; font-size: 12px;">All Day</span>--%>
                        <span><input type="radio" name="DefaultTimeButton" id="Radio21" value="AllDay"
                                    onclick="changeStartTime('dayAll');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <%--<span style="margin: 0px 0 0 0px; font-size: 12px;">Morning</span>--%>
                        <span><input type="radio" name="DefaultTimeButton" id="Radio23" value="Morning"
                                    onclick="changeStartTime('morning');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <span><input type="radio" name="DefaultTimeButton" id="Radio24" value="Evening"
                                    onclick="changeStartTime('evening');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <%--<span style="margin: 0px 0 0 0px; font-size: 12px;">Day Off</span>--%>
                        <span><input type="radio" name="DefaultTimeButton" id="Radio22" value="DayOff"
                                    onclick="changeStartTime('dayOff');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <span><input type="radio" name="DefaultTimeButton" id="Radio25" value="Other"
                                    onclick="changeStartTime('Manual');" style="width: 15px"></input></span>
                    </p>
                </div>
                <div style="margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;">

            <telerik:RadDateTimePicker ID="RadDateTimePickerThursdayStart" Runat="server"
        Culture="en-US" Width="75px" >
<TimeView CellSpacing="-1" columns="4" culture="en-BZ" interval="00:30:00"
            renderdirection="Vertical"></TimeView>

</telerik:RadDateTimePicker>

                </div>
                <div style="margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;">

            <telerik:RadDateTimePicker ID="RadDateTimePickerThursdayEnd" Runat="server"
        Culture="en-US" Width="75px" >
<TimeView CellSpacing="-1" columns="4" culture="en-BZ" interval="00:30:00"
            renderdirection="Vertical"></TimeView>

<DatePopupButton ImageUrl="" HoverImageUrl="" Visible="False"></DatePopupButton>
                <DateInput>
                                <ClientEvents OnError="OnErrorThursdayEnd" />
                            </DateInput>
</telerik:RadDateTimePicker>


                </div>
              </div>

      <%--<ClientEvents OnPopupOpening="AdjustRadWidow" OnPopupClosing="AdjustRadWidow" />--%>
        </fieldset>
    </div>
    <div style="width: 110px; height: 100px; float: left;" align="left">
        <fieldset id="Fieldset5">
            <legend></legend>
            <div>
                <label style="font-size: small; font-weight: bold">Friday</label>
                <%--<ClientEvents OnPopupOpening="AdjustRadWidow" OnPopupClosing="AdjustRadWidow" />--%>
            <div style="margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 0px;">
                    <p align="left">
                        <%--<ClientEvents OnPopupOpening="AdjustRadWidow" OnPopupClosing="AdjustRadWidow" />--%>
                        <span><input type="radio" name="DefaultTimeButton" id="Radio26" value="AllDay"
                                    onclick="changeStartTime('dayAll');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <%--<ClientEvents OnPopupOpening="AdjustRadWidow" OnPopupClosing="AdjustRadWidow" />--%>
                        <span><input type="radio" name="DefaultTimeButton" id="Radio28" value="Morning"
                                    onclick="changeStartTime('morning');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <span><input type="radio" name="DefaultTimeButton" id="Radio29" value="Evening"
                                    onclick="changeStartTime('evening');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <%--</ul>--%>
                        <span><input type="radio" name="DefaultTimeButton" id="Radio27" value="DayOff"
                                    onclick="changeStartTime('dayOff');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <span><input type="radio" name="DefaultTimeButton" id="Radio30" value="Other"
                                    onclick="changeStartTime('Manual');" style="width: 15px"></input></span>
                    </p>
                </div>
                <div style="margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;">

            <telerik:RadDateTimePicker ID="RadDateTimePickerFridayStart" Runat="server"
        Culture="en-US" Width="75px" >
<TimeView CellSpacing="-1" columns="4" culture="en-BZ" interval="00:30:00"
            renderdirection="Vertical"></TimeView>

</telerik:RadDateTimePicker>


                </div>
                <div style="margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;">

            <telerik:RadDateTimePicker ID="RadDateTimePickerFridayEnd" Runat="server"
        Culture="en-US" Width="75px" >
<TimeView CellSpacing="-1" columns="4" culture="en-BZ" interval="00:30:00"
            renderdirection="Vertical"></TimeView>

<DatePopupButton ImageUrl="" HoverImageUrl="" Visible="False"></DatePopupButton>
<DateInput>
    <ClientEvents OnError="OnErrorFridayEnd" />
</DateInput>
</telerik:RadDateTimePicker>

                </div>
              </div>

      <%--<ul class="rsResourceControls">--%>
        </fieldset></div>
        <div style="width: 110px; height: 193px; float: left;" align="left">
        <fieldset id="Fieldset6">
            <legend></legend>
            <div>
                <label style="font-size: small; font-weight: bold">Saturday</label>
                <%--<span style="margin: 0px 0 0 0px; font-size: 12px;">All Day</span>--%>
            <div style="margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 0px;">
                    <p align="left">
                        <%--<span style="margin: 0px 0 0 0px; font-size: 12px;">Morning</span>--%>
                        <span><input type="radio" name="DefaultTimeButton" id="Radio31" value="AllDay"
                                    onclick="changeStartTime('dayAll');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <%--<ClientEvents OnPopupOpening="AdjustRadWidow" OnPopupClosing="AdjustRadWidow" />--%>
                        <span><input type="radio" name="DefaultTimeButton" id="Radio32" value="DayOff"
                                    onclick="changeStartTime('dayOff');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <%--<ClientEvents OnPopupOpening="AdjustRadWidow" OnPopupClosing="AdjustRadWidow" />--%>
                        <span><input type="radio" name="DefaultTimeButton" id="Radio33" value="Morning"
                                    onclick="changeStartTime('morning');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <span><input type="radio" name="DefaultTimeButton" id="Radio34" value="Evening"
                                    onclick="changeStartTime('evening');" style="width: 15px"></input></span>
                    </p>
                    <p align="left">
                        <span><input type="radio" name="DefaultTimeButton" id="Radio35" value="AllDay"
                                    onclick="changeStartTime('Manual');" style="width: 15px"></input></span>
                    </p>
                </div>
                <div style="margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;">

            <telerik:RadDateTimePicker ID="RadDateTimePickerSaturdayStart" Runat="server"
        Culture="en-US" Width="75px" >
<TimeView CellSpacing="-1" columns="4" culture="en-BZ" interval="00:30:00"
            renderdirection="Vertical"></TimeView>

</telerik:RadDateTimePicker>

                </div>
                <div style="margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;">

            <telerik:RadDateTimePicker ID="RadDateTimePickerSaturdayEnd" Runat="server"
        Culture="en-US" Width="75px" >
<TimeView CellSpacing="-1" columns="4" culture="en-BZ" interval="00:30:00"
            renderdirection="Vertical"></TimeView>

answered on 18 Oct 2012, 01:49 PM

Here is my code:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Dialog1.aspx.vb" Inherits="MSP.Dialog1" %>
<%--<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Dialog1.aspx.vb" Inherits="Dialog1" %>--%><%--<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dialog1.aspx.cs" Inherits="Telerik.Web.Examples.Window.DialogReturnValue.Dialog1" %>--%>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>The Eruption</title>
    <style type="text/css">
        html, body, form
        {
            padding: 0;
            margin: 0;
            height: 100%;
            background: #f2f2de;
            width: 1113px;
            float:left;
        }

        body
        {
            font: normal 11px Arial, Verdana, Sans-serif;
            float:left;
        }

        fieldset
        {
            height: 500px;
            float:left;
        }

        * + html fieldset
        {
            height: 154px;
            width: 268px;
            float:left;
        }
        HTML

{

overflow: hidden;

    }
    </style>
</head>
<%--<body onload="AdjustRadWidow();">--%>
<body onload="">
    <form id="Form2" method="post" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadFormDecorator ID="RadFormDecorator1" DecoratedControls="All" runat="server"
        Skin="Sunset" />
    <script type="text/javascript">
        function GetRadWindow() {
            var oWindow = null;
            if (window.radWindow) oWindow = window.radWindow;
            else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
            return oWindow;
        }

        function openWin2() {
            var parentPage = GetRadWindow().BrowserWindow;
            var parentRadWindowManager = parentPage.GetRadWindowManager();
            var oWnd2 = parentRadWindowManager.open("Dialog2.aspx", "RadWindow2");
            window.setTimeout(function () {
                oWnd2.setActive(true);
            }, 0);
        }

        function populateCityName(arg) {
            var cityName = document.getElementById("cityName");
            cityName.value = arg;
        }

        function AdjustRadWidow() {
            var oWindow = GetRadWindow();
            setTimeout(function () { oWindow.autoSize(true); if ($telerik.isChrome || $telerik.isSafari) ChromeSafariFix(oWindow); }, 2000);
        }

        //fix for Chrome/Safari due to absolute positioned popup not counted as part of the content page layout
        function ChromeSafariFix(oWindow) {
            var iframe = oWindow.get_contentFrame();
            var body = iframe.contentWindow.document.body;

            setTimeout(function () {
                var height = body.scrollHeight;
                var width = body.scrollWidth;

                var iframeBounds = $telerik.getBounds(iframe);
                var heightDelta = height - iframeBounds.height;
                var widthDelta = width - iframeBounds.width;

                if (heightDelta > 0) oWindow.set_height(oWindow.get_height() + heightDelta);
                if (widthDelta > 0) oWindow.set_width(oWindow.get_width() + widthDelta);
                oWindow.center();

}, 310);
}

        function returnToParent() {
            //create the argument that will be returned to the parent page
            var oArg = new Object();

//get the city's name
oArg.cityName = document.getElementById("cityName").value;

            //get the selected date from RadDatePicker
            //oArg.selDate = datePicker.get_selectedDate().toLocaleDateString();
            oArg.selDate = "Friday, October 26, 2012";

//get a reference to the current RadWindow
var oWnd = GetRadWindow();

            //Close the RadWindow and send the argument to the parent page
            if (oArg.selDate && oArg.cityName) {
                oWnd.close(oArg);
            }
            else {
                alert("Please fill both fields");
            }
        }
        function closeWin() {
            GetRadWindow().close();
            //            window.location.href("http://localhost:61973/MyAvailability/MyAvailability.aspx");
            GetRadWindow().BrowserWindow.document.forms[0].submit();
        }

        function RefreshParentPage() {
            //GetRadWindow().BrowserWindow.location.reload();
            GetRadWindow().BrowserWindow.document.forms[0].submit();
        }

//add codes to set the minimum time of the end time picker when the start tme changed
Telerik.Web.UI.RadTimeView.prototype._rePaint = function () {

this._detachEventHandlers();

this._timeMatrix = this._setTimeMatrix();

var table = $telerik.$(this._findTableElement(this.DivElement));

var header = this._showHeader ? table.find('tr:first') : null;

var footer = this._showFooter ? table.find('tr:last') : null;

var cellTemplate = table.find('td:not(.rcHeader):first');

var dataRowStart = this._showHeader ? 1 : 0;

var dataRowEnd = this._timeMatrix.length - (this._showFooter ? 1 : 0);

table.find('tr').remove();

var tbody = table.find('tbody');

if (header)

tbody.append(header);

var dateFormatInfo = $find(this.get__OwnerDatePickerID()).get_dateInput().get_dateFormatInfo();

for (var row = dataRowStart; row < dataRowEnd; row++) {

var tr = $telerik.$('<tr>');

for (var cell = 0; cell < this.get_columns(); cell++) {

var date = this._timeMatrix[row][cell];

if (date) {

var td = cellTemplate.clone();

var textElement = td.find('*:not(:empty):last');

textElement.text(dateFormatInfo.FormatDate(date, this._timeFormat));

tr.append(td);

}

tbody.append(tr);

}

if (footer)

tbody.append(footer);

this._attachEventHandlers();

}

Telerik.Web.UI.RadTimeView.prototype._detachEventHandlers = function () {

if (this._onCellMouseOutDelegate) {

$removeHandler(this.DivElement, "mouseout", this._onCellMouseOutDelegate);

this._onCellMouseOutDelegate = null;

}

if (this._onCellMouseOverDelegate) {

$removeHandler(this.DivElement, "mouseover", this._onCellMouseOverDelegate);

this._onCellMouseOverDelegate = null;

}

if (this._onCellClickDelegate) {

$removeHandler(this.DivElement, "click", this._onCellClickDelegate);

this._onCellClickDelegate = null;

}

</script>

</telerik:RadDateTimePicker>

                </div>
                <div style="margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;">

            <telerik:RadDateTimePicker ID="RadDateTimePickerTuesdayEnd" Runat="server"
        Culture="en-US" Width="75px" >
<TimeView CellSpacing="-1" columns="4" culture="en-BZ" interval="00:30:00"
            renderdirection="Vertical"></TimeView>

Culture="en-US" Width="75px" >
<TimeView CellSpacing="-1" columns="4" culture="en-BZ" interval="00:30:00"
renderdirection="Vertical"></TimeView>

</telerik:RadDateTimePicker>

                </div>
                <div style="margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;">

            <telerik:RadDateTimePicker ID="RadDateTimePickerThursdayEnd" Runat="server"
        Culture="en-US" Width="75px" >
<TimeView CellSpacing="-1" columns="4" culture="en-BZ" interval="00:30:00"
            renderdirection="Vertical"></TimeView>

</telerik:RadDateTimePicker>


                </div>
                <div style="margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;">

            <telerik:RadDateTimePicker ID="RadDateTimePickerFridayEnd" Runat="server"
        Culture="en-US" Width="75px" >
<TimeView CellSpacing="-1" columns="4" culture="en-BZ" interval="00:30:00"
            renderdirection="Vertical"></TimeView>

</telerik:RadDateTimePicker>

answered on 12 Feb 2013, 07:19 PM

time-picker-end-time-missing.png

time-picker-end-time-missing-correct.png

time-picker-end-time-missing-wrong.png

It works find, except the end time "close" which is 11:59:59 PM missing.
Please refer to the PNG files.

answered on 12 Feb 2013, 07:34 PM

time-picker-end-time-missing-correct.png

time-picker-end-time-missing-wrong.png

Is there a way I can put "close" for the end time. When the user select the "close", it means 11:59:59 PM.
Please see the attached files.
PS, the way it creates the "close" is because I created the script:
Protected Sub RadDateTimePickerSundayEnd_ItemDataBound(sender As Object, e As Telerik.Web.UI.Calendar.TimePickerEventArgs) Handles RadDateTimePickerSundayEnd.ItemDataBound
        If TypeOf e.Item Is DataListItem Then
            Dim item As DataListItem = TryCast(e.Item, DataListItem)
            If TypeOf item.Controls(0) Is HtmlGenericControl Then
                Dim link As HtmlGenericControl = TryCast(item.Controls(0), HtmlGenericControl)
                If link.InnerText.Contains("12:00 AM") Then
                    link.InnerText = If(firstTimeSundayEnd, "Open", "Close")
                    firstTimeSundayEnd = False
                End If
            End If
        End If
    End Sub

answered on 13 Feb 2013, 03:17 PM

Yes, add a button to the footer of the TimeView and handle the button's OnClientClicked event:

<TimeView TimeFormat="HH:mm">

<FooterStyle HorizontalAlign="Center" />

<FooterTemplate>

<telerik:RadButton ID="btnClose" runat="server" Text="Close" ToolTip="Will use 11:59:59 PM"

AutoPostBack="false" OnClientClicked="closeClicked">

</telerik:RadButton>

</FooterTemplate>

</TimeView>

Javascript:

function closeClicked(sender,args)

{

var timeViewID = $(sender.get_element()).parents('div[id$=timeView]').get(0).id;

var timeView = $find(timeViewID);

timeView.setTime(23, 59, 59);

var datePicker = $find(timeView.get__OwnerDatePickerID());

datePicker.hideTimePopup();

}

answered on 15 Feb 2013, 06:49 PM

time-picker-end-time-missing-correct.png

time-picker-end-time-missing-wrong.png

No, please don't misunderstand. Please refer to the first PNG, The "close" is there. When the user click the "close", it show "11:59:59 PM". However, for the End Time (second PNG), the "close" is missing. I believe there is something to do with either rePaint function or ._detachEventHandlers.
I do not need a Close Button.

answered on 15 Mar 2013, 10:23 PM

DateTimePicker.png

OK, I'm creating a simple test program and use the set_startTime method, it doesn't work. It should start from 6:am (I hard code it).
Please refer to the attached png

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript">
    function OnPopupOpening(sender, args) {
        var MDate = sender.get_minDate();
        sender.set_minDate(2013 + '-' + 3 + '-' + 13 + '-' + 6 + '-' + 00 + '-' + 0 + '-' + 0);
        var MDateAfter = sender.get_minDate();
        var TWStartTime = sender._timeView.get_startTime();
        sender._timeView.set_startTime(6 + '-' + 00 + '-' + 0 + '-0-0');
//        var newTime = new Date('Wed Mar 13 06:00:00 EDT 2013');
//        sender._timeView.set_startTime('Wed Mar 13 06:00:00 EDT 2013');
        var TWStartTimeAfter = sender._timeView.get_startTime();
        var picker = $find("<%= RadDateTimePicker2.ClientID %>");
        var timeview = sender.get_timeView();
//        var NDate = new Date('Wed Jan 31 6:00:00 EST 1990');
        var NDate = new Date(2013, 2, 13, 6, 0, 0, 0);
        $telerik.toTimeView(timeview).set_startTime(NDate);
        var TWStartTimeAfter = sender._timeView.get_startTime();
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">

answered on 20 Mar 2013, 02:02 PM

I've addressed this in my Feb 23 post here. In the beginning of your function, you seem to be setting the start time correctly, however at the end of the function, you're trying to set the start time with a javascript Date object. As I've explained earlier, telerik expects serialized date/time strings when setting these values, as you've done in the beginning of the OnPopupOpening function. Also, the calendar and timeview html has been rendered on the server. When the popup opens, it's just showing that server-rendered control. In order for you to change the rendering you have to implement what I've outlined in the above linked post.

answered on 20 Mar 2013, 02:06 PM

Hi,

I am afraid that the desired functionality could not be achieved on the client-side. This is true because the structure is created on the server and could be only overridden on the server, not on the client side.

If you want to remove some the predefined times you could make them invisible with this function:

function OnPopupOpening(sender, args) {

var date = [1, 6, 0, 0, 0];

var popUp = args.get_popupControl().get_element();

var cells = popUp.getElementsByTagName("a");

for (var i = 0; i < cells.length; i++) {

var cellValue = cells[i].innerHTML;

if (cellValue.indexOf("AM") != -1) {

var hour = cellValue.split(" AM")[0].split(":")[0];

if (hour < 6 || hour=="12") {

cells[i].parentNode.style.display = "none";

}

Regards,
Andrey
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

radTimePicker set Start and End Time in Client-Side Javascript

30 Answers, 1 is accepted