Use 24-hour format on focus

3 posts, 0 answers
  1. Steve LaForge
    Steve LaForge avatar
    61 posts
    Member since:
    Feb 2005

    Posted 10 Jul 2015 Link to this post

    I have the following datetimepicker:

    <telerik:RadDateTimePicker ID="dtpkRequest" Runat="server" Culture="en-US" Width="200px"
         OnSelectedDateChanged="dtpkRequest_SelectedDateChanged">
         <TimeView CellSpacing="-1" TimeFormat="HH:mm"></TimeView>
         <TimePopupButton ImageUrl="" HoverImageUrl=""></TimePopupButton>
         <Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False"
            EnableWeekends="True" FastNavigationNextText="&amp;lt;&amp;lt;"></Calendar>
         <DateInput DisplayDateFormat="MM/dd/yyyy HH:mm" DateFormat="M/d/yyyy" LabelWidth="40%">
            <EmptyMessageStyle Resize="None"></EmptyMessageStyle>
            <ReadOnlyStyle Resize="None"></ReadOnlyStyle>
            <FocusedStyle Resize="None"></FocusedStyle>
            <DisabledStyle Resize="None"></DisabledStyle>
            <InvalidStyle Resize="None"></InvalidStyle>
            <HoveredStyle Resize="None"></HoveredStyle>
            <EnabledStyle Resize="None"></EnabledStyle>
         </DateInput>
         <DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>
    </telerik:RadDateTimePicker>

    On the page load, it displays the date and time in MM/dd/yyyy HH:mm format.  However, once I set focus to the input area, it changes to MM/dd/yyyy hh:mm tt format.  As soon as the control loses focus, it converts back to MM/dd/yyyy HH:mm format, so it is only when the input area has focus that the control displays the correct format.  it does allow me to enter the time component in either 12- or  24-hour format.

    How can I get it to display the time in 24-hour format on focus?

     Thank you!

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 15 Jul 2015 Link to this post

    Hello Steve,

    In order to keep the same time format on focus you should modify the DateInput-DateFormat property.

    Check out the following code snippet for illustration. The changes are highlighted.

    <telerik:RadDateTimePicker ID="dtpkRequest" runat="server" Culture="en-US" Width="200px"
        OnSelectedDateChanged="dtpkRequest_SelectedDateChanged">
        <TimeView CellSpacing="-1" TimeFormat="HH:mm"></TimeView>
        <TimePopupButton ImageUrl="" HoverImageUrl=""></TimePopupButton>
        <Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False"
            EnableWeekends="True" FastNavigationNextText="&lt;&lt;">
        </Calendar>
        <DateInput DisplayDateFormat="MM/dd/yyyy HH:mm" DateFormat="MM/dd/yyyy HH:mm" LabelWidth="40%">
            <EmptyMessageStyle Resize="None"></EmptyMessageStyle>
            <ReadOnlyStyle Resize="None"></ReadOnlyStyle>
            <FocusedStyle Resize="None"></FocusedStyle>
            <DisabledStyle Resize="None"></DisabledStyle>
            <InvalidStyle Resize="None"></InvalidStyle>
            <HoveredStyle Resize="None"></HoveredStyle>
            <EnabledStyle Resize="None"></EnabledStyle>
        </DateInput>
        <DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>
    </telerik:RadDateTimePicker>



    Regards,
    Viktor Tachev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steve LaForge
    Steve LaForge avatar
    61 posts
    Member since:
    Feb 2005

    Posted 15 Jul 2015 in reply to Viktor Tachev Link to this post

    Perfect!  Thank you!
Back to Top