CSS to Manipulate Telerik Date/Time Control
I'm looking for a way to make the Telerik date/time control take up less space. There seems to be no configuration in the control to not show seconds. Also, if I am displaying the control in read-only mode, I don't need the date and time pickers to be shown. And I would love to just display the date in military format and remove the AM/PM indicators as well.
Is there a way to do these things either through CSS or some other means?
Here's how much real estate it takes up on my screen; I could take half the space away if I could lop off everything after the minutes.
-
Hi Sylvia Able,
If you want the Telerik Date/Time control to display 24 time format please use the below code snippet./*
* $('#datetimepicker') is the jquery instance of the element which has kendoDateTimePicker
* initialized
* Example:
* 1. "dd/mm/yyyy HH:mm" would display the date and time in 24 hour format as 27/07/2021 22:02
* 2. "dd/mm/yyyy hh:mm" would display the date and time in 12 hour format as 27/07/2021 10:30 PM
*/
var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");
datetimepicker.setOptions({
format:"dd/mm/yyyy HH:mm"
});Telerik does not hide the picker icons when the field is disabled. Even if you use the css to hide the icons, the area where date and time is displayed would still have the same width. Hence using css to hide icons will not help you.
You can make use of the field resizer to increase or decrease the width of the field.
-
Thanks so much for your response Manoj...
I was not able to get this to work.
Where exactly do I put this script?
Also, I'm not sure of the names you use... they don't seem to match with my html. Here's html for one of my date controls....
<div id="subCtrlRow1column8-e6c3-424ea-ba99-da19" class="subCtrlPreviewCell" style="min-height: 10px;width :13%;">
<div class="subCtrlPreviewCtrlHolder occupiedControl" style="padding: 5px; display: block;" name="kendoDateTimePicker2" controlholdername="DoffReceived" controltype="KendoDateTimePicker">
<div class="control">
<label class="block label" style="font-family: Arial; font-weight: normal; text-decoration: none; font-style: normal; font-size: 12px; width: 80%;">
<span data-i18n="translation:Controls.d06ad874-3b40-4a19-b8e6-eba66f11c368.FieldLabel;[title]translation:Controls.d06ad874-3b40-4a19-b8e6-eba66f11c368.Description" title="This is the date/time when the tube was received from IP21 and stored into the Auto Sample Selector application.">Doff Received</span>
<em/>
</label>
<span class="k-widget k-datetimepicker k-header kDateTimePicker field textInput k-input" title="This is the date/time when the tube was received from IP21 and stored into the Auto Sample Selector application." data-i18n="[title]translation:Controls.d06ad874-3b40-4a19-b8e6-eba66f11c368.Description" style="width: 80%; clear: both;">
<span class="k-picker-wrap k-state-disabled">
<input type="text" class="kDateTimePicker field k-input" data-role="datetimepicker" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="true" aria-readonly="false" aria-label="Current focused date is 7/27/2021 1:20:02 AM" disabled="disabled" id="DoffReceived-307e7c24-65a5-4888-a6bc-68db5815aa7e" style="width: 100%;">
<span unselectable="on" class="k-select">
<span unselectable="on" class="k-icon k-i-calendar" role="button">select</span>
<span unselectable="on" class="k-icon k-i-clock" role="button">select</span>
</span>
</span>
</span>
<label class="lblValidationMsg"/>
<p class="formHint"/>
</div>
</div>
</div> -
Hi Sylvia Able,
You can use the below code snippet to update the time format./*
* $('[controlholdername="DoffReceived"] input') is the jquery instance of the element which has kendoDateTimePicker
* initialized
* Example:
* 1. "dd/mm/yyyy HH:mm" would display the date and time in 24 hour format as 27/07/2021 22:02
* 2. "dd/mm/yyyy hh:mm" would display the date and time in 12 hour format as 27/07/2021 10:30 PM
*/
eFormEvents.onFormLoadComplete = function ()
{
var dateTimePicker = $('[controlholdername="DoffReceived"] input').data("kendoDateTimePicker");
dateTimePicker.setOptions({
format:"dd/mm/yyyy HH:mm"
});
} -
Thank you again, Manoj.
For some reason, this is not working for me. I do not get any errors, but it continues to show the AM/PM indicator. The only reason I'm using Telerik is because there are performance problems when I use the AgilePoint date/time picker in the subform. However, we are upgrading soon, so perhaps I will just change back to AP's date/time picker with the anticipation that the performance issue has been resolved in the new version.
In the meantime, I can take your advice and adjust the width of the columns to hide the date/time picker icons....I think that will help a lot.
Thank you for your help!
请先登录再写评论。
评论
4 条评论