[英]how to pass array values to javascript function from html onchange action?
[英]How to pass array values to function onChange from input field?
我正在调用一个名为“ VizDateRange”的函数,当选择日期时,该函数将接收两个参数,并且这些选定的值应作为两个值传递,但选定的日期采用的格式很奇怪,显示为02/01 / 2017-06 / 19/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
}
)
});
//输出为
2017年2月1日至6月19日
//但是我需要的是“ 02/01/2017”,“ 06/19/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
如果查看该库的示例,则第一个参数是一个options对象,但是作为第二个可选参数,您可以传递一个回调函数。 这是我将使用该回调解决此问题的方法:
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.