CODEWITHSUNDEEP
orchardcms
Deniz
Deniz

Reputation: 15

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

I created a module with a content part which has some fields as date. When I render these date fields in the editor template I want them to be rendered as datepicker textboxes exactly as they are rendered when I create a custom content type with Date Time Fields using the admin panel.

is there a shapehelper or smth like that to have them rendered as datepickers and have the necessary jquery scripts be added automatically, or do I have to manually render textboxes and add the necessary js scripts to?

I am using Orchard 1.8

Upvotes: 1

Views: 697

Answers (2)

devqon
devqon

Reputation: 13997

You can use Orchard's DateTimeEditor class to use the same editor view as the date field does, and take control over the various options (date editor, time editor). This way you also take in account updates of orchard, including jquery UI libraries.

ViewModel:

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

In your driver (use 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);
    }
}

And then in your Views/EditorTemplates/Parts/MyPart.cshtml:

@model MyNameSpace.ViewModels.MyEditViewModel

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

Upvotes: 2

Shahin b
Shahin b

Reputation: 26

If you want to have the same UI as orchard provide You only need to include below styles and scripts to your view:

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

and append the below script to your javascript file:

 $("#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>"
        })
    });

Or Customize it as you like to display at any time user interacts with UI

Upvotes: 1

Related Questions