Grappelli 管理界面中日期选择器的一周开始答案

【问题标题】：Start of week in datepicker in Grappelli admin interfaceGrappelli 管理界面中日期选择器的一周开始
【发布时间】：2016-09-04 05:04:39
【问题描述】：

Grappelli 默认 datepicker 将星期日作为一周的第一天。这真的很烦人！对于我现在和未来的所有模特，我希望星期一成为一周的第一天。

有没有办法做到这一点？

到目前为止，我发现的唯一“solution”涉及更改模型的媒体类。但是，此解决方案似乎不适用于以下解决方案：

class Monkey(ImportExportActionModelAdmin):

    class Media:
        js = ("static/i18n/ui.datepicker-en-GB.js")

    ...

static/i18n/ui.datepicker-en-GB.js 在哪里

(function($) {
    // datepicker, timepicker init
    grappelli.initDateAndTimePicker = function() {

        var options = {
            closeText: "Done",
            prevText: "Prev",
            nextText: "Next",
            currentText: "Today",
            monthNames: [ "January","February","March","April","May","June",
            "July","August","September","October","November","December" ],
            monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun",
            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
            dayNames: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ],
            dayNamesShort: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ],
            dayNamesMin: [ "Su","Mo","Tu","We","Th","Fr","Sa" ],
            weekHeader: "Wk",
            dateFormat: "dd/mm/yy",
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: false,
            yearSuffix: ""
        };

} )(grp.jQuery);

在任何情况下，此解决方案都不是最佳解决方案，因为任何使用日期的新模型都必须定义相同的 Meta 类。

【问题讨论】：

标签： django jquery-ui-datepicker django-grappelli

【解决方案1】：

上面的代码确实有一些错误。

首先，AdminModel 应该是

class Monkey(ImportExportActionModelAdmin):

    class Media:
        js = ("i18n/ui.datepicker-en-GB.js", )

    ...

因为静态目录是自动附加的，js 变量必须是一个元组——注意逗号。

其次，我使用的 javascrpt 是 static/grappelli/js/grappelli.js 的复制和粘贴，在 options 变量中添加了选项 firstDay: 1,。它是这样写的：

(function($) {
    grappelli.initDateAndTimePicker = function() {

        // HACK: get rid of text after DateField (hardcoded in django.admin)
        $('p.datetime').each(function() {
            var text = $(this).html();
            text = text.replace(/^\w*: /, "");
            text = text.replace(/<br>[^<]*: /g, "<br>");
            $(this).html(text);
        });

        var options = {
            firstDay: 1,  // THIS IS THE ONLY CHANGE!!!
            constrainInput: false,
            showOn: 'button',
            buttonImageOnly: false,
            buttonText: '',
            dateFormat: grappelli.getFormat('date'),
            showButtonPanel: true,
            showAnim: '',
            // HACK: sets the current instance to a global var.
            // needed to actually select today if the today-button is clicked.
            // see onClick handler for ".ui-datepicker-current"
            beforeShow: function(year, month, inst) {
                grappelli.datepicker_instance = this;
            }
        };
        var dateFields = $("input[class*='vDateField']:not([id*='__prefix__'])");
        dateFields.datepicker(options);

        if (typeof IS_POPUP != "undefined" && IS_POPUP) {
            dateFields.datepicker('disable');
        }

        // HACK: adds an event listener to the today button of datepicker
        // if clicked today gets selected and datepicker hides.
        // use on() because couldn't find hook after datepicker generates it's complete dom.
        $(document).on('click', '.ui-datepicker-current', function() {
            $.datepicker._selectDate(grappelli.datepicker_instance);
            grappelli.datepicker_instance = null;
        });

        // init timepicker
        $("input[class*='vTimeField']:not([id*='__prefix__'])").grp_timepicker();

    };
})(grp.jQuery);

第三，我修改了所有需要日期选择器的AdminModels。这是一个 PITA，我希望有更好的方法。可能有……

【讨论】：

【解决方案2】：

解决方案的第一部分是将另一个 JavaScript 文件添加到管理视图中，正如 @Sardathrion 已经描述的那样：

class MyModelAdmin(ModelAdmin):
    class Media:
        js = ('js/grappellihacks.js',)

第二部分是重新配置呈现的日期选择器小部件。由于它们有一个共同的类属性，你的 grappellihacks.js 中的这段代码应该足够了：

grp.jQuery(function() {
    grp.jQuery('.hasDatepicker').datepicker('option', 'firstDay', 1);
});

jQuery UI documentation 中描述了该选项。 grp 属性由grappelli.js 设置，由管理模板在您的自定义媒体文件之前加载。

【讨论】：