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

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

是否有这样的shapehelper或smth将它们呈现为日期选择器并自动添加必要的jquery脚本，或者我必须手动呈现文本框并向其中添加必要的js脚本

---

我使用的是Orchard 1.8

如果您想拥有与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>"
        })
    });

$（“#日期选择器”）.calendarsPicker({
showAnim:“，
渲染器：$.extend（{}，$.calendarsPicker.ThemerollerRender{
选择器：“{link:prev}{link:today}{link:next}{months}{popup:start}{popup:end}”，
月份：“{monthHeader:MM yyyy}{weekHeader}{weeks}”
})
});

---

或者根据您的喜好对其进行自定义，以便在用户与UI交互时随时显示。您可以使用Orchard的DateTimeEditor类使用与日期字段相同的编辑器视图，并控制各种选项（日期编辑器、时间编辑器）。这样，您还可以考虑orchard的更新，包括jQueryUI库

视图模型：

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

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

---

我尝试手动添加这些内容，但不知怎的，我错过了一个css文件。然而，我仍然没有得到一个日期选择器弹出窗口。当我检查控制台的javascript错误时，我没有得到任何脚本错误或类似的东西，所有的js和css文件都在html中。这在我的视图中是有用的：@Html.TextBoxFor（m=>m.DateOfTrainingStartUtc，null，new{@class=“calendardatepicker”}），这是呈现的Html:Nevermind我从DateTimeeditor.cshtml复制/粘贴了脚本和js代码，它工作了。也许我错过了smth。感谢您为我指明了正确的方向。您也可以使用其他自定义日期选择器，它们的UI比jQuery更好，但您自己更新模型时，尤其是将UTC转换为Local时，应该注意格式和其他事项。为了快速解决问题，我使用了@Shahin的建议，效果不错，但这看起来是一个更好的解决方案。谢谢。您的第一个编辑器方法似乎缺少ContentShape的结束符

）

。我还收到错误“并非所有代码路径都返回'System.Func'类型的lambda表达式中的值”，但我不熟悉此处使用的符号，因此我不确定需要更改什么来解决该问题。“我天真地试图返回viewModel，但显然不起作用。”BauceLawyerson看到了编辑后的答案。我想在我写答案的时候，我是在没有实际IDE的情况下，在stackoverflow中没有intellisense；）

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);
    }
}

@model MyNameSpace.ViewModels.MyEditViewModel

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