Alloy-ui множественный выбор даты отправляет выбор на другой вход

У меня есть средство выбора даты AlloyUi, которое запускается div id="trigger", но я хочу отображать даты, выбранные в скрытом 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>

Я нашел решение здесь, но на вход передается только одна дата. Мне нужно передать диапазон дат, выбранный пользователем. Любые идеи?


javascript datepicker alloy-ui
person Baltazar    schedule 30.09.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете скопировать атрибут #startdate value в атрибут #dates value after на дату нажатия :

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

Вот работающий пример с вашим кодом:

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>

person stiemannkj1    schedule 02.10.2016
comment
Спасибо, это работает. Привет, я заметил, что ты один из разработчиков AlloyUI. У меня есть еще один вопрос. Есть ли какая-либо функция для получения любого пользователя, отменившего выбор между диапазоном дат? скажем, с 1 октября по 5 октября пользователь не включает 3 октября. Есть ли способ получить данные? - person Baltazar; 03.10.2016
comment
@Baltazar, на самом деле я не разработчик AlloyUI, но я работаю в Liferay, где был разработан AlloyUI. Один из способов получить отмененную дату — проверить, какая дата была нажата с помощью полезная нагрузка события dateClick. Затем вы можете проверить, находится ли это значение в настоящее время в списке выбранных дат ( через get('selectedDates') или get('calendar').get('selectedDates')). Если нет, то дата не выбрана. - person stiemannkj1; 03.10.2016
comment
О, я вижу. Извините, у меня еще недостаточно репутации, чтобы проголосовать. Не могли бы вы дать мне фрагмент кода? Извините, я новичок в javascript. - person Baltazar; 04.10.2016
comment
@ Baltazar, хм, ну, может быть, попробуй собрать это воедино, используя ссылки, которые я разместил. Если вы не можете понять это, опубликуйте еще один вопрос, показывающий, что вы пробовали. Эти ссылки также могут помочь: основы JavaScript, sscce.org и MCVE. - person stiemannkj1; 04.10.2016
comment
Наконец-то это работает, большое спасибо @stiemannkj1. Но я обнаружил еще одну проблему со стилем. Я опубликую еще один вопрос для этого - person Baltazar; 06.10.2016