ASPxClientTimeEdit Class

A client-side equivalent of the ASPxTimeEdit control.

Declaration

declare class ASPxClientTimeEdit extends ASPxClientSpinEditBase

Remarks

The ASPxClientTimeEdit object serves as a client-side equivalent of the ASPxTimeEdit control.

ASPxClientTimeEdit

Use the ClientInstanceName property to programmatically access the client object rendered for the ASPxTimeEdit control in client-side script.

<label>Start Time:</label>
<dx:ASPxTimeEdit ID="timeEditStartTime" ClientInstanceName="timeEditStartTime"
    runat="server" Width="120px" EnableClientSideAPI="true" DateTime="10:08 AM">
    <ClientSideEvents ValueChanged="OnStartTimeValueChanged" ButtonClick="OnStartTimeButtonClick" />
</dx:ASPxTimeEdit>

<label>Hours:</label>
<dx:ASPxSpinEdit ID="spinEditHours" ClientInstanceName="spinEditHours" MinValue="0" MaxValue="24" Number="0" 
    EnableClientSideAPI="true" runat="server">
    <ClientSideEvents ValueChanged="OnHoursChanged" />
</dx:ASPxSpinEdit>

<label>End Time:</label>
<dx:ASPxTimeEdit ID="timeEditEndTime" ClientInstanceName="timeEditEndTime"
    EditFormatString="hh:mm tt" DisplayFormatString="hh:mm tt" EditFormat="Time" EnableClientSideAPI="true" 
    runat="server" Width="120px">
</dx:ASPxTimeEdit>

function OnStartTimeValueChanged(s, e) {
    var date = timeEditStartTime.GetDate();
    var hours = date.getHours();
    var newHours = spinEditHours.GetValue();
    date.setHours(hours + newHours);
    timeEditEndTime.SetDate(date);
}
function OnStartTimeButtonClick(s, e) {
    setTimeout(function () {
        ASPx.ELostFocus('timeEditStartTime')
    }, 100);
}
function OnHoursChanged(s, e) {
    var date = timeEditStartTime.GetDate();
    var hours = date.getHours();
    var newHours = s.GetValue();
    date.setHours(hours + newHours);