Prevent users manually entering date via input control

5 posts, 0 answers
  1. Michael
    Michael avatar
    11 posts
    Member since:
    Sep 2015

    Posted 24 Nov 2016 Link to this post

    Hello,

    I would like to force users to select dates from the DatePicker calendar widget,  preventing them from manually keying the dates into the rendered input control. Ideally the input control would be hidden and replaced with a label showing the currently selected date.

    Is there a way to configure this out of the box?

    Many Thanks,

    Mike

  2. Eyup
    Admin
    Eyup avatar
    3210 posts

    Posted 28 Nov 2016 Link to this post

    Hi Mike,

    You can achieve this requirement using the approach demonstrated in the following article:
    http://docs.telerik.com/kendo-ui/controls/editors/datepicker/how-to/readonly-input

    I hope this will prove helpful.

    Regards,
    Eyup
    Telerik by Progress
    Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
  3. Michael
    Michael avatar
    11 posts
    Member since:
    Sep 2015

    Posted 28 Nov 2016 in reply to Eyup Link to this post

    HI Eyup,

     

    Many thanks for your reply - it is helpful. What is the best approach when looking to apply the same properties to Grid with inline/batch editing - where the date fields are dynamically rendered as they get focus?

     

    Thanks,

    Mike

  4. Michael
    Michael avatar
    11 posts
    Member since:
    Sep 2015

    Posted 28 Nov 2016 in reply to Michael Link to this post

    Michael said:

    HI Eyup,

     

    Many thanks for your reply - it is helpful. What is the best approach when looking to apply the same properties to Grid with inline/batch editing - where the date fields are dynamically rendered as they get focus?

     

    Thanks,

    Mike

     

    Further to my previous reply,  something else has occurred to me regarding a read-only DatePicker - it would also be useful to have a way to clear a date from a read-only control.   So the user is forced to use the calendar widget and not enter manually, but should also be able to change his/her mind after making a date selection for nullable dates.

     

    Is this possible to configure out of the box?

     

    Reagrds,

    Mike

  5. Eyup
    Admin
    Eyup avatar
    3210 posts

    Posted 30 Nov 2016 Link to this post

    Hi Michael,

    Generally, you can achieve this requirement using the Edit event handler:
    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit


    When the row or cell is opened in edit mode, you can find the instance of the picker. Here is a common sample:
    Copy Code
    .Events(events => events.Edit("onEdit"))
    JavaScript:
    Copy Code
    function onEdit(args) {
        if (args.model.isNew() != false) {
                // textbox
                $("#ShipName").attr("readonly", true);
                 
                // dropdownlist
                var kendoDdl = $("#ShipCountry").data("kendoDropDownList");
                kendoDdl.readonly(true);
        }
    }

    Once you have the picker instance, you can find its input element and attach event to its key press and if the key is for example Esc or Backspace, you can clear the picker content. Alternatively, you can manually create a X clear button next to the picker ​to do that.

    Regards,
    Eyup
    Telerik by Progress
    Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
Back to Top