This is a migrated thread and some comments may be shown as answers.

Use 24-hour format on focus

2 Answers 158 Views
DateTimePicker
This is a migrated thread and some comments may be shown as answers.
Steve LaForge
Top achievements
Rank 1
Steve LaForge asked on 10 Jul 2015, 01:29 PM

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 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 15 Jul 2015, 07:33 AM
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
0
Steve LaForge
Top achievements
Rank 1
answered on 15 Jul 2015, 11:26 AM
Perfect!  Thank you!
Tags
DateTimePicker
Asked by
Steve LaForge
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Steve LaForge
Top achievements
Rank 1
Share this question
or