This is a migrated thread and some comments may be shown as answers.

Prevent users manually entering date via input control

4 Answers 1091 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 2
Michael asked on 24 Nov 2016, 09:47 AM

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

4 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 28 Nov 2016, 09:52 AM
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.
0
Michael
Top achievements
Rank 2
answered on 28 Nov 2016, 01:07 PM

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

0
Michael
Top achievements
Rank 2
answered on 28 Nov 2016, 02:09 PM
[quote]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

[/quote]

 

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

0
Eyup
Telerik team
answered on 30 Nov 2016, 09:30 AM
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.
Tags
Date/Time Pickers
Asked by
Michael
Top achievements
Rank 2
Answers by
Eyup
Telerik team
Michael
Top achievements
Rank 2
Share this question
or