flask admin datepicker localization

Question

1. Problem

This is the datepicker in my flask admin form, all the month and week names are in English, but I want customize the names also the start week number. like this question: How do I localize the jQuery UI Datepicker?. I searched a lot, but all I got is about how to customize date format in flask.

2. My code

class Receipt(db.Model):
    delivery_time = db.Column(db.Date,index=True)

It's a date column can view and edit in admin form.

Is there any way to config the month、week names ? And how to make the start week number to Monday not Saturday, thanks a lot.

I find the configuration http://www.daterangepicker.com/#config of daterangepicker, but how to configure it in flask ? — huangli, May 02 '16 at 09:20

score 1 · Answer 1 · answered May 06 '16 at 10:30

1

You could change locale globally in your templates, by adding:

<script>moment.locale(#YOURLOCALESTRING);</script>

This would guarantee that any other script loaded after this one that uses moment would use the global locale setting. You can find more details about setting locale here.

answered May 06 '16 at 10:30

lesingerouge

1,160
7
14

In order to achieve this, you'll have to include the corresponding moment locale file(s) (see https://github.com/moment/moment/issues/1875) and override the flask-admin `master.html` template to include them and then enable the desired locale using `` (see https://stackoverflow.com/questions/50198659/how-to-override-flask-admin-style-for-all-templates). – Caumons Jun 01 '20 at 10:02

score 1 · Answer 2 · answered Apr 26 '19 at 16:25

That code is not a good solution, but it can be helpful:

 {% block tail_js %}
  {{ super() }}
  <script>
    $(document).ready(function () {
      var el = $('#your_element_id'); // change this selector
      el.daterangepicker({
        timePicker: true,
        showDropdowns: true,
        timePickerIncrement: 1,
        timePicker12Hour: false,
        separator: ' to ',
        format: el.attr('data-date-format'),
        locale: {
            format: "MM/DD/YYYY",
            separator: " - ",
            applyLabel: "Выбрать",
            cancelLabel: "Закрыть",
            fromLabel: "От",
            toLabel: "До",
            customRangeLabel: "Custom",
            weekLabel: "W",
            daysOfWeek: ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
            monthNames: [ "Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Октябрь", "Сентябрь", "Ноябрь", "Декабрь"],
            firstDay: 1
        },
      });
    });
  </script>
{% endblock %}

P.S. Need to add this code into your master.html

score 0 · Accepted Answer · answered May 03 '16 at 08:17

I find a quick way to fix this issue, but I know there are better ways to do this. just modify the code in path:lib/python2.7/site-packages/flask_admin/static/vendor/daterangepicker.js to below:

 this.locale = {
            applyLabel: 'Apply',
            cancelLabel: 'Cancel',
            fromLabel: 'From',
            toLabel: 'To',
            weekLabel: 'W',
            customRangeLabel: 'Custom Range',
            // daysOfWeek: moment.weekdaysMin(),
            daysOfWeek: ["日","一","二","三","四","五","六"],
            // monthNames: moment.monthsShort(),
            monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月",],
            // firstDay: moment.localeData()._week.dow
            firstDay: 1
        };

I am not an expert about js, but I guess we could change the locale in monment.js, but I couldn't find it right now. — huangli, May 03 '16 at 08:18

flask admin datepicker localization

3 Answers3