datepicker in backoffice

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Patrick Robin 34 posts 104 karma points

Dec 21, 2019 @ 17:58

Does anyone know how to display the datepicker correctly in the back office? I've got the following defined in my controller:

$scope.finish = moment().endOf("week").toDate();
$scope.finishPicker = {
    alias: "datepicker",
    view: "/umbraco/views/propertyeditors/datepicker/datepicker.html",
    config: {
        pickDate: true,
        pickTime: true,
        useSeconds: false,
        format: "YYYY-MM-DD",
        icons: {
            time: "icon-time",
            date: "icon-calendar",
            up: "icon-chevron-up",
            down: "icon-chevron-down"
        }
    }, value: $scope.finish
};

And then in my view:

<umb-control-group label="Start" description="The start date of the activity range">
    <umb-editor model="startPicker" class="datepicker"></umb-editor>
</umb-control-group>

And whilst a calendar is displayed and I can get the value out of it, it's not displaying correctly and the label is hidden by the calendar picker.

I've tried searching around but I can't find any usefull information about how to display the datepicker or what tags I should be using.

Any help would be appreciated!

Copy Link

Giant Penguin 23 posts 112 karma points

Aug 10, 2020 @ 07:52

0

Hi Patrick,

Have you been managed to resolve the datepicker issue?

I want to show a datepicker on a dashboard's view so that the logged-in user can pick a date value from that datepicker to be an report's input, but I could not found any guide for that. Could you please help showing me a way to get this done?

Can anyone else please help?

Thanks,

Copy Link

Patrick Robin 34 posts 104 karma points

Aug 10, 2020 @ 13:05

I've done a lot of refactoring since I asked this question but hopefully this will help.

In my view I have:

    <umb-control-group label="Start" description="The start time of the activity" class="umb-el-rap">
        <umb-date-time-picker class="datepicker" ng-model="model.activity.start" options="model.startPicker.config" on-close="model.onStartPickerClosed(selectedDates, dateStr)"></umb-date-time-picker>
    </umb-control-group>

And in my model I have this:

activity: activity,
startPicker: {
    config: {
        enableTime: true,
        useSeconds: false,
        format: "YYYY-MM-DD HH:mm",
        icons: {
            time: "icon-time",
            date: "icon-calendar",
            up: "icon-chevron-up",
            down: "icon-chevron-down"
        }
    }
},
onStartPickerClosed: function (selectedDates, dateStr) {
    this.activity.start = dateStr;
}

activity is an object that is passed in to my model that has property for start date/time among others so you would need to change this according to your needs.

Copy Link

Giant Penguin 23 posts 112 karma points

Aug 10, 2020 @ 13:25

0

Thank Patrick!

I have just found that the LogViewer also use a datepicker, I will try to use that way, the idea is try using it simplest way.

Best regards,

Copy Link
is working on a reply...

Please Sign in or register to post replies