If I set the max property to "new Date()" the time picker does not allow me to pick a time later than now yesterday.
If "new Date()" is 27-June-2018 17:48 I can't select 26-June-2018 18:00
Is there a work-a-round? Or can I somehow have the max only affect the datepicker and not the timepicker?
$("#date-of-control").kendoDateTimePicker({
value: new Date(),
dateInput: true,
format: "dd-MMM-yyyy HH:mm",
timeFormat: "HH:mm",
weekNumber: true,
interval: 30,
max: new Date()
});
Hi support,
on a page (asp.net mvc 461) where first load is critical (and where I just need the kendo datetimepicker) I'm trying to "just include the required kendo.xxx.min.js files" (instead of just including kendo.all.min.js) (using the Audit tab in Chrome I'm told that the change reduces the load time from 11 sec to less than 3 sec).
From this page https://docs.telerik.com/kendo-ui/intro/supporting/scripts-editors I setup my bundle like this:
bundles.Add(
new ScriptBundle("~/bundles/minimalJs")
.Include("~/Scripts/jquery-3.3.1.min.js")
.Include("~/Scripts/bootstrap.min.js")
.Include("~/Scripts/kendo/kendo.core.min.js")
.Include("~/Scripts/kendo/kendo.data.min.js")
.Include("~/Scripts/kendo/kendo.binder.min.js")
// req for datetimepicker (see https://docs.telerik.com/kendo-ui/intro/supporting/scripts-editors)
.Include("~/Scripts/kendo/kendo.userevents.min.js")
.Include("~/Scripts/kendo/kendo.selectable.min.js")
.Include("~/Scripts/kendo/kendo.calendar.min.js")
.Include("~/Scripts/kendo/kendo.popup.min.js")
.Include("~/Scripts/kendo/kendo.datepicker.min.js")
.Include("~/Scripts/kendo/kendo.timepicker.min.js")
.Include("~/Scripts/kendo/kendo.datetimepicker.min.js")
.Include("~/Scripts/moment.min.js") // todo consider moving to view
.Include("~/Scripts/fingerprint2.min.js") // todo consider moving to view
.Include("~/Scripts/minimal.js")
);
In my view I do this:
<input id="datetimepicker" />
$("#datetimepicker").kendoDateTimePicker({
value: new Date()
});
The input element does not, however, render into a kendoui datetimepicker (see screenshot date-time-picker-1.png)
NB if I use the example from https://demos.telerik.com/kendo-ui/datetimepicker/index and initialize using the option dateInput: true I'm getting the following error:Uncaught TypeError: k.DateInput is not a constructor
I have also prepared an example the illustrate my issue: https://dojo.telerik.com/UXEbUMiY/3
What files must I include as a minimum to be able to use the kendo ui datetimepicker?
Thanks in advance.
Best regards
Morten
The KendoUI grid code in my application is like this:
<
kendo-grid
id
=
"myGrid"
options
=
"mainGridOptions"
><
br
> <
kendoGridToolbarTemplate
><
br
> <
button
kendoGridExcelCommand>Export to Excel</
button
><
br
> <
kendo-grid-excel
fileName
=
"GridData.xlsx"
><
br
> </
kendo-grid-excel
><
br
> </
kendoGridToolbarTemplate
><
br
> <
div
k-detail-template><
br
> <
br
> <
kendo-tabstrip
> Some DIVs and fields here </
kendo-tabstrip
><
br
> </
div
><
br
> <
kendo-grid-excel
fileName
=
"Products.xlsx"
></
kendo-grid-excel
><
br
> </
kendo-grid
>
The data source to this grid is attached on run-time. I am trying to make the Export to Excel button workable but it is not working. What am I doing wrong?
01.
<
div
id
=
"example"
class
=
"k-content"
>
02.
<
div
id
=
"grid"
></
div
>
03.
04.
<
script
>
05.
var test = [
06.
{
07.
"ID":1,
08.
"ISIN (SML)":"test"
09.
}
10.
]
11.
12.
13.
$(document).ready(function() {
14.
$("#grid").kendoGrid({
15.
dataSource: {
16.
data: test
17.
}
18.
});
19.
});
20.
</
script
>
21.
</
div
>
I would like to position both the scroll buttons for the tabstrip to the right (see screenshot) and let them always be visible. Any thoughts on whether this is possible and how to get that working?
Thanks,
Ron
Hello
After going through the Web Font Icons documentation I wanted to add an icon with no text to a mobile button:
CSS:
.km-search:after, .km-search:before {
content
:
"\e0e9"
;
font-size
:
32px
;
}
(considering proportions of 16 -> 32 -> 64, etc. as mentioned in documentation)
HTML:
<div id=
"searchmapheader"
data-role=
"header"
>
<a id=
"foo"
data-role=
"button"
data-icon=
"search"
></a>
</div>
The icon looks like the attachment (see screenshot1.png) : The icon is out of the defined button
On setting a width like 80px for the <a> tag looks like screenshot2.png : The icon is not centered at all
So I tried to center any text inside the <a> tag: text-align: center; -> will be ignored, so it looks still like screenshot2.png
Now I wonder how I can center the k-icon inside the mobile button?
Regards