Alloy-ui multiple datepicker send selection to other input

I have AlloyUi datepicker that is triggered by div id="trigger", but I want to display the dates selected in the hidden input id="dates".

YUI().use('aui-datepicker', function(Y) {
    var output = Y.one('#dates');
    var multidatepicker = new Y.DatePicker(
      {
        mask: '%Y-%m-%d',
        trigger: '#startdate',
        calendar: {
          selectionMode: 'multiple',
          on: {
            dateClick: function(event) {
                output.set('value', Y.Date.format(event.date,{format:multidatepicker.get('mask')}));
                }
          }
        },
        popover: {
          zIndex: 10
        },
        panes: 2
        
      })
  });

<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="trigger">        
          <div class='col-md-4'>      
            <div class="form-group">
              <label class="control-label" for="email">Start Date</label>
              <div class='input-group date' id=''>
                <input type='text' data-format="dd/MM/yyyy" id="startdate" class="form-control multidate" />
                <span class="input-group-addon">
                  <span class="glyphicon glyphicon-calendar"></span>
                </span>
              </div>
            </div>
          </div>
          <input id="dates" class="form-control" style="display:hidden"></input>
          <div class='col-md-4'>
            <div class="form-group">
              <label class="control-label" for="email">End Date</label>
              <div class='input-group date' id=''>
                <input type='text' data-format="dd/MM/yyyy" id="enddate" class="form-control multidate" />
                <span class="input-group-addon">
                  <span class="glyphicon glyphicon-calendar"></span>
                </span>
              </div>
            </div>
          </div>
          </div>

I found a solution here, but it only passes a single date to the input. I need to pass a date range selected by the user. Any ideas?

Solution

You can copy the #startdate value attribute into the #dates value attribute after the date is clicked:

after: {
    dateClick: function(event) {
        output.set('value', 
            Y.one(multidatepicker.get('trigger')).get('value'));
    }
}

Here's a runnable example with your code:

YUI().use('aui-datepicker', function(Y) {
  var output = Y.one('#dates');
  var multidatepicker = new Y.DatePicker({
    mask: '%Y-%m-%d',
    trigger: '#startdate',
    calendar: {
      selectionMode: 'multiple',
      after: {
        dateClick: function(event) {
          output.set('value', Y.one(multidatepicker.get('trigger')).get('value'));
        }
      }
    },
    popover: {
      zIndex: 1000
    },
    panes: 2

  })
});

<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
<link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="trigger">
  <div class='col-md-4'>
    <div class="form-group">
      <label class="control-label" for="email">Start Date</label>
      <div class='input-group date' id=''>
        <input type='text' data-format="dd/MM/yyyy" id="startdate" class="form-control multidate" />
        <span class="input-group-addon">
                  <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </div>
  </div>
  <input id="dates" class="form-control" style="display:hidden"></input>
  <div class='col-md-4'>
    <div class="form-group">
      <label class="control-label" for="email">End Date</label>
      <div class='input-group date' id=''>
        <input type='text' data-format="dd/MM/yyyy" id="enddate" class="form-control multidate" />
        <span class="input-group-addon">
                  <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </div>
  </div>
</div>