DateRangePicker -结合范围选择与动态预设
DateRangePicker - combine range selection with dynamic presets
我在表单中使用DataRangePicker JS库来选择两个日期的范围。DRP提供了将按钮与预定义日期(如昨天,今天,上个月等)的下拉菜单一起放置的功能,但我希望在单击日期输入字段时将其与原始下拉窗口结合起来。
DPR确实提供了一个设置生成器(在某种程度上)可以做到这一点,但只允许设置静态日期。此后,我使用moment()函数将其更改为按钮的动态范围,但无法将JS组合成一个函数。我哪里做错了?
HTML <!-- Date and time range -->
<div class="form-group">
<label>Date and time range:</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-clock-o"></i>
</div>
<input type="text" class="form-control" name="daterangepicker" id="daterangepicker" />
</div>
<!-- /.input group -->
<button type="button" class="btn btn-default pull-right" name="daterange-btn" id="daterange-btn" />
<span>
<i class="fa fa-calendar"></i> Date range picker
</span>
<i class="fa fa-caret-down"></i>
</button>
</div>
<!-- /.form group -->
JS for input field (working)
$(function() {
$('input[name="daterangepicker"]').daterangepicker({
alwaysShowCalendars: true,
showWeekNumbers: true,
timePicker: true,
timePicker24Hour: true,
timePickerIncrement: 30,
locale: {
format: 'DD/MM/YYYY H:mm'
}
});
JS for button (working)
$('input[name="daterange-btn"]').daterangepicker(
{
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')]
},
startDate: moment().subtract(29, 'days'),
endDate: moment()
},
function (start, end) {
$('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
)
结合JS的输入字段(不工作)
<script type="text/javascript">
//Date range picker with time picker
$(function() {
$('input[name="daterangepicker"]').daterangepicker({
alwaysShowCalendars: true,
showWeekNumbers: true,
timePicker: true,
timePicker24Hour: true,
timePickerIncrement: 30,
locale: {
format: 'DD/MM/YYYY H:mm'
},
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')]
},
startDate: moment().subtract(29, 'days'),
endDate: moment()
},
function (start, end) {
$('#daterangepicker').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
)
});
</script>
你错过了一些括号和错误的位置括号
<script type="text/javascript">
//Date range picker with time picker
$(function() {
$('input[name="daterangepicker"]').daterangepicker({
alwaysShowCalendars: true,
showWeekNumbers: true,
timePicker: true,
timePicker24Hour: true,
timePickerIncrement: 30,
locale: {
format: 'DD/MM/YYYY H:mm'
},
{ // here
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')]
},
startDate: moment().subtract(29, 'days'),
endDate: moment()
},
function (start, end) {
$('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
});
}); // here
</script>
显示DRP语法以一种特殊的方式处理"ranges"对象,并且不需要括号。谢谢@AKZhang指出了遗漏的括号。
下面的代码为我工作:
<script type="text/javascript">
//Date range picker with time picker
$(function() {
$('input[name="daterangepicker"]').daterangepicker({
alwaysShowCalendars: true,
showWeekNumbers: true,
timePicker: true,
timePicker24Hour: true,
timePickerIncrement: 30,
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')]
},
startDate: moment().subtract(29, 'days'),
endDate: moment(),
locale: {
format: 'DD/MM/YYYY H:mm'
},
function (start, end) {
$('#daterangepicker').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
});
}); // here
</script>
相关文章:
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- 根据选项卡内部的文本链接中的哈希ID动态选择jqueryUI选项卡
- 是否可以仅通过jQuery将图像替换为用户动态选择的另一个图像
- 使用javascript动态选择幻灯片放映的图像
- 带有动态选择选项的Firefox html5验证异常
- laravel5.0中HTML选择标记的动态选择
- 如何禁用s:动态选择
- 在边栏中动态选择项目
- 为动态选择框选择更新功能
- 动态选择框
- 试图让Jquery在Rails和ActiveAdmin中使用动态选择表单
- 带过滤器的jQuery动态选择器
- 确定是否使用javascript定义动态选择
- 添加值以动态选择字段
- 动态选择列表AJAX和插入数据库表通过张贴形式
- 用Javascript创建一个动态选择对象
- 如何在Jquery mobile中处理动态选择菜单事件
- 带有Rails 4的动态选择框
- 根据动态选择框的更改更改URL
- 提交动态选择框值以显示多重多边形