Monday as first day of week in the datepicker provided by the Administrate Rails engine

Question

I am learning to use Thoughtbot’s Administrate engine as an admin dashboard generator.

In order to customize the date/time picker that the library uses within forms by default, I generated the corresponding partial, which contained this line:

<%= f.text_field field.attribute, data: { type: 'datetime'}  %>

By editing this, I have been able to tweak the date format:

<%= f.text_field field.attribute, data: { type: 'datetime', 'date-format': "DD-MM-YYYY  HH:mm" }  %>

However, I seem unable to find any documentation on how to change other settings, such as the locale, including the first day of week.

Answer 1

I was looking at the source code and it seems that it doesn't support to change the first day of week, here are the options that it supports

fe.fn.datetimepicker.defaults = {
    format: !1,
    dayViewHeaderFormat: "MMMM YYYY",
    extraFormats: !1,
    stepping: 1,
    minDate: !1,
    maxDate: !1,
    useCurrent: !0,
    collapse: !0,
    locale: pe.locale(),
    defaultDate: !1,
    disabledDates: !1,
    enabledDates: !1,
    icons: {
        time: "glyphicon glyphicon-time",
        date: "glyphicon glyphicon-calendar",
        up: "glyphicon glyphicon-chevron-up",
        down: "glyphicon glyphicon-chevron-down",
        previous: "glyphicon glyphicon-chevron-left",
        next: "glyphicon glyphicon-chevron-right",
        today: "glyphicon glyphicon-screenshot",
        clear: "glyphicon glyphicon-trash",
        close: "glyphicon glyphicon-remove"
    },
    tooltips: {
        today: "Go to today",
        clear: "Clear selection",
        close: "Close the picker",
        selectMonth: "Select Month",
        prevMonth: "Previous Month",
        nextMonth: "Next Month",
        selectYear: "Select Year",
        prevYear: "Previous Year",
        nextYear: "Next Year",
        selectDecade: "Select Decade",
        prevDecade: "Previous Decade",
        nextDecade: "Next Decade",
        prevCentury: "Previous Century",
        nextCentury: "Next Century"
    },
    useStrict: !1,
    sideBySide: !1,
    daysOfWeekDisabled: !1,
    calendarWeeks: !1,
    viewMode: "days",
    toolbarPlacement: "default",
    showTodayButton: !1,
    showClear: !1,
    showClose: !1,
    widgetPositioning: {
        horizontal: "auto",
        vertical: "auto"
    },
    widgetParent: null,
    ignoreReadonly: !1,
    keepOpen: !1,
    focusOnShow: !0,
    inline: !1,
    keepInvalid: !1,
    datepickerInput: ".datepickerinput",
    keyBinds: {
        up: function(e) {
            if (e) {
                var t = this.date() || pe();
                e.find(".datepicker").is(":visible") ? this.date(t.clone().subtract(7, "d")) : this.date(t.clone().add(this.stepping(), "m"))
            }
        },
        down: function(e) {
            if (e) {
                var t = this.date() || pe();
                e.find(".datepicker").is(":visible") ? this.date(t.clone().add(7, "d")) : this.date(t.clone().subtract(this.stepping(), "m"))
            } else
                this.show()
        },
        "control up": function(e) {
            if (e) {
                var t = this.date() || pe();
                e.find(".datepicker").is(":visible") ? this.date(t.clone().subtract(1, "y")) : this.date(t.clone().add(1, "h"))
            }
        },
        "control down": function(e) {
            if (e) {
                var t = this.date() || pe();
                e.find(".datepicker").is(":visible") ? this.date(t.clone().add(1, "y")) : this.date(t.clone().subtract(1, "h"))
            }
        },
        left: function(e) {
            if (e) {
                var t = this.date() || pe();
                e.find(".datepicker").is(":visible") && this.date(t.clone().subtract(1, "d"))
            }
        },
        right: function(e) {
            if (e) {
                var t = this.date() || pe();
                e.find(".datepicker").is(":visible") && this.date(t.clone().add(1, "d"))
            }
        },
        pageUp: function(e) {
            if (e) {
                var t = this.date() || pe();
                e.find(".datepicker").is(":visible") && this.date(t.clone().subtract(1, "M"))
            }
        },
        pageDown: function(e) {
            if (e) {
                var t = this.date() || pe();
                e.find(".datepicker").is(":visible") && this.date(t.clone().add(1, "M"))
            }
        },
        enter: function() {
            this.hide()
        },
        escape: function() {
            this.hide()
        },
        "control space": function(e) {
            e.find(".timepicker").is(":visible") && e.find('.btn[data-action="togglePeriod"]').click()
        },
        t: function() {
            this.date(pe())
        },
        "delete": function() {
            this.clear()
        }
    },
    debug: !1,
    allowInputToggle: !1,
    disabledTimeIntervals: !1,
    disabledHours: !1,
    enabledHours: !1,
    viewDate: !1
}

and for locales it seems to accept them, and you can use one of those from here