Skip to content

Commit

Permalink
Sync with Kendo UI Professional
Browse files Browse the repository at this point in the history
  • Loading branch information
kendo-bot committed Feb 5, 2025
1 parent 1cf4c1a commit 896b18f
Show file tree
Hide file tree
Showing 6 changed files with 126 additions and 51 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions docs-aspnet/getting-started-core/REPL/repl-getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ By using the Telerik REPL for ASP.NET Core, you can write razor code that contai

* [Adding static assets](#adding-static-assets)
* [Customizing the visual theme](#customizing-the-theme)
* [Adding snippets](#adding-snippets)
* [Rendering HTML](#rendering-html)
* [Using Razor code blocks](#using-razor-code-blocks)
* [Using Razor local methods](#using-razor-local-methods)
Expand All @@ -34,6 +35,14 @@ To change the theme for the {{site.product}} components, select a new theme from

![{{ site.product_short }} REPL Theme Manager](../../getting-started-core/REPL/images/repl-theme-manager.png)

## Adding Snippets

The Telerik REPL for ASP.NET Core provides a list of predefined code snippets for fast UI component reference and configuration.

The basic snippets are listed in the Snippets section of the REPL Sidebar. You can browse to find the desired snippet and use both the `HtmlHelper` or `TagHelper` flavour of the snippet.

![{{ site.product_short }} REPL Snippets](../../getting-started-core/REPL/images/repl-built-in-snippets.png)

## Rendering HTML

By using the Telerik REPL for ASP.NET Core, you can render plain HTML:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ To open an existing {{site.product}} demo in the Telerik REPL:
1. Navigate to the [{{site.product}} Demos website](https://demos.telerik.com/aspnet-core/).
1. Select the desired demo, and then click **Edit in Telerik REPL**.

![{{ site.product_short }} Running a demo in REPL](../../getting-started-core/repl/images/repl-run-demo.png)
![{{ site.product_short }} Running a demo in REPL](../../getting-started-core/REPL/images/repl-run-demo.png)

## Using Predefined Models

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
---
title: Dynamically Setting Min Date and Time for Kendo UI DateTimePicker
description: Learn how to dynamically set the minimum date and time for a Kendo UI DateTimePicker based on another DateTimePicker's selection.
type: how-to
page_title: How to Set Min Date and Time Based on Another DateTimePicker's Selection in Kendo UI
slug: dynamically-set-min-date-time-kendo-datetimepicker
tags: kendo-ui, datetimepicker, min-date, setoptions, javascript
res_type: kb
ticketid: 1674797
---

## Description

When using two [Kendo UI for jQuery DateTimePicker](https://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker) components for start and end date selections, it's necessary to update the minimum selectable date and time of the end date picker based on the selection in the start date picker. This ensures that the end date cannot precede the start date.

This knowledge base article also answers the following questions:
- How to dynamically change the minimum date of a DateTimePicker based on another DateTimePicker's value?
- How to use the setOptions method to update DateTimePicker settings?
- How to synchronize two DateTimePicker controls to ensure logical date and time selection?

## Solution

To dynamically set the minimum date and time for the end date DateTimePicker based on the start date DateTimePicker's selection, use the `change` event of the start date DateTimePicker. Within this event, retrieve the selected date and time, and then use the `setOptions` method to update the minimum date (`min`) and start time (`startTime`) of the end date DateTimePicker.

Here's an example of how to implement this:

```javascript
// Assuming shiftStart and shiftEnd are your DateTimePicker instances
shiftStart.kendoDateTimePicker({
timeFormat: "HH:mm",
format: "dd MMM yyyy HH:mm",
min: new Date(vYear, vMonth - 1, vDay, vHour, vMin),
interval: 15,
change: function() {
var startDT = this.value();
var year = startDT.getFullYear();
var month = startDT.getMonth();
var day = startDT.getDate();
var vHour = startDT.getHours();
var vMin = startDT.getMinutes();
shiftEnd.data("kendoDateTimePicker").setOptions({
min: new Date(year, month, day, vHour, vMin),
startTime: new Date(year, month, day, vHour, vMin)
});
}
});

shiftEnd.kendoDateTimePicker({
timeFormat: "HH:mm",
format: "dd MMM yyyy HH:mm",
min: new Date(vYear, vMonth - 1, vDay, vHour, vMin),
interval: 15
});
```

This code snippet demonstrates how to configure the `shiftStart` DateTimePicker to update the `shiftEnd` DateTimePicker's `min` and `startTime` options upon a change.

## See Also

- [Kendo UI DateTimePicker Documentation](https://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker)
- [Kendo UI DateTimePicker setOptions Method](https://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker/methods/setoptions)
- [Example of Synchronizing Two DateTimePickers](https://dojo.telerik.com/dXCVgCOv)
90 changes: 47 additions & 43 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 7 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@
"version": "1.0.0",
"devDependencies": {
"@progress/kendo-svg-icons": "4.0.0",
"@progress/kendo-theme-bootstrap": "10.1.0",
"@progress/kendo-theme-classic": "10.1.0",
"@progress/kendo-theme-core": "10.1.0",
"@progress/kendo-theme-default": "10.1.0",
"@progress/kendo-theme-fluent": "10.1.0",
"@progress/kendo-theme-material": "10.1.0",
"@progress/kendo-theme-utils": "10.1.0",
"@progress/kendo-theme-bootstrap": "10.2.0",
"@progress/kendo-theme-classic": "10.2.0",
"@progress/kendo-theme-core": "10.2.0",
"@progress/kendo-theme-default": "10.2.0",
"@progress/kendo-theme-fluent": "10.2.0",
"@progress/kendo-theme-material": "10.2.0",
"@progress/kendo-theme-utils": "10.2.0",
"@progress/wct-a11y-spec": "^2.0.9",
"@rollup/plugin-node-resolve": "^13.3.0",
"@rollup/plugin-virtual": "^2.1.0",
Expand Down

0 comments on commit 896b18f

Please sign in to comment.