1 Answer, 1 is accepted
Hi Bruce,
Thank you for reaching out.
With the R1 of 2022, we introduced significant changes in the rendering of some components. The new rendering gives more flexibility when customizing the appearance of the components. This helps to avoid a manual override of CSS styles for a particular component. More information is available within the following documentation:
Having this in mind, a design decision that the development team has undertaken particularly for the button's positioning of the DateTimePicker was to alter their position as you have described. Thus, a possible recommendation would be to explicitly upgrade your project by following this guideline:
Alternatively, you can achieve the desired result programmatically by obtaining the rendered buttons and changing the desired button's position using the conventional .insertBefore() or .insertAfter() methods. Here is an example:
// DateTimePicker
@(Html.Kendo().DateTimePicker()
.Name("datetimepicker")
)
// JavaScript
<script>
$(document).ready(function(){
var buttons = $("#datetimepicker").data("kendoDateTimePicker").wrapper.find("button"); // Get the existing buttons for the DateTimePicker which would return an array based on the matched selectors.
$(buttons[1]).insertBefore(buttons[0]); // Shift the Date button before the Time button.
})
</script> This would produce the following result:
Here is a Telerik REPL that you can experiment with that showcases the aforementioned:
Please give the mentioned above suggestions a try and let me know how it works out for you.
Kind Regards,
Alexander
Progress Telerik
Rank 1
Thanks Alexander,
The script works fine. Do I have to have this on every page implementing the DateTimePicker or is there a more "universal" approach for applying this to my project?
I have the latest version of Telerik.UI.for.AspNet.Core (2023.2.606) and references to the scripts with that version in my _Layout.cshtml file.
Hi Bruce,
I understand that embedding the previously described logic in each pages explicitly may indeed seem a hefty process - given the utilized DateTimePickers for a variety of pages.
In this regard, a more "autonomous" approach would be to traverse through each of the DateTimePicker occurrences by using the common class which is generated for them by Kendo. For example:
$(".k-datetimepicker").each(function (index, el) {
var dateTimePicker = $(el).find("input").data("kendoDateTimePicker");
var buttons = dateTimePicker.wrapper.find("button");
$(buttons[1]).insertBefore(buttons[0]); // Shift the Date button before the Time button.
})From there you can encapsulate the mentioned above client-side implementation in a self-invoking function that will be allocated within an external JavaScript file:
common.js:
(function () {
setTimeout(function () {
$(".k-datetimepicker").each(function (index, el) {
console.log("here");
var dateTimePicker = $(el).find("input").data("kendoDateTimePicker");
var buttons = dateTimePicker.wrapper.find("button");
$(buttons[1]).insertBefore(buttons[0]); // Shift the Date button before the Time button.
})
}, 50)
}) ();And embed the script file within the "_Layout.cshtml" of the application. This will ensure that for each of the pages, the common logic will be executed regardless. For instance:
Layout.cshtml:
<body class="k-content">
...
@RenderSection("scripts", required: false)
<script src="~/js/common.js"></script>
</body>For your convenience, I am also attaching a runnable sample for you to review that tackles such an approach for you to review additionally.
Please let me know how it works out for you.