Bootstrap 具有两个范围的日期范围选择器,其中一个范围开头为空
Bootstrap Date Range Picker with two ranges with one empty at the beginning
我正在尝试构建一个包含 2 个范围的仪表板,使用第一个日期范围构建一个简单的图表,使用第二个日期范围与第一个日期范围进行比较。
第一个工作正常,但我在构建第二个时遇到问题,它必须从空开始并且能够 select 一个范围或清除日期。
我的 HTML 是:
<div id="reportrange-1" class="dates pull-right">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<span></span> <b class="caret"></b>
</div>
<div id="reportrange-2" class="dates pull-right date-compare">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<span></span> <b class="caret"></b>
</div>
我的脚本:
var _reportDateStart = moment().subtract(6, 'days').format('YYYY-MM-DD');
var _reportDateEnd = moment().subtract(1, 'days').format('YYYY-MM-DD');
var _reportCompareToDateStart;
var _reportCompareToDateEnd;
moment.locale('pt');
var start = moment().subtract(6, 'days');
var end = moment();
function cb(start, end) {
$('#reportrange-1 span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$('#reportrange-1').daterangepicker({
locale: {
format: 'DD-MM-YYYY'
},
startDate: start,
endDate: end,
ranges: {
'Hoje': [moment(), moment()],
'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Últimos 7 Dias': [moment().subtract(6, 'days'), moment()],
'Últimos 30 Dias': [moment().subtract(29, 'days'), moment()],
'Este Mês': [moment().startOf('month'), moment().endOf('month')],
'Último Mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);
$('#reportrange-2').daterangepicker({
autoUpdateInput: false,
locale: {
format: 'DD-MM-YYYY',
cancelLabel: 'Limpar'
},
ranges: {
'Hoje': [moment(), moment()],
'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Últimos 7 Dias': [moment().subtract(6, 'days'), moment()],
'Últimos 30 Dias': [moment().subtract(29, 'days'), moment()],
'Este Mês': [moment().startOf('month'), moment().endOf('month')],
'Último Mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
});
cb(start, end);
$('#reportrange-1').on('apply.daterangepicker', function (ev, picker) {
_reportDateStart = picker.startDate.format('YYYY-MM-DD');
_reportDateEnd = picker.endDate.format('YYYY-MM-DD');
_loadChart();
});
$('#reportrange-2').on('apply.daterangepicker', function (ev, picker) {
_reportCompareToDateStart = picker.startDate.format('YYYY-MM-DD');
_reportCompareToDateEnd = picker.endDate.format('YYYY-MM-DD');
_loadChart();
});
$('#reportrange-2').on('cancel.daterangepicker', function (ev, picker) {
$(this).val('');
});
发生的情况是必须以空开头的第二个日期,在 selection 之后不显示任何日期。
您的第二个输入仍然是空的,因为您从未在其中设置值。
第一个获得值是因为您调用了 cb
函数,因此您可以创建一个类似的方法(在我的示例中为 cb2
)来更新第二个选择器的输入值.
请注意,daterangepicker
函数接受 2 个参数,一个选项 Object
和一个回调函数,如 docs 所述:
You can customize Date Range Picker with options, and get notified when the user chooses new dates by providing a callback function.
因此您可以将 cb2
回调添加到 #reportrange-2
初始化。
这是一个工作示例:
var _reportDateStart = moment().subtract(6, 'days').format('YYYY-MM-DD');
var _reportDateEnd = moment().subtract(1, 'days').format('YYYY-MM-DD');
var _reportCompareToDateStart;
var _reportCompareToDateEnd;
moment.locale('pt');
var start = moment().subtract(6, 'days');
var end = moment();
function cb(start, end) {
$('#reportrange-1 span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
function cb2(start, end) {
$('#reportrange-2 span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$('#reportrange-1').daterangepicker({
locale: {
format: 'DD-MM-YYYY'
},
startDate: start,
endDate: end,
ranges: {
'Hoje': [moment(), moment()],
'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Últimos 7 Dias': [moment().subtract(6, 'days'), moment()],
'Últimos 30 Dias': [moment().subtract(29, 'days'), moment()],
'Este Mês': [moment().startOf('month'), moment().endOf('month')],
'Último Mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);
$('#reportrange-2').daterangepicker({
autoUpdateInput: false,
locale: {
format: 'DD-MM-YYYY',
cancelLabel: 'Limpar'
},
ranges: {
'Hoje': [moment(), moment()],
'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Últimos 7 Dias': [moment().subtract(6, 'days'), moment()],
'Últimos 30 Dias': [moment().subtract(29, 'days'), moment()],
'Este Mês': [moment().startOf('month'), moment().endOf('month')],
'Último Mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb2);
cb(start, end);
$('#reportrange-1').on('apply.daterangepicker', function (ev, picker) {
_reportDateStart = picker.startDate.format('YYYY-MM-DD');
_reportDateEnd = picker.endDate.format('YYYY-MM-DD');
_loadChart();
});
$('#reportrange-2').on('apply.daterangepicker', function (ev, picker) {
_reportCompareToDateStart = picker.startDate.format('YYYY-MM-DD');
_reportCompareToDateEnd = picker.endDate.format('YYYY-MM-DD');
_loadChart();
});
$('#reportrange-2').on('cancel.daterangepicker', function (ev, picker) {
// Clear current input
// you can use this or the component id
$(this).find('span').html('');
//$('#reportrange-2 span').html('');
});
function _loadChart(){
// _loadChart
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.0/locale/pt.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<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 id="reportrange-1" class="dates pull-right">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<span></span> <b class="caret"></b>
</div>
<div id="reportrange-2" class="dates pull-right date-compare">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<span></span> <b class="caret"></b>
</div>
编辑:
我已经根据您的评论更改了 cancel.daterangepicker
回调函数,现在它将使用 $(this).find('span').html('');
清除输入。如果你需要你可以为第一个选择器做同样的事情。
我正在尝试构建一个包含 2 个范围的仪表板,使用第一个日期范围构建一个简单的图表,使用第二个日期范围与第一个日期范围进行比较。
第一个工作正常,但我在构建第二个时遇到问题,它必须从空开始并且能够 select 一个范围或清除日期。
我的 HTML 是:
<div id="reportrange-1" class="dates pull-right">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<span></span> <b class="caret"></b>
</div>
<div id="reportrange-2" class="dates pull-right date-compare">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<span></span> <b class="caret"></b>
</div>
我的脚本:
var _reportDateStart = moment().subtract(6, 'days').format('YYYY-MM-DD');
var _reportDateEnd = moment().subtract(1, 'days').format('YYYY-MM-DD');
var _reportCompareToDateStart;
var _reportCompareToDateEnd;
moment.locale('pt');
var start = moment().subtract(6, 'days');
var end = moment();
function cb(start, end) {
$('#reportrange-1 span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$('#reportrange-1').daterangepicker({
locale: {
format: 'DD-MM-YYYY'
},
startDate: start,
endDate: end,
ranges: {
'Hoje': [moment(), moment()],
'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Últimos 7 Dias': [moment().subtract(6, 'days'), moment()],
'Últimos 30 Dias': [moment().subtract(29, 'days'), moment()],
'Este Mês': [moment().startOf('month'), moment().endOf('month')],
'Último Mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);
$('#reportrange-2').daterangepicker({
autoUpdateInput: false,
locale: {
format: 'DD-MM-YYYY',
cancelLabel: 'Limpar'
},
ranges: {
'Hoje': [moment(), moment()],
'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Últimos 7 Dias': [moment().subtract(6, 'days'), moment()],
'Últimos 30 Dias': [moment().subtract(29, 'days'), moment()],
'Este Mês': [moment().startOf('month'), moment().endOf('month')],
'Último Mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
});
cb(start, end);
$('#reportrange-1').on('apply.daterangepicker', function (ev, picker) {
_reportDateStart = picker.startDate.format('YYYY-MM-DD');
_reportDateEnd = picker.endDate.format('YYYY-MM-DD');
_loadChart();
});
$('#reportrange-2').on('apply.daterangepicker', function (ev, picker) {
_reportCompareToDateStart = picker.startDate.format('YYYY-MM-DD');
_reportCompareToDateEnd = picker.endDate.format('YYYY-MM-DD');
_loadChart();
});
$('#reportrange-2').on('cancel.daterangepicker', function (ev, picker) {
$(this).val('');
});
发生的情况是必须以空开头的第二个日期,在 selection 之后不显示任何日期。
您的第二个输入仍然是空的,因为您从未在其中设置值。
第一个获得值是因为您调用了 cb
函数,因此您可以创建一个类似的方法(在我的示例中为 cb2
)来更新第二个选择器的输入值.
请注意,daterangepicker
函数接受 2 个参数,一个选项 Object
和一个回调函数,如 docs 所述:
You can customize Date Range Picker with options, and get notified when the user chooses new dates by providing a callback function.
因此您可以将 cb2
回调添加到 #reportrange-2
初始化。
这是一个工作示例:
var _reportDateStart = moment().subtract(6, 'days').format('YYYY-MM-DD');
var _reportDateEnd = moment().subtract(1, 'days').format('YYYY-MM-DD');
var _reportCompareToDateStart;
var _reportCompareToDateEnd;
moment.locale('pt');
var start = moment().subtract(6, 'days');
var end = moment();
function cb(start, end) {
$('#reportrange-1 span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
function cb2(start, end) {
$('#reportrange-2 span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$('#reportrange-1').daterangepicker({
locale: {
format: 'DD-MM-YYYY'
},
startDate: start,
endDate: end,
ranges: {
'Hoje': [moment(), moment()],
'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Últimos 7 Dias': [moment().subtract(6, 'days'), moment()],
'Últimos 30 Dias': [moment().subtract(29, 'days'), moment()],
'Este Mês': [moment().startOf('month'), moment().endOf('month')],
'Último Mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);
$('#reportrange-2').daterangepicker({
autoUpdateInput: false,
locale: {
format: 'DD-MM-YYYY',
cancelLabel: 'Limpar'
},
ranges: {
'Hoje': [moment(), moment()],
'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Últimos 7 Dias': [moment().subtract(6, 'days'), moment()],
'Últimos 30 Dias': [moment().subtract(29, 'days'), moment()],
'Este Mês': [moment().startOf('month'), moment().endOf('month')],
'Último Mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb2);
cb(start, end);
$('#reportrange-1').on('apply.daterangepicker', function (ev, picker) {
_reportDateStart = picker.startDate.format('YYYY-MM-DD');
_reportDateEnd = picker.endDate.format('YYYY-MM-DD');
_loadChart();
});
$('#reportrange-2').on('apply.daterangepicker', function (ev, picker) {
_reportCompareToDateStart = picker.startDate.format('YYYY-MM-DD');
_reportCompareToDateEnd = picker.endDate.format('YYYY-MM-DD');
_loadChart();
});
$('#reportrange-2').on('cancel.daterangepicker', function (ev, picker) {
// Clear current input
// you can use this or the component id
$(this).find('span').html('');
//$('#reportrange-2 span').html('');
});
function _loadChart(){
// _loadChart
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.0/locale/pt.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<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 id="reportrange-1" class="dates pull-right">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<span></span> <b class="caret"></b>
</div>
<div id="reportrange-2" class="dates pull-right date-compare">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<span></span> <b class="caret"></b>
</div>
编辑:
我已经根据您的评论更改了 cancel.daterangepicker
回调函数,现在它将使用 $(this).find('span').html('');
清除输入。如果你需要你可以为第一个选择器做同样的事情。