Problem setting End Date to equal Start Date on Start Date changed event

[towpse]

Greets folks,
I want to set the end date to the start date when the start date chages.
I've followed instructions i found on the site to use this code

        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
            <script type="text/javascript">
                function changeEndDate(sender, e) {
                    //if start date changes change end date to be greater than start
                    var endDatePicker = $find("<%= EndDate.ClientID %>");
                    if ( sender.get_selectedDate() > endDatePicker.get_selectedDate()) {
                        endDatePicker.set_selectedDate(sender.get_selectedDate());
                    }
                }
            </script>
        </telerik:RadScriptBlock>

I'm doing something a little different with regards to showing and hiding controls on the advanced form.

When the form first loads, I am only showing the start date and time.
The user has the ability to specify an end date time but they are not required to.

If the form loads with just the start visible and end hidden, the end date is not getting updated on start date change when the end date control is hidden and it continues to not get updated on start date change even when i use the UI to show the end date. 
When debugging I see that the control is accessible but the date values are not correct.

If I successfully save an appointment with a valid start and end date and I go to edit that appointment, my advanced form pops up with both the start and end visible. At this point that changeEndDate function works as expected even when the end date control is hidden using the UI (if a user decides they no longer need an end date they can hide the end date controls).

So the changeEndDate function works when the end date control is visible and hidden ( as I would expect) except for when the form loads with the end date controls hidden (which I don't expect).
The same code is being used to hide the end date controls using a check box similar to how the all day check box hides the time controls.

any tips? this is probably a general html/javascript issue rather than a telerik specific one.

regards

[Peter]

Hello towps,

How do you hide the end date? I tried your approach, but I used jQuery to hide the end date and it worked fine.

function OnClientFormCreated(sender, eventArgs) {
           $telerik.$(".rsTimePickers li:nth-child(2)").hide();
       }

Greetings,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[towpse]

I modelled the way i do it based on the all day check box.

You tried loading the form with the end box hidden before it shows and then changing the end date to match the start date on start date change and it did what you expected?

Here's some samples of what I'm doing to show and hide the end date
 
var isDoEnd

if (apt.get_attributes().getAttribute("DoEnd")) {

isDoEnd= apt.get_attributes().getAttribute("DoEnd") == "1" ? true : false;

}

var doEndBox = $("#" + this._templateId + "_DoEndCheckBox");

if (isDoEnd != doEndBox [0].checked) {

doEndBox [0].checked = isDoEnd;

this._onDoEndCheckBoxClick(isDoEnd, false); //no animation

}

The check box handler will create a click handler that looks something like this;
I'm usind find() to get the end time picker and using hide() to hide it.

                var endDateTimePicker = controlList.find('.endActionDateTime');

                var showEndDateAndTime = function() {

                    if ($telerik.isSafari || $telerik.isOpera) {

                        endDateTimePicker.css("display", "inline-block
                    }

                    else {

                        endDateTimePicker.show();

                    }

                }; 

                controlList.find('.rsTimePick').each(function() {

                    if (animate) {

                        $(this).stop();

 

                        if (!isDoEnd)

                            $(this).animate({ width: allDayPickersWidth }, "fast", "linear", function() {

                                endDateTimePicker.css("visibility", "hidden");

                            });

                        else

                            $(this).animate({ width: initialPickersWidth }, "fast");

                    }

                    else {

                        if (!isDoEnd) {

                            endDateTimePicker.hide();

                            $(this).width(allDayPickersWidth);

                        }

                        else {

                            $(this).width(initialPickersWidth);

                        }

                    }

                });