-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
126 additions
and
51 deletions.
There are no files selected for viewing
Binary file added
BIN
+10.3 KB
docs-aspnet/getting-started-core/REPL/images/repl-built-in-snippets.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
62 changes: 62 additions & 0 deletions
62
docs/knowledge-base/dynamically-set-min-date-time-kendo-datetimepicker.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters