当我在页面上实现多个日期范围选择器时，我遇到了问题。不管我做什么，它们都会更改输入字段中的文本。
我有一些用Bootstrap制造的“卡片”。为了用数据填充卡片，我遍历了一群人，每个人都得到了一个带有日期范围选择器（来自http://www.daterangepicker.com/#example4）的“卡片”。所有卡都具有daterangepicker，而且很好用，但当在任何日期范围输入字段中选择了日期时，它们都会更改其日期文本。我知道问题出在我不完全了解回调函数cb上。我必须以某种方式在每张卡上单独设置日期范围选择器的实例。
下面的示例，第一个是html卡，第二个是javascript代码。您打算如何解决呢？
编辑：在完整屏幕上运行代码片段以查看效果。我在同一页面上的日期范围大约有16次输入
$(function() {
var start = moment().subtract(29, 'days');
var end = moment();
/**
* @param {momentjs date} start
* @param {momentjs date} end
* @description Function implemented from daterangepicker.com
* @see http://www.daterangepicker.com/#example4
*/
function cb(start, end) {
let vacationrange_span = $('.form-control span');
vacationrange_span.html(start.format('DD/MM-YYYY') + ' to ' + end.format('DD/MM-YYYY'));
vacationrange_span.attr('data-startdt', start.format('YYYY-MM-DD') + 'T00:00:00Z');
vacationrange_span.attr('data-enddt', end.format('YYYY-MM-DD') + 'T23:59:59Z');
vacationrange_span.attr('id', 'register-date-range');
}
$('[id^=vacationrange-]').each(function() {
let idRange = $(this).attr('id').split('-')[1];
console.log(idRange);
$(this).daterangepicker({
parentEl: '#daterange-picker-' + idRange,
showWeekNumbers: true,
startDate: start,
endDate: end,
ranges: {
'Today': [
moment(), moment()
],
'Yesterday': [
moment().subtract(1, 'days'),
moment().subtract(1, 'days')
],
'Last 7 Days': [
moment().subtract(6, 'days'),
moment()
],
'Last 30 Days': [
moment().subtract(29, 'days'),
moment()
],
'This Month': [
moment().startOf('month'),
moment().endOf('month')
],
'Last Month': [
moment().subtract(1, 'month').startOf('month'),
moment().subtract(1, 'month').endOf('month')
]
}
}, cb)
cb(start, end);
})
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="container col-md-9">
<div class="row" style="margin-top: 120px;">
<h1>Vacation Registration</h1>
</div>
<hr>
<div class="row row-margin-bottom">
<div class="col-md-12 no-padding lib-item" data-category="view">
<div class="lib-panel">
<div class="row box-shadow">
<div class="col-md-9">
<div class="lib-row lib-header">Jane Doe<div class="lib-header-seperator"></div>
</div>
<div class="lib-row lib-desc">
<div class="row">
<div class="col-sm-8">
<div class="input-group" id="daterange-picker-628">
<div class="form-control" style="cursor: pointer; padding: 5px 10px; border: 1px solid #ccc"
id="vacationrange-628"><i class="fa fa-calendar mr-3"></i><span
class="mr-3"></span><i class="fa fa-caret-down"></i></div><span
class="input-group-append"><button class="btn btn-success bg-klean fa fa-check"
id="vacation-import-btn-628"></button></span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p>Something something dark side</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row row-margin-bottom">
<div class="col-md-12 no-padding lib-item" data-category="view">
<div class="lib-panel">
<div class="row box-shadow">
<div class="col-md-9">
<div class="lib-row lib-header">John Doe<div class="lib-header-seperator"></div>
</div>
<div class="lib-row lib-desc">
<div class="row">
<div class="col-sm-8">
<div class="input-group" id="daterange-picker-777">
<div class="form-control" style="cursor: pointer; padding: 5px 10px; border: 1px solid #ccc"
id="vacationrange-777"><i class="fa fa-calendar mr-3"></i><span
class="mr-3"></span><i class="fa fa-caret-down"></i></div><span
class="input-group-append"><button class="btn btn-success bg-klean fa fa-check"
id="vacation-import-btn-777"></button></span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p>Something something dark side</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
我的样式表依次导入：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.3/daterangepicker.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/application.css">
在我的html页面底部，依次包含我的JavaScript脚本：
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.3/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="/js/application.js" type="module"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.3/daterangepicker.min.js"></script>
<script src="/js/vacations.js" type="module"></script>
答案 0 :(得分：1)
...但是当在任何日期范围输入字段中选择一个日期时，它们都会更改其日期文本。 发生这种情况是因为在 cb 回调中，您引用了每个实例元素：
$('.form-control span');
您需要在其中引用当前元素。为了实现这一点，我建议将您的回调更改为：
function cb(ele) {
return function (start, end) {
let vacationrange_span = $(ele).parent().find('.form-control span');
vacationrange_span.html(start.format('DD/MM-YYYY') + ' to ' + end.format('DD/MM-YYYY'));
vacationrange_span.attr('data-startdt', start.format('YYYY-MM-DD') + 'T00:00:00Z');
vacationrange_span.attr('data-enddt', end.format('YYYY-MM-DD') + 'T23:59:59Z');
vacationrange_span.attr('id', 'register-date-range');
}
}
然后为了调用它（在您的代码中）.....
, cb(this))
cb(this)(start, end);
var start = moment().subtract(29, 'days');
var end = moment();
/**
* @param {momentjs date} start
* @param {momentjs date} end
* @description Function implemented from daterangepicker.com
* @see http://www.daterangepicker.com/#example4
*/
function cb(ele) {
return function (start, end)
{
let vacationrange_span = $(ele).parent().find('.form-control span');
vacationrange_span.html(start.format('DD/MM-YYYY') + ' to ' + end.format('DD/MM-YYYY'));
vacationrange_span.attr('data-startdt', start.format('YYYY-MM-DD') + 'T00:00:00Z');
vacationrange_span.attr('data-enddt', end.format('YYYY-MM-DD') + 'T23:59:59Z');
vacationrange_span.attr('id', 'register-date-range');
}
}
$('[id^=vacationrange-]').each(function() {
let idRange = $(this).attr('id').split('-')[1];
//console.log(idRange);
$(this).daterangepicker({
parentEl: '#daterange-picker-' + idRange,
showWeekNumbers: true,
startDate: start,
endDate: end,
ranges: {
'Today': [
moment(), moment()
],
'Yesterday': [
moment().subtract(1, 'days'),
moment().subtract(1, 'days')
],
'Last 7 Days': [
moment().subtract(6, 'days'),
moment()
],
'Last 30 Days': [
moment().subtract(29, 'days'),
moment()
],
'This Month': [
moment().startOf('month'),
moment().endOf('month')
],
'Last Month': [
moment().subtract(1, 'month').startOf('month'),
moment().subtract(1, 'month').endOf('month')
]
}
}, cb(this))
cb(this)(start, end);
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.3/daterangepicker.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.3/daterangepicker.css" />
<div class="container col-md-9">
<div class="row" style="margin-top: 120px;">
<h1>Vacation Registration</h1>
</div>
<hr>
<div class="row row-margin-bottom">
<div class="col-md-12 no-padding lib-item" data-category="view">
<div class="lib-panel">
<div class="row box-shadow">
<div class="col-md-9">
<div class="lib-row lib-header">Jane Doe<div class="lib-header-seperator"></div>
</div>
<div class="lib-row lib-desc">
<div class="row">
<div class="col-sm-8">
<div class="input-group" id="daterange-picker-628">
<div class="form-control" style="cursor: pointer; padding: 5px 10px; border: 1px solid #ccc"
id="vacationrange-628"><i class="fa fa-calendar mr-3"></i><span
class="mr-3"></span><i class="fa fa-caret-down"></i></div><span
class="input-group-append"><button class="btn btn-success bg-klean fa fa-check"
id="vacation-import-btn-628"></button></span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p>Something something dark side</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row row-margin-bottom">
<div class="col-md-12 no-padding lib-item" data-category="view">
<div class="lib-panel">
<div class="row box-shadow">
<div class="col-md-9">
<div class="lib-row lib-header">John Doe<div class="lib-header-seperator"></div>
</div>
<div class="lib-row lib-desc">
<div class="row">
<div class="col-sm-8">
<div class="input-group" id="daterange-picker-777">
<div class="form-control" style="cursor: pointer; padding: 5px 10px; border: 1px solid #ccc"
id="vacationrange-777"><i class="fa fa-calendar mr-3"></i><span
class="mr-3"></span><i class="fa fa-caret-down"></i></div><span
class="input-group-append"><button class="btn btn-success bg-klean fa fa-check"
id="vacation-import-btn-777"></button></span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p>Something something dark side</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>