Questions on UI for ASP.NET AJAX Forum

1 answer

908 views

Keyboard controls for DatePicker inside bootstrap modal

We currently have a telerik datepicker (and timepicker) displayed inside a bootstrap modal, and while it works (mostly) fine, I've discovered that accessibility keyboard controls (enabled via setting EnableAriaSupport and EnableKeyboardNavigation to True) do not work. The controls work fine in context of a datepicker outside of these modals.

Upon further investigation, it seems as though the telerik process is adding a new div to the dom when we open the datepicker calendar, which presumably is firing some low-level bootstrap event or process that I'm unaware of to force focus back to the modal... and in this case away from the datepicker that's appearing over it.

Does anyone know of a way to prioritize keyboard control focus to remain on the added datepicker calendar that appears instead of reverting back to the top of the modal?

Things I've tried include:

Setting the modal's data-keyboard and data-focus properties to false (which did nothing except disabling people to press escape to close the modal)
setting the date-picker's z-index arbitrarily high (despite it already rendering on top of the modal to begin with
setting some properties for bootstrap-adjacent things in the off chance that they might work (such as Vue.JS). These, predictably, did nothing.
fiddled with some raw JS events that might have impacted the process. These did not get hit upon loading the datepicker when test breakpoints were added to them
setting a hidden field on the datepicker's sub-controls with the ID "hasControlOnModal" to True. This was preexisting code from the 2009 version of the datepicker that I'm currently trying to get away from, and doesn't seem to do anything as far as I can tell.
confirming in VB code that the controls in and out of the modal are built the same way (they run through the same code)
Tried to catch the calendar opening and manually force focus in JS via the OnPopupOpening event (this doesn't work as the documentation points out this event is just BEFORE the calendar loads into the dom... I need it to be there so I can use jquery's .focus() on it.

It's worth noting that I do not have the option to swap away from the current way we build modals and use a telerik modal at this time.

The datepicker, opened with keyboard controls, as it appears outside the modal (note the black box around the calendar, denoting that the control is in-focus of the keyboard and is usable via arrow key navigation:

The modal with a datepicker attached to it. The focus is on the invisible "title" of the modal, which announces to screen readers that there's a modal open. hitting "tab" here shifts the focus to the "close" button.

Tabbing down to the datepicker works as intended, and upon hitting "enter" on the open calendar button, you're presented with this screen:

Notice that the calendar does not have the focused black box around it, as the focus has shifted back to the top of the bootstrap modal. Keyboard controls do not work. Hitting "tab" from here will once again move the focus to the modal's "close" button. There is no way for me to tab into the calendar control.

DatePicker

TimePicker

answered on 30 Aug 2023

1 answer

419 views

RadTimePicker SelectedTime.Value Nullable Object must have Value

I'm reading in values from several TimePickers that may or may not be null. SelectedTime.Value throws the mentioned error when the value is a null and using DbSelectedDate with a (TimeSpan?) cast is invalid. Currently I'm accepting it as a (DateTime?) instead and breaking it down in an extra step. Is there a more elegant solution or is this the standard practice?

TimePicker

answered on 22 Sep 2017

1 answer

78 views

Default typed in value to PM instead of AM

Currently when a user types into our radTimePicker it defaults to "AM" For instance if they type 4:00 it will automatically make this an "AM" value. We're using the timepicker in a situation where a user is picking a start time and an end time. The end time will most often be in the afternoon and to avoid accidental mistakes we'd like the default to be "PM". Is that possible?

TimePicker

answered on 11 May 2017

1 answer

161 views

Set Time Order in Popup Picker

Is there a way to set the order the times show up when you click the time icon? For example, when I set the start time to 8:00 am it shows 8am as the first option like I want but then 12:00 am to 7:00 am are not in the selection list anymore. I still need all the options I just want 8am to be the first in the list.

Thanks

TimePicker

answered on 23 Feb 2017

9 answers

395 views

MinDate / MaxDate not working properly

I have an issue with the minDate of the RadTimePicker.

Problem #1

My schedule is from 9AM to 2AM the next day.
I can show it properly in the time view picker.
However, when I set the MinDate and the MaxDate I am unable to select a schedule after midnight even thoug it's in the MinDate and MaxDate range.
Is there a workaround ?

Problem #2
The timeview picker won't show the last time if it's equal to EndTime.
The control will allow you to type it, but you don't see it in the timeview picker.
I patched it by adding 1 second to the end time. Is it a normal behavior ?

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>

<telerik:RadTimePicker ID="TimePicker1" runat="server" TimeView-Interval="30"></telerik:RadTimePicker>

</div>

</form>

</body>

</html>

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

var startTime = new TimeSpan(9, 0, 0);

var endTime = new TimeSpan(1, 2, 0, 0);

TimePicker1.TimeView.StartTime = startTime;

TimePicker1.TimeView.EndTime = endTime.Add(new TimeSpan(0, 0, 1)); // Patch. Add 1 sec. to show the end time in the time view picker

TimePicker1.MinDate = DateTime.Today.Add(startTime);

TimePicker1.MaxDate = DateTime.Today.Add(endTime);

}

TimePicker

answered on 04 Oct 2016

3 answers

169 views

RadTimePicker.SelectedTime is Nothing in RadGrid Edit Template upon Update

When using a RadTimePicker in a RadGrid (in a EditItemTemplateColumn), I'm getting Nothing for the RadTimePicker.SelectedTime object when updating.

Thanks!

Here is my RadGrid:

<telerik:RadGrid runat="server" ID="grdScheduleBook" AllowSorting="True" AllowPaging="True" PageSize="15" AutoGenerateColumns="False"

OnNeedDataSource="grdScheduleBook_NeedDataSource" RenderMode="Lightweight" HeaderStyle-Font-Size="X-Small" ItemStyle-Font-Size="X-Small" Height="800px">

<MasterTableView EditMode="InPlace">

<Columns>

<telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn column" HeaderText="Pick Time" UniqueName="PickTime" HeaderStyle-Width="100px">

<EditItemTemplate>

<telerik:RadTimePicker ID="RadTimePicker1" runat="server" Skin="Default" Width="88px">

</telerik:RadTimePicker>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="Label1" runat="server"></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridEditCommandColumn>

</telerik:GridEditCommandColumn>

<telerik:GridBoundColumn UniqueName="Group" DataField="Group" HeaderText="Group" ReadOnly="True">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Payroll" DataField="Payroll #" HeaderText="Payroll #" ReadOnly="True">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="LastName" DataField="Last Name" HeaderText="Last Name" ReadOnly="True">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="FirstName" DataField="First Name" HeaderText="First Name" ReadOnly="True">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="MI" DataField="MI" HeaderText="MI" ReadOnly="True">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SeniorDate" DataField="Senior Date" HeaderText="Senior Date" ReadOnly="True">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Sequence" DataField="Seq" HeaderText="Sequence" ReadOnly="True">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="DeptLoc" DataField="Dept #/ Location" HeaderText="Dept/Location" ReadOnly="True">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="JobCode" DataField="Job Code" HeaderText="Job Code" ReadOnly="True">

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings>

<EditColumn UniqueName="EditCommandColumn1" FilterControlAltText="Filter EditCommandColumn1 column"></EditColumn>

</EditFormSettings>

</MasterTableView>

<GroupingSettings CollapseAllTooltip="Collapse all groups"></GroupingSettings>

<ClientSettings AllowColumnsReorder="True" Resizing-AllowColumnResize="true" ReorderColumnsOnClient="True">

<Selecting AllowRowSelect="True" />

<Scrolling AllowScroll="True" UseStaticHeaders="True" />

<ClientEvents OnBatchEditOpening="OnBatchEditOpening" />

<Resizing AllowColumnResize="True"></Resizing>

</ClientSettings>

<HeaderStyle Font-Size="Small" Font-Bold="True"></HeaderStyle>

<ItemStyle Font-Size="Small"></ItemStyle>

<FilterMenu RenderMode="Lightweight"></FilterMenu>

<HeaderContextMenu RenderMode="Lightweight"></HeaderContextMenu>

</telerik:RadGrid>

RadGrid_UpdateCommand:

Protected Sub grdScheduleBook_UpdateCommand(sender As Object, e As GridCommandEventArgs) Handles grdScheduleBook.UpdateCommand

Dim dataItem As GridEditableItem = TryCast(e.Item, GridEditableItem)

Dim timePicker As RadTimePicker = CType(e.Item.FindControl("RadTimePicker1"), RadTimePicker)

Dim time As String = timePicker.SelectedTime.ToString()

Dim row As DataRowView = dataItem.DataItem

Dim sql As String

Dim payroll As String = row.Row.ItemArray(1)

Dim pickTime As String = Format(time.ToString(), "Short Time")

'...(sql command here)...

End Sub

TimePicker

answered on 06 Sep 2016

1 answer

128 views

Clear Button in TimePicker's TimeView Popup

I need a way to clear values from a TimePicker. Users are not able to manually interact with the textbox, they can only use the pop up values from the TimeView to select preset values in 15 minute increments. In the link below the first example has a "Clear button" at the bottom of the TimeView. Unfortunately I don't see a code example. How do I get a clear button like the example?

http://docs.telerik.com/devtools/aspnet-ajax/controls/calendar/raddatepicker,-radtimepicker,-raddatetimepicker-and-radmonthyearpicker/configuring-the-embedded-time-view

TimePicker

answered on 14 Jul 2015

4 answers

137 views

Disable manual input and only allow pop-up selection?

How can I disable the user from manually entering values with the keyboard? Selections should only come from the pop-up values. I tried setting the DateInput.ReadOnly to True but that disabled the popup as well.

TimePicker

answered on 26 Jun 2015