Search code examples
javascriptkendo-uikendo-datepicker

Kendo datepicker non editable


I am using kendo date picker in my project. Kendo supports the user to edit the dates and it allows the free text as well. How to prevent user to enter anything apart from dates.


Solution

  • You have two options that I know of to fix this problem.

    Option 1:

    Create a custom validator: http://docs.telerik.com/kendo-ui/framework/validator/overview

    Option 2:

    On save OR data change, you can check to see it the date is truly valid (I've wrapped this in my own utility classes so that JQuery is not in my view model):


    function isValidDateTimePickerDate(id, allowNullsOrBlank) {
    /// <summary>Examines the date in a Telerik date time picker to see if it is valid.</summary>
    /// <param name="id" type="string">A string that represents the element's id (assumes it is prefixed with # -- my utility does not assume this, but I've condensed it for this post)</param>
    /// <param name="allowNullsOrBlank" type="boolean">Indicates if a null is valid</param>
    if (allowNullsOrBlank == null) {
        allowNullsOrBlank = true;
    }
    
    var value = $(id).val();
    
    // Allow the user to have null or blank?
    if (value == null || value.length === 0) {
        return allowNullsOrBlank;
    }
    
    var date = kendo.parseDate(value);
    if (!date) {
        return false;
    }
    
    // Dates prior to 1900 are not valid and dates lower than 1753 
    // will throw database exceptions in SQL Server
    if (date.getFullYear() < 1900) {
        return false;
    }
    
    return true;
    };