Copied to clipboard

Flag this post as spam?

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


  • Mike Taylor 148 posts 323 karma points
    22 days ago
    Mike Taylor
    0

    How to bind <umb-editor> date picker values inside an ng-repeat?

    Hi there,

    I'm creating a custom property editor that can store multiple prices for an item based on a date range.

    The JSON for the value looks like this:

    {
      "prices": [
      {
         "dateFrom": "2018-01-01T00:00:00Z",
         "dateTo": "2018-01-31T00:00:00Z",
         "price": 100
      },
      {
         "dateFrom": "2018-02-01T00:00:00Z",
         "dateTo": "2018-04-30T00:00:00Z",
         "price": 120
      },
      {
         "dateFrom": "2018-05-01T00:00:00Z",
         "dateTo": "2018-07-31T00:00:00Z",
         "price": 150
      }
      ]
    }
    

    Here's my dateprices.editor.html file:

    <div ng-controller="MT.DatePricesController">
    
        <table class="date-prices">
        <thead>
            <tr>
                <th scope="col">From</th>
                <th scope="col">To</th>
                <th scope="col">Price</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="priceItem in model.value.prices">
                <td>{{ priceItem.dateFrom }}</td>
                <td>{{ priceItem.dateTo }}</td>
                <td><input ng-model="priceItem.price" type="number" class="clr-number"/></td>
            </tr>
        </tbody>
        </table>
    
    </div>
    

    I'd really like to use the Umbraco date picker for the dateFrom and dateTo fields, but I can't work out how to bind it up from inside an ng-repeater block like this.

    For simple situations, it looks like it can be connected up like this:

    <umb-editor model="datePickerSingle"></umb-editor>
    

    With the "datePickerSingle" model defined in the controller:

    $scope.datePickerSingle = {
            view: "datepicker",
            config: {
                pickDate: true,
                pickTime: false,
                pick12HourFormat: false,
                format: "D MMM YYYY"
            },
            value: $scope.model.value.myDate
        };
    

    But for my example, I want to bind multiple date pickers to the values inside my ng-repeat block.

    Anyone got any tips or examples of this being done?

    Thanks,

    Mike

  • Marcel van Helmont 53 posts 201 karma points
    22 days ago
    Marcel van Helmont
    0

    Hi Mike,

    I think you can better use umbDateTimePicker if you wanne use a umbraco styled date picker. and make your change event generic so he can update your model.

    https://our.umbraco.org/apidocs/ui/#/api/umbraco.directives.directive:umbDateTimePicker

  • Mike Taylor 148 posts 323 karma points
    1 week ago
    Mike Taylor
    0

    Thanks Marcel.

    I'm looking at the umbDateTimePicker, but I'm still not sure how to manage the situation where the picker is inside an ng-repeat loop.

    Each iteration of the ng-repeat loop has two dates, and I'm trying to work out how to bind these "From" and "To" dates for each row to date pickers:

    Date picker inside an ng-repeat loop

    Is this possible? I can only find examples that bind a single date value to a date picker; nothing with multiple values inside an ng-repeat loop.

    Thanks,

    Mike

  • Marcel van Helmont 53 posts 201 karma points
    1 week ago
    Marcel van Helmont
    0

    @Mike,

    I am currently on holiday but will try to make a sample to use it!

    Marcel

  • Marcel van Helmont 53 posts 201 karma points
    4 days ago
    Marcel van Helmont
    0

    Hi Mike,

    I've looked at the current implementation of the umb datetimepicker and unfortunately i don't see a way of passing the value. I think building your own directive is your best bett.

    Here is some inspiration: https://gist.github.com/jamiepollock/ad1d1be07453cd1d7509

Please Sign in or register to post replies

Write your reply to:

Draft