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

need to make DatePicker control read only

7 Answers 431 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Greg
Top achievements
Rank 1
Greg asked on 24 Jun 2013, 03:10 PM
I need to make the date picker control read only. Can someone help please:
Here is my code.

@(Html.Kendo().DatePicker()
.Name("DateOfPub")
.Value("@Model.DateOfPub")
 )

Thanks
Vandana
 

7 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 25 Jun 2013, 02:44 PM
Hi Vandana,

Please use the readonly method of the widget.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Amir
Top achievements
Rank 1
answered on 19 Jan 2016, 06:05 AM
Datepicker does not work when readonly. I wanted to force user to pick dates not being able to type them, but it did not work!!!
0
Georgi Krustev
Telerik team
answered on 21 Jan 2016, 08:31 AM
Hello Amir,

Please take a look at this how-to demo for more details:
Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Heythem
Top achievements
Rank 1
answered on 22 Mar 2019, 11:27 AM
Hello , 
I tried this solution but the issue now is that the validation that i created for my field is not working ( i created a custom rule to verify that the end date is always greater than the start date ) 

I also tried to add a required : true to avoid entering an empty value in the date input , but it didnt work what i get is a validation tooltip with the title of the field in it 
0
Tsvetomir
Telerik team
answered on 26 Mar 2019, 11:01 AM
Hi Heythem,

By design, the readonly fields are not validated. Actually, the validation is thrown when the "blur" event of the input is thrown. The validation has been designed in such a way because it is not expected a readonly field to be validated. It is assumed that it is valid. However, this is logic which is not easily overriddable. 

As a workaround, I can suggest you to either use the DateRangePicker widget or change the min/max within the change event handler of the date picker:

1. Kendo UI DateRangePicker - https://demos.telerik.com/kendo-ui/daterangepicker/index
2. Kendo UI DatePicker with range selection - https://demos.telerik.com/kendo-ui/datepicker/rangeselection


Kind regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Heythem
Top achievements
Rank 1
answered on 26 Mar 2019, 12:17 PM
Hi Tsvetomir ,
Thank you for the proposition , but i think it's not usuful in my case 
because what I have right know is a Scheduler , and when the user picks some date from it (which contains Start and End dates + other fields ) 
I have 2 validation :
- on the end date which has to be greater than the start date 
- on both date fields to make sure the date input is valid 

those 2 validation are working properly when there is an actual value given by the user ,the only scenario to be handled now is the empty input 
I tried creating some custom validation rule , using required set to True , but none of that worked 
that's why i thought of making the field readonly

So after knowing all this how can i solve this issue ?
0
Tsvetomir
Telerik team
answered on 28 Mar 2019, 07:22 AM
Hi Heythem,

Based on the provided specification that the DatePicker is actually within a Kendo UI Scheduler, I assume that the pickers are actually inside the editor, is that correct?

If so, the editor comes with a built-in validator which can be used for further customizations. Generally, it can be accessed in the Edit event of the scheduler:

$("#scheduler").kendoScheduler({
  edit: scheduler_edit,

function scheduler_edit(e) {
  var editable = e.container.data("kendoEditable");
  var validator = e.container.data("kendoValidator");
}

More information can be obtained in the following Knowledge Base article, here:

https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/validation/getting-reference-to-the-validator

The validation for the required fields is recommended to be set in the schema.model configuration of the scheduler's data source:

schema: {
  model: {
    id: "taskID",
    fields: {
      taskID: { from: "TaskID", type: "number" },
      title: { from: "Title", defaultValue: "No title", validation: { required: true } },

However, the build-in validator would validate for empty fields which have date picker editors. Can you modify the Dojo sample above in order to replicate the scenario you are facing on your side and send it back to me? This would ensure that we are on the same page and I will provide more accurate suggestions.

https://dojo.telerik.com/oboNaSoR


Kind regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Date/Time Pickers
Asked by
Greg
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Amir
Top achievements
Rank 1
Georgi Krustev
Telerik team
Heythem
Top achievements
Rank 1
Tsvetomir
Telerik team
Share this question
or