[Solved] DatePicker client validation max/min issue (2011.3.1306.235)

[Igor Milososki]

Hi,

we're having a problem with the max/min properties of the datepicker control and client side validation. In an older version, the client validation would mark input outside the max/min range as invalid, which is our desired behavior.

In this new version, it does however just change the date to the nearest valid date without indicating that anything is wrong (on blur). We use this in a medical system and changing a date in this manner may cause the user not to notice that the date was changed, which may lead to some potentially hazardous situations.

Is there any way to keep using client side validation to just make the user aware of a bad input instead, without changing the control's value? We could resort to custom js or server side validation, but it wouldn't be as good looking from a code point of view.

Thanks,
Igor

[Georgi Krustev]

Hello Igor,

 
The described behavior is expected. In order to achieve your goal you will need to modify the datepicker's code. First you will need to override _update method of the datepicker:

$("#DatePicker").data("tDatePicker")._update = function (val) {
                        val = this.parse(val),
                            oldValue = this.selectedValue,
                            formattedSelectedValue = oldValue ? $t.datetime.format(oldValue, this.format) : '',
                            formattedValue = val ? $t.datetime.format(val, this.format) : '';

                        this._value(val);

                        if (formattedValue != formattedSelectedValue) {
                            var data = {
                                previousValue: oldValue,
                                value: val,
                                previousDate: oldValue,
                                date: val
                            };

                            if ($t.trigger(this.element, 'valueChange', data)) {
                                this._value(oldValue)
                            }
                        }
                    }

Secondly you should wire the blur event of the input and use this event handler:

function() {
                    var val = this.selectedValue;

                    if (val != null && (val - this.minValue <= 0 || val - this.maxValue >= 0)) {
                        clearTimeout(this.bluring);
                        this.$element.addClass("t-state-error");
                    }
                }

I have modified this online demo using the aforementioned code excerpts. Here how they look like together:

<%
    Html.Telerik().ScriptRegistrar().OnDocumentReady(() =>
    {
        %>
            var $t = $.telerik,
                datepicker = $("#DatePicker").data("tDatePicker");

            datepicker._update = function (val) {
                    val = this.parse(val),
                        oldValue = this.selectedValue,
                        formattedSelectedValue = oldValue ? $t.datetime.format(oldValue, this.format) : '',
                        formattedValue = val ? $t.datetime.format(val, this.format) : '';

                    this._value(val);

                    if (formattedValue != formattedSelectedValue) {
                        var data = {
                            previousValue: oldValue,
                            value: val,
                            previousDate: oldValue,
                            date: val
                        };

                        if ($t.trigger(this.element, 'valueChange', data)) {
                            this._value(oldValue)
                        }
                    }
                }

            datepicker.$element.blur($.proxy(function() {
                var val = this.selectedValue;

                if (val != null && (val - this.minValue <= 0 || val - this.maxValue >= 0)) {
                    clearTimeout(this.bluring);
                    this.$element.addClass("t-state-error");
                }
            }, datepicker));
        <%
    });
%>

I have logged your request to our internal system. If other users wants the same behavior we will consider to change it.

Regards,
Georgi Krustev
the Telerik team