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
    Patrick Robin
    0

    DatePicker in backoffice

    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!

  • Giant Penguin 22 posts 91 karma points
    Aug 10, 2020 @ 07:52
    Giant Penguin
    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,

  • Patrick Robin 34 posts 104 karma points
    Aug 10, 2020 @ 13:05
    Patrick Robin
    0

    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.

  • Giant Penguin 22 posts 91 karma points
    Aug 10, 2020 @ 13:25
    Giant Penguin
    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,

Please Sign in or register to post replies

Write your reply to:

Draft