[Solved] Kendo Numeric Text Box Out of Range Changing to Min or Max

[Lee]

I am trying to use the kendo numeric text box (jquery), however I'm having an issue. I'm using the text box to collect the user's year of birth. This can realistically be a value between 1902 and 2022 (the current year). I set the min to 1902 and the max to 2022. The user can also choose to leave this field blank and not provide a year of birth. When a user types 19 into the field it changes it to 1902. I don't want this as the likelihood that the user's year of birth is actually 1902 is very small. Instead I would like it to blank the field out. I have tried getting rid of the min and max values but then the up/down arrows become virtually useless since the user would have to click up 1,902 times just to get to a valid value.  How can I keep the up arrows starting at 1902 and ending at 2022 while also not having kendo change the value to the min or max?

I have seen a few other posts on the topic that are old and the issue was never properly addressed. 

[Georgi Denchev]

Hello, Lee,

As this is a built-in behavior of the widget, the only way to properly change it is to modify the internal logic that handles the adjusts the values.

I've prepared a Dojo example and left comments describing the overall idea behind the logic:

https://dojo.telerik.com/@gdenchev/inOQecuQ 

Let me know if you have any questions.

Best Regards,
Georgi Denchev
Progress Telerik

[Lee]

It has been 4 years. Is there a better solution than this that will also trigger validation automatically?

[Vasko]

Hi,

I hope you are doing well!

There is a cleaner approach now that doesn't require overriding internal methods. The trick is to not set min/max on the widget itself. That's what causes the auto-clamping behavior. Instead, you enforce the bounds manually using the spin and change events:

<form id="birthYearForm">
    <label for="yearOfBirth">Year of Birth (optional):</label>
    <input id="yearOfBirth" name="yearOfBirth" />
</form>

<script>
    $(document).ready(function () {
        const MIN_YEAR = 1902;
        const MAX_YEAR = 2026;

        $("#yearOfBirth").kendoNumericTextBox({
            format: "####",
            decimals: 0,
            restrictDecimals: true,
            placeholder: "e.g. 1990",
            spin: function () {
                let val = this.value();

                if (val == null || val < MIN_YEAR) {
                    this.value(MIN_YEAR);
                } else if (val > MAX_YEAR) {
                    this.value(MAX_YEAR);
                }
            },
            change: function () {
                let val = this.value();

                if (val !== null && (val < MIN_YEAR || val > MAX_YEAR)) {
                    this.value(null);
                }

                validator.validateInput(this.element);
            }
        });

        let validator = $("#birthYearForm").kendoValidator({
            rules: {
                yearrange: function (input) {
                    let widget = input.data("kendoNumericTextBox");
                    let val = widget.value();
                    return val >= MIN_YEAR && val <= MAX_YEAR;
                }
            },
            messages: {
                yearrange: `Year of birth must be between ${MIN_YEAR} and ${MAX_YEAR}`
            }
        }).data("kendoValidator");
    });
</script>

Try this approach and let me know if it helped in your situation.

Regards,
Vasko
Progress Telerik