Как передать значения массива в функцию onChange из поля ввода?

Я вызываю функцию с именем «VizDateRange», которая получает два параметра при выборе дат, и эти выбранные значения должны передаваться как два значения, но выбранные даты имеют странный формат, который выходит как 01.02.2017-19.06.2017. как одно значение. Итак, чтобы передать его как два значения, как мне действовать?

//HTML

<div class="input-group date" data-provide="datepicker" name="" title="Select date range">
            <input type="text" id="daterange" class="form-control" onChange=VizFilter(this.val().split(" - "))>  //this is not working obviously. 
        </div>

// вызов daterangepicker, который является плагином диапазона дат начальной загрузки

   $(document).ready(function () {
            var dp = $('#daterange').daterangepicker({

                "startDate": "02/06/2017", setting the limit for min
                "endDate": "06/19/2017"setting the limit for max
            }


            )

        });

//вывод

02/01/2017-06/19/2017

// но мне нужно "01.02.2017", "19.06.2017", чтобы передать его в функцию VizDateRange.

// поэтому я могу использовать split ("-"), чтобы превратить его в массив, но как передать это onChange или onClick из поля ввода?

//функция должна быть вызвана onChange или onCLick и она запрашивает два значения, она получает два параметра

 function vizDateRange(minDate,maxDate)

            {
                sheet = viz0.getWorkbook().getActiveSheet();
                worksheetsArray = sheet.getWorksheets();
                for (var i = 0; i < worksheetsArray.length; i++) {
                    worksheetsArray[i].applyRangeFilterAsync("WEEK(DCM Date)", {
                        min: new Date(minDate),
                        max: new Date(maxDate)

                    });
                }
};

// вот jsfiddle

https://jsfiddle.net/u4t1rebs/


javascript jquery tableau-api daterangepicker
person Gerle Batde    schedule 17.07.2017    source источник
comment
какую конкретную библиотеку вы используете для daterangepicker? Бьюсь об заклад, у него есть встроенная функция изменения, которую вы могли бы использовать   -  person Wesley Smith    schedule 17.07.2017
comment
он в значительной степени спрашивает, как получить значения из daterangepicker и отредактировать их, прежде чем я передам их другой функции? и это должно происходить каждый раз, когда выбирается новый диапазон дат.   -  person Gerle Batde    schedule 17.07.2017
comment
@DelightedD0D, это www.daterangepicker.com   -  person Gerle Batde    schedule 17.07.2017

Ответы (1)


arrow_upward
0
arrow_downward

Если вы посмотрите на примеры библиотеки, первый аргумент является объектом параметров, а второй необязательный аргумент вы можете передать функцию обратного вызова. Вот как я бы использовал этот обратный вызов для решения этой проблемы:

        $(document).ready(function() {
            var dp = $('#daterange').daterangepicker({
                    "startDate": "02/06/2017",
                    "endDate": "06/19/2017"
                },
                function(start, end, label) {
                	start = moment(start).format('MM/DD/YYYY');
                    end = moment(end).format('MM/DD/YYYY');
                    vizDateRange(start, end)
                }
            )
        });


        function vizDateRange(minDate, maxDate) {
            // do stuff here 
            console.log(minDate, maxDate);
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />


<div class="input-group date" data-provide="datepicker" name="" title="Select date range">
  <input type="text" id="daterange" class="form-control" > //this is not working obviously.
</div>

person Wesley Smith    schedule 17.07.2017
comment
Вот это да. это работает!!! спасибо! Я буду больше читать примеры библиотек, чтобы больше не повторять подобных ошибок. Благодарю вас! - person Gerle Batde; 17.07.2017