Topic: Does 24 hour format not work for an inline DateTimepicker?

robin.van.straeten@itecequipment.com priority asked 3 months ago


Expected behavior

I was trying to create an inline DateTimepicker with a 24-hour format.

Actual behavior

After enabling both 24-hour format and inline with JavaScript the inline setting is applied, but it is using 12-hour format.

Resources (screenshots, code snippets etc.)

HTML:

<div class="d-flex align-items-center justify-content-center min-vh-100">
    <div class="col-md-6">
        <div class="form-outline" id="datetimepicker-timeOptions" data-mdb-input-init>
            <input type="text" class="form-control" value="22/12/2020, 14:12:56" id="datetimepickerExample" />
            <label for="datetimepickerExample" class="form-label">Select Date and Time</label>
        </div>
    </div>
</div>

JS:

const pickerTimeOptions = document.querySelector('#datetimepicker-timeOptions');
new mdb.Datetimepicker(pickerTimeOptions, {
   timepicker: { format24: true },
   inline: true
});

snippet

Question

Is 24-hour format an existing feature for inline DateTimepickers?


Grzegorz Bujański staff answered 3 months ago


We are sorry for this, we will fix this as soon as possible. For now, use this solution:

const picker = new mdb.Datetimepicker(pickerTimeOptions, {
    inline: true
});

picker._timepicker.update({ format24: true, format12: false })


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.1.0
  • Device: Laptop
  • Browser: Firefox 121.0
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes