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

Question

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

是否有类似的 shapehelper 或 smth 让它们呈现为日期选择器并自动添加必要的 jquery 脚本，或者我是否必须手动呈现文本框并添加必要的 js 脚本？

我正在使用 Orchard 1.8

Answer 1

如果你想拥有与 orchard 相同的UI，你只需要在你的视图中包含以下样式和脚本：

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

互动时随时显示

Answer 2

您可以使用 Orchard 的 DateTimeEditor class 来使用与日期字段相同的编辑器视图，并控制各种选项（日期编辑器、时间编辑器）。这样您还可以考虑果园的更新，包括 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

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

How can I have the date field render as datepicker in Orchard editor template?

orchardcms