InputDateTime Control - 24-Hour Format (No AM/PM) Support in Angular

InputDateTime Control - 24-Hour Format (No AM/PM) Support in Angular

Posted by: nilesh_nichal on 4 November 2025, 8:47 am EST

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 4 November 2025, 8:47 am EST

  Hello Wijmo Team,
  
  I’m currently using the wj-input-date-time control in an Angular application. I noticed that even when I set the format property to use a 24-hour format (e.g., “yyyy-MM-dd HH:mm:ss”), the time picker dropdown still displays time in 12-hour format with AM/PM toggles.
  
  Use Case:
  
  I want to provide users with a consistent 24-hour time selection experience, both in the input display and in the dropdown time selector (i.e., without AM/PM).

  Please find the link from where I have referred - https://developer.mescius.com/wijmo/demos/Input/InputDateTime/Overview/angular

  <wj-input-date-time
    [value]="date"
    format="yyyy-MM-dd HH:mm"
    [isReadOnly]="false"
    [showDropDownButton]="true"
    placeholder="Select date and time">
  </wj-input-date-time>

  Is there a way to configure the time picker dropdown to use 24-hour format (e.g., 13:00, 14:30, etc.) instead of 12-hour with AM/PM?
  
  Please resolve the issue, a sample stackblitz in angular fill be very helpful.

  Thank you.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 6 November 2025, 1:55 am EST

  Hi Nilesh,
  
  You’ll have to set the ‘format’ property of the inputTime control as well, which is attached to the InputDateTime control, to get the expected results. You can handle the ‘initialized’ event of the InputDateTime for this purpose. Please refer to the following code snippet -
  
  initInputDateTime(inputDateTime: wjInput.InputDateTime) {
  
  inputDateTime.inputTime.format = ‘HH:mm’;
  
  }
  
  You can also refer to the following sample demonstrating the same - https://stackblitz.com/edit/angular-upha91zu?file=src%2Fapp%2Fapp.component.ts
  
  However, it seems like an odd behavior, so we have asked the engineering team if this behavior is expected or not. We will update you when we have an update on the same. For now, you can use the above approach we suggested. In case, you face any issues, please let us know.
  
  Regards

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 6 November 2025, 2:26 am EST

  Hi Nilesh,
  
  It seems we missed this property earlier; however, the ‘timeFormat’ property of the InputDateTime controls the time format of the dropdown list. You can use this property to set the time format as per your needs. Here’s an updated sample demonstrating the same - https://stackblitz.com/edit/angular-5xfwmpde?file=src%2Fapp%2Fapp.component.html
  
  You can refer to the following API link for the same, if needed - https://developer.mescius.com/wijmo/api/classes/wijmo_input.inputdatetime.html#timeformat
  
  Regards