Question

我创建了一个内容部分的模块，其中包含一些字段作为日期。当我在编辑器模板中渲染这些日期字段时，我希望它们在使用管理面板创建具有日期时间字段的自定义内容类型时，与它们呈现时完全一样呈现为datepicker文本框。

是否有像这样的shapehelper或smth将它们渲染为datepickers并自动添加必要的jquery脚本，或者我是否必须手动渲染文本框并添加必要的js脚本？

我正在使用Orchard 1.8

Answer 1

您可以使用Orchard的DateTimeEditor类来使用与日期字段相同的编辑器视图，并控制各种选项（日期编辑器，时间编辑器）。这样您还可以考虑更新orchard，包括jquery UI库。

视图模型：

public class MyEditViewModel {
    public DateTimeEditor DateTimeEditor { get; set; }
}

在您的驱动程序中（使用IDateLocalizationServices）：

public class MyPartDriver : ContentPartDriver<MyPart> {

    private readonly IDateLocalizationServices _dateLocalizationServices;
    public SchedulingPartDriver(IDateLocalizationServices dateLocalizationServices) {
        _dateLocalizationServices = dateLocalizationServices;
    }

    protected override DriverResult Editor(MyPart part, dynamic shapeHelper) {
        return ContentShape("Parts_MyPart_Edit", () => {
            var viewModel = new MyEditViewModel {
                DateTimeEditor = new DateTimeEditor {
                    ShowDate = true, // if date editor should be shown
                    ShowTime = true, // if time editor should be shown
                    Date = _dateLocalizationServices.ConvertToLocalizedDateString(part.MyDate),
                    Time = _dateLocalizationServices.ConvertToLocalizedTimeString(part.MyDate)
                };
            };
        });
    }

    protected override DriverResult Editor(MyPart part, IUpdateModel updater, dynamic shapeHelper) {
        // same as above, probably put it in a separate method to build the viewmodel
        var viewModel = new MyEditViewModel {..};

        if(updater.TryUpdateModel(viewModel, Prefix, null, null) {
            part.MyDate = _dateLocalizationServices.ConvertFromLocalizedString(viewModel.DateTimeEditor.Date);
        }

        return Editor(part, shapeHelper);
    }
}

然后在你的Views / EditorTemplates / Parts / MyPart.cshtml中：

@model MyNameSpace.ViewModels.MyEditViewModel

@Html.EditorFor(m => m.DateTimeEditor) // this will render the editor for the date/time

Answer 2

如果您想要与果园提供相同的用户界面，您只需要在视图中包含以下样式和脚本：

Style.Require("jQueryCalendars_Picker");
Style.Require("jQueryUI_Calendars_Picker");
Style.Require("jQueryTimeEntry");
Style.Require("jQueryDateTimeEditor");
///////////////////////////////////

///////
Script.Require("jQueryCalendars_All").AtFoot();
Script.Require("jQueryCalendars_Picker_Ext").AtFoot();
Script.Require("jQueryTimeEntry").AtFoot();

并将以下脚本附加到您的javascript文件中：

 $("#DateSelector").calendarsPicker({
        showAnim: "",
        renderer: $.extend({}, $.calendarsPicker.themeRollerRenderer, {
            picker: "<div {popup:start} id='ui-datepicker-div'{popup:end} class='ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all{inline:start} ui-datepicker-inline{inline:end}'><div class='ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all'>{link:prev}{link:today}{link:next}</div>{months}{popup:start}{popup:end}<div class='ui-helper-clearfix'></div></div>",
            month: "<div class='ui-datepicker-group'><div class='ui-datepicker-month ui-helper-clearfix'>{monthHeader:MM yyyy}</div><table class='ui-datepicker-calendar'><thead>{weekHeader}</thead><tbody>{weeks}</tbody></table></div>"
        })
    });

或者根据用户与UI交互的任何时候显示自定义

如何在Orchard编辑器模板中将日期字段呈现为datepicker？

2 个答案: