Reusing Umbraco datetime picker

Question

Umbraco 7 has this date/time picker

How do you reuse that in a custom control to avoid reinventing the wheel?

Currently I only have a plain textbox:

<input type='text' ng-model='validTo' />

Robert Foster · Accepted Answer · 2017-02-12 11:28:35Z

11

Possibly the easiest way is to instantiate the right editor in the controller and bind it to the umbEditor directive. Your template might include something like this:

    <umb-property ng-if="validTo.hasValue" property="validTo.model">
        <umb-editor model="validTo.model"></umb-editor>
    </umb-property>

while your controller might contain something like this:

$scope.validTo = {
    model: null,
    existingValue: null, 
    hasValue: false
};

function buildDateTimePickerModel(alias, label, description) {
    return {
        editor: "Umbraco.DateTime",
        label: label,
        description: description,
        hideLabel: false,
        view: "datepicker",
        alias: alias,
        value: null,
        validation: {
            mandatory: false,
            pattern: ""
        },
        config: {
            format: "YYYY-MM-DD HH:mm:ss",
            pickDate: true,
            pickTime: true,
            useSeconds: true
        }
    };
};

$scope.validTo.model = buildDateTimePickerModel('validTo', 'Valid To', 'Enter the Valid To date');

Or something like that. I've not tested it but have derived it from an existing project of mine that implements the ContentPicker on a custom UI in a similar fashion.

You might also find this useful to get an idea of the available config options:

https://github.com/umbraco/Umbraco-CMS/blob/dev-v7/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js#L4-L16

edited Feb 12, 2017 at 11:28

answered Oct 13, 2015 at 2:43

Robert Foster

2,31620 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Aximili Over a year ago

Thank you. That works. But I wish there was a way to bind just the textbox without the label.

Robert Foster Over a year ago

You probably could; for instance, you could probably get rid of the umbProperty directive (iirc it just adds chrome); and you could create your own directive based on the umbEditor if you wanted to and use that instead.

DavidWainwright Over a year ago

I'd vote this up three times if I could - big thanks!

Daniel Bardi Over a year ago

"config: {dateFormat ... " is incorrect, it should be "config: {format..."

Robert Foster Over a year ago

Good pickup - Thanks!

Collectives™ on Stack Overflow

Reusing Umbraco datetime picker

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related