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
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
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
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
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:
.Events(events => events.Edit("onEdit"))
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