[Solved] RadDatePicker SelectedDate null when disable

[guillaume.lebel]

Hi,

In my page i have 3 date picker, but only 2 are enable. The last one of those is disable and only have a selectedDate when the first 2 one have a date selected. Everything is set from client side on OnDateSelected event.

But i try to get the date from my last datepicker in server side it always return me a null value.

I try to enable the control and it work fine i was able to get the selecteddate. But i can't keep the control enable i absolutly need it disable.

Here is the code i'm using to validate my selecteddate:

        <script language="javascript" type="text/javascript">

            var datePickerAttributionSetter;
            function InitializedAttributionDateSetter(sender, args)
            {
                var datePickerAttribution = $find("<%= RadDatePickerAttribution.ClientID %>");
                var datePickerTheoricalExam = $find("<%= RadDatePickerTheroicExam.ClientID %>");
                var datePickerPracticalExam = $find("<%= RadDatePickerPracticalExam.ClientID %>");

                datePickerAttributionSetter =
                 new QualificationAttribution.QualificationAttributionDateSetter(datePickerAttribution,
                 datePickerTheoricalExam, datePickerPracticalExam);
            }

            Sys.Application.add_load(InitializedAttributionDateSetter);
        </script>

QualificationAttribution.QualificationAttributionDateSetter = function(datePickerAttribution, datePickerTheoricalExam, datePickerPracticalExam)
{
    this._datePickerAttribution = datePickerAttribution;
    this._datePickerTheoricalExam = datePickerTheoricalExam;
    this._datePickerPracticalExam = datePickerPracticalExam;

    if ((this._datePickerTheoricalExam != null) && (this._datePickerPracticalExam != null))
    {
        var theoricalSelectedDateHandler = FixHandler(this.OnSelectedDate, this);
        datePickerTheoricalExam.add_dateSelected(theoricalSelectedDateHandler);
        datePickerTheoricalExam.add_disposing(function()
        {
            datePickerTheoricalExam.remove_dateSelected(theoricalSelectedDateHandler);
        });

        var practicalSelectedDateHandler = FixHandler(this.OnSelectedDate, this);
        datePickerPracticalExam.add_dateSelected(practicalSelectedDateHandler);
        datePickerPracticalExam.add_disposing(function()
        {
            datePickerPracticalExam.remove_dateSelected(practicalSelectedDateHandler);
        });
    }
}

QualificationAttribution.QualificationAttributionDateSetter.prototype.OnSelectedDate = function()
{
    var theoricalExamDate = this.GetDate(this._datePickerTheoricalExam);
    var practicalExamDate = this.GetDate(this._datePickerPracticalExam);

    if ((theoricalExamDate != null) && (practicalExamDate != null))
    {
        var highestDate = this.GetHighestDate(theoricalExamDate, practicalExamDate);
        this._datePickerAttribution.set_selectedDate(new Date(highestDate));
    }
    else
    {
        this._datePickerAttribution.set_selectedDate();
    }
}

QualificationAttribution.QualificationAttributionDateSetter.prototype.GetDate = function(radDatePicker)
{
    return radDatePicker.get_selectedDate();
}

QualificationAttributionDateSetter.prototype.GetHighestDate = function(theoricalExamDate, practicalExamDate)
{
    if ((theoricalExamDate == null) || (practicalExamDate == null))
    {
        return null;
    }

    if (theoricalExamDate > practicalExamDate)
    {
        return theoricalExamDate;
    }
    return practicalExamDate;
}

Thx for your time,
Guillaume

[Dimo]

Hello Guillaume,

Disabled controls do not post their values to the server in Internet Explorer.

On the other hand, if the third datepicker will always be disabled, you don't need it at all - it will be better to use a more simple control to display a date. The date can be posted to the server in a HiddenField control, which the users cannot modify.

All the best,
Dimo
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.

[Gaurab]

I have this same problem.  I have a series of DatePickers and they have to be selected in order.  So as the user progresses through them, my client-side code will disable ones they can no longer change.  So I put the selected dates in hidden fields like suggested.  It's not really easy to figure out exactly how to do that so I'm posting it here.

<telerik:RadDatePicker runat="server" ID="RadDatePicker1"
   ClientEvents-OnDateSelected="RadDatePicker1_DateSelected"/>
<asp:HiddenField runat="server" ID="hdnRadDatePicker1"/>

function RadDatePicker1_DateSelected(sender, eventArgs)
{
    if (eventArgs.get_newDate() == null)
    {
        $("#<%= hdnRadDatePicker1.ClientID %>").val("");
    }
    else
    {
        $("#<%= hdnRadDatePicker1.ClientID %>").val(eventArgs.get_newValue());
    }
}

However, I'm also setting the maxDate and minDate on the client-side and they are NOT null when the control is disabled and I post back.  So I'm thinking our friends at Telerik could actually find a way to help us out with a built in work-around.  Perhaps a DisabledSelectedDate property?  Just when y'all get some spare time.  :-)

Oh, and documenting this IE issue on this page, right in the description of the set_enabled would be a great benefit too!

[Vasil]

Hi Jon,

There is ReadOnly property which will do exactly what it is required. The input will feel like disabled, because the user will not be able to change its value, but the changed value using JavaScript will be submitted.

Regards,
Vasil
Telerik

[Gaurab]

I tried your suggestion, but it's not really doing what I want unless I'm misunderstanding something.  I made a screencast of what I'm currently doing.  I like this current behavior and look/feel.

I only allow the user to update the last entered date or enter the new date for the next stage.  When I send the page out from the server, I set the enabled property on the server.  When the user makes a change on the client, I enable/disable the appropriate RadDatePickers on the client.

I see where I can set the ReadOnly on the DateInput and disable the Calendar on the server.  But I don't like the way it looks/behaves, and I don't see that I can set the ReadOnly property on the client.  So I don't think this is helpful for me.  Am I missing something?

[Vasil]

Hi Jon,

Now I see your exact requirements from the video that you have sent. Indeed to achieve this you will need to submit the values in another form element, because when the Picker is disabled, it will not submit the value.
You could however remove the disabled attribute from the picker's hidden input, and it will be able to submit the value. This will work only if the Picker was Enabled server side before the current postback.
Here is example code:

$find("RadDatePicker1").set_enabled(false);
$find("RadDatePicker1").get_dateInput().set_enabled(true);
$get("RadDatePicker1" + "_wrapper").removeAttribute("disabled");

Please note that .set_enabled(true) for the DateInput is different than .enable(). This only update its client state, but the DateInput will not look as enabled.

Regards,
Vasil
Telerik

[Gaurab]

Oh. OK.  It's good to know I have additional options.  I think I'll just stick with the above solution I posted.  Although it's not ideal, it is working well.

Thanks for following up.