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

DataRangePicker label localization

7 Answers 370 Views
DateRangePicker
This is a migrated thread and some comments may be shown as answers.
Vladimir
Top achievements
Rank 1
Vladimir asked on 30 Jan 2019, 08:53 AM

Hi, i'm include localization files to my project:

<script src="js/kendo.culture.ru-RU.min.js"></script>
<script src="js/kendo.messages.ru-RU.min.js"></script>

It's works fine, but DataRangePicker label still English ("Start", "End"), how i can localize it?

 

7 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 01 Feb 2019, 07:39 AM
Hello, Vladimir,

The Kendo UI DateRangePicker is a brand new widget and this is the reason why the messages are missing. The localization messages for the widgets are all a community contribution. 

You may update the kendo.messages.ru-RU.js file in the project and the correct messages will appear. However, if you may confirm that the below labels are correct (Russian is your native language), I can add them to the source and they will be available out of the box for everyone:

if (kendo.ui.DateRangePicker) {
kendo.ui.DateRangePicker.prototype.options.messages =
$.extend(true, kendo.ui.DateRangePicker.prototype.options.messages,{
  "startLabel": "Начало",
  "endLabel": "Конец"
});
}

Kind Regards,
Alex Hajigeorgieva
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
Vladimir
Top achievements
Rank 1
answered on 01 Feb 2019, 12:56 PM
Thanks, one more question. DataRangePicker support validation? (default "required" or "custom")
0
Vladimir
Top achievements
Rank 1
answered on 01 Feb 2019, 01:09 PM
because user can set end date less than start date if use manual input
0
Vladimir
Top achievements
Rank 1
answered on 01 Feb 2019, 01:12 PM
And yes, labels are correct :)
0
Alex Hajigeorgieva
Telerik team
answered on 05 Feb 2019, 08:20 AM
Hello, Vladimir,

I am pleased to let you know that I have added the Russian messages to the source, so they will be available as part of the next release, LIB or SP (whichever comes first).

For the validation, it is possible to add a min and max settings and when the input is blurred, it will set the closest date to either min or max if the user tried to enter an invalid date:

https://docs.telerik.com/kendo-ui/api/javascript/ui/daterangepicker/configuration/max
https://docs.telerik.com/kendo-ui/api/javascript/ui/daterangepicker/configuration/min

As for required validation, currently, it is a little complex because the inputs have no name but not impossible. Here is a Dojo, I created for you:

https://dojo.telerik.com/@bubblemaster/ovOvacOB/2

Key steps:

- add names to the inputs of the Kendo UI DateRangePicker and validation message attributes
- add the validateOnBlur: false setting to the Kendo UI Validator because the ranges are not yet updated on blur and neither is the input
- add a change event handler to the DateRangePicket and call the validator validate() method

Finally, if you think that it would be useful to be able to set the name of the inputs, I could open a Feature request on your behalf. Let me know what you think.

Kind Regards,
Alex Hajigeorgieva
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
Vladimir
Top achievements
Rank 1
answered on 16 Feb 2019, 02:50 PM

Thanks Alex!

Your example works fine if I select a date in the calendar, but I can still enter the end date on the keyboard less than the start date and send this form :)

In general, the problem has already gone a little further, if I understand correctly, then the daterangepicker cannot be used in the grid at the moment?

I found part of the solution at stackoverflow:  http://dojo.telerik.com/IqeNA

But I still don’t understand how I can control keyboard input, nothing prevents me from entering an end date less than the start date from the keyboard. (I also don’t quite understand where I need to write the value and in which event it is more correct to do it, if I do this check in the grid save event, I come across the fact that after I switch to another cell, the value of the previous one becomes undefined). Honestly, I'm confused about the grid model with old values, current values, and in addition to these values in the input.

https://dojo.telerik.com/OyOhOTIk

Summarizing, from your example and the Stackoverflow example, I can add a check to select values from the calendar, but how can I make a similar check for those values that can be entered directly into the input in cell from the keyboard?
I hope I was able to describe the problem, thanks for the answers, my knowledge of Kendo and JS is unfortunately very weak at the moment :)
0
Viktor Tachev
Telerik team
answered on 19 Feb 2019, 02:24 PM
Hello Vladimir,

In addition to the current logic you could handle the change event for the DatePicker and check if the entered date is valid. If the users enter invalid date via the Keyboard the value of the picker will be null. The code would look similar to this:

change: function(e) {
  if (this.value() === null) {
    alert("invalid value");
     
  }
}


There is also an alternative approach you can use if you would like to prevent the users from changing the value manually. Handle the keydown event for the input element of the DatePicker. In the event handler call e.preventDefault() to cancel the event. 


Regards,
Viktor Tachev
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
DateRangePicker
Asked by
Vladimir
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Vladimir
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or