Sign in Register
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!

    Copy Link
  • Giant Penguin 23 posts 112 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,

    Copy Link
  • 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.

    Copy Link
  • Giant Penguin 23 posts 112 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,

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies