CSS to Manipulate Telerik Date/Time Control

Comments

4 comments

  • Avatar
    Manoj Kumar Nagaraj

    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.

    0
    Comment actions Permalink
  • Avatar
    Sylvia Able

    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>

    0
    Comment actions Permalink
  • Avatar
    Manoj Kumar Nagaraj

    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"
    });
    }
    0
    Comment actions Permalink
  • Avatar
    Sylvia Able

    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!

    0
    Comment actions Permalink

Please sign in to leave a comment.