How to fix direction - Githubissues

Describe the problem I am developing an app with HTML with RTL direction. Once I activated RTL on my template where the datetime_picker_plus widget sits -> It shows me the hours and minutes in opposite locations, meaning instead of seeing 20(HH):36(mm) I see 36(mm):20(HH).

I am using Django and I use the datetime_picker as a widget inside my ModelForm. The code: -- forms.py

from django import forms
from .models import Event
from bootstrap_datepicker_plus.widgets import DateTimePickerInput

class MyDatePickerInput(DateTimePickerInput):
    template_name = 'widgets/date-picker.html'

class EventForm(forms.ModelForm):

    def __init__(self, *args, **kwargs):
        super(EventForm, self).__init__(*args, **kwargs)
        self.fields['event_date'].localize = True
        self.fields['event_date'].widget.is_localized = True

    class Meta:
        model = Event
        fields = ['client', 'event_date']

    event_date = forms.DateTimeField(label="תאריך",
        widget=MyDatePickerInput(
            options={
                "format": "MM/DD/YYYY HH:mm",
                "sideBySide": True,
                "locale": "he",
                "stepping": 15,
            }
        ),
    )

-- date_picker.html

<div class="input-group date my-custom-class" >
    {% include "bootstrap_datepicker_plus/input.html" %}
    <div class="input-group-addon input-group-append" >
        <div class="input-group-text"><i class="glyphicon glyphicon-time"></i></div>
    </div>
</div>

--base.html where from I extend to other templates

<!DOCTYPE html>

<html lang="he" dir="rtl">
<head>
    <title>{% block title %}{% endblock %}</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
    {% load bootstrap4 %}
    {% bootstrap_javascript jquery='full' %}
    {{event_form.media}}
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>

I also attached a screenshot of the browser.

As you can see the arrows are directed opposite and the hours with the minutes are at the wrong places.

Setup Information (please complete the following information):

OS: MacOS
Browser: Chrome
Browser version: 98.0.4758.109 (Official Build) (x86_64)
Python version: 3.7.2
Django version: 3.2.11
Bootstrap version: 4
jQuery version: 3.5.1

[x] I have followed the configuration instructions and checked out the common error troubleshooting page.

monim67 / django-bootstrap-datepicker-plus

How to fix direction #74