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

3 posts, 0 answers
  1. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 11 Jan 2010 Link to this post

    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()) {  

    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.

  2. Peter
    Peter avatar
    6637 posts

    Posted 14 Jan 2010 Link to this post

    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();

    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.
  3. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 14 Jan 2010 Link to this post

    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 {




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

                        if (animate) {



                            if (!isDoEnd)

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

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



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


                        else {

                            if (!isDoEnd) {




                            else {





Back to Top