Check the validation rules

Oct 13, 2025 by thesweetdesigns.com 69 views

Introduction

The TimeDurationPicker is a powerful widget in Kendo UI that allows users to input time durations in a user-friendly manner. However, when configuring the columns format as ##, a bug arises where the user input is not displayed correctly. In this article, we will delve into the issue, provide a reproduction of the problem, and discuss the expected behavior.

Bug Report

Problem Description

When the TimeDurationPicker columns format is configured as ##, the user input is not displayed correctly. This issue occurs when the user types a value, and the result is incorrect.

Reproduction of the Problem

To reproduce the problem, follow these steps:

Open the Dojo example provided at https://dojo.telerik.com/CmVDhocz/2.
Try typing 11:11:11 in the input field.

Current Behavior

As you type 11:11:11 in the input field, the value is not displayed correctly. The incorrect value is displayed in the input field.

Expected Behavior

The expected behavior is that the value of the input field should be 11:11:11. The user input should be displayed correctly without any formatting issues.

Environment

Kendo UI version: 2025.1.227
Browser: All browsers

Analysis of the Issue

The issue arises due to the way the TimeDurationPicker handles the columns format. When the format is configured as ##, the widget expects the input to be in the format of HH:mm:ss. However, when the user types a value, the widget does not correctly parse the input, resulting in an incorrect display.

Solution

To resolve this issue, you can configure the columns format as HH:mm:ss instead of ##. This will ensure that the user input is displayed correctly.

Example Code

Here is an example of how to configure the columns format as HH:mm:ss:

var timeDurationPicker = $("#timeDurationPicker").kendoTimeDurationPicker({
    columns: [
        {
            format: "HH:mm:ss"
        }
    ]
}).data("kendoTimeDurationPicker");

By configuring the columns format as HH:mm:ss, you can ensure that the user input is displayed correctly without any formatting issues.

Conclusion

In conclusion, the TimeDurationPicker columns format configured as ## breaks the user input. This issue arises due to the way the widget handles the columns format. To resolve this issue, you can configure the columns format as HH:mm:ss instead of ##. By following the solution provided in this article, you can ensure that the user input is displayed correctly without any formatting issues.

Additional Tips

Always configure the columns format as HH:mm:ss to ensure correct display of user input.
Use the example code provided in this article to configure the columns format correctly.
If you encounter any issues with the TimeDurationPicker, refer to the Kendo UI documentation for troubleshooting and support.

FAQs

Q: What is the correct columns format for the TimeDurationPicker? A: The correct columns format is HH:mm:ss.
Q: Why is the user input not displayed correctly when the columns format is configured as ##? A: The issue arises due to the way the TimeDurationPicker handles the columns format.
TimeDurationPicker FAQs ==========================

Introduction

The TimeDurationPicker is a powerful widget in Kendo UI that allows users to input time durations in a user-friendly manner. However, with its flexibility and customization options, it can be challenging to troubleshoot and resolve issues. In this article, we will provide a comprehensive list of frequently asked questions (FAQs) related to the TimeDurationPicker.

Q&A

Q: What is the TimeDurationPicker?

A: The TimeDurationPicker is a widget in Kendo UI that allows users to input time durations in a user-friendly manner. It provides a flexible and customizable way to input time values, including hours, minutes, and seconds.

Q: What are the key features of the TimeDurationPicker?

A: The TimeDurationPicker has several key features, including:

Flexible input format: The TimeDurationPicker allows users to input time values in various formats, including HH:mm:ss, HH:mm, and mm:ss.
Customizable columns: The TimeDurationPicker allows users to customize the columns format, including the number of columns, column width, and column alignment.
Validation: The TimeDurationPicker provides built-in validation to ensure that the input value is valid and within the specified range.
Localization: The TimeDurationPicker supports localization, allowing users to input time values in different languages and cultures.

Q: How do I configure the TimeDurationPicker?

A: To configure the TimeDurationPicker, you can use the following options:

columns: Specify the columns format, including the number of columns, column width, and column alignment.
format: Specify the input format, including HH:mm:ss, HH:mm, and mm:ss.
min: Specify the minimum allowed value.
max: Specify the maximum allowed value.
step: Specify the step value.

Q: How do I handle invalid input values?

A: To handle invalid input values, you can use the validation option to specify the validation rules. You can also use the change event to handle invalid input values.

Q: How do I localize the TimeDurationPicker?

A: To localize the TimeDurationPicker, you can use the culture option to specify the culture and language. You can also use the format option to specify the input format.

Q: How do I customize the TimeDurationPicker?

A: To customize the TimeDurationPicker, you can use the following options:

columns: Specify the columns format, including the number of columns, column width, and column alignment.
format: Specify the input format, including HH:mm:ss, HH:mm, and mm:ss.
min: Specify the minimum allowed value.
max: Specify the maximum allowed value.
step: Specify the step value.
validation: Specify the validation rules.
change: Handle the change event.

Q: How do I troubleshoot issues with the TimeDurationPicker?

A: To troubleshoot issues with the TimeDurationPicker, you can use the following steps:

Check the configuration: Verify that the configuration is correct and complete.
Check the input format: Verify that the input format is correct and matches the specified format.
Check the validation rules: Verify that the validation rules are correct and complete.
Check the localization: Verify that the localization is correct and complete.

Conclusion

In conclusion, the TimeDurationPicker is a powerful widget in Kendo UI that allows users to input time durations in a user-friendly manner. However, with its flexibility and customization options, it can be challenging to troubleshoot and resolve issues. By following the FAQs provided in this article, you can ensure that you are using the TimeDurationPicker correctly and efficiently.

Additional Tips

Always configure the TimeDurationPicker correctly and completely.
Use the correct input format and validation rules.
Use the correct localization and culture.
Use the change event to handle invalid input values.
Use the validation option to specify the validation rules.