Question

我使用Dan Grossman的DateRangePicker插件为用户提供了一种为我网站上的特定功能选择预定义和自定义日期范围的方法。我有它的工作，但我有一个唠叨的问题，我无法解决。

当用户点击预定义的日期范围时，引导程序下拉菜单将关闭。这导致用户必须重新打开日期选择器并单击＆＃34; apply＆＃34;按钮执行该功能。

我希望在单击预定义的日期范围后，下拉菜单保持打开状态。然后，如果用户对范围满意，则用户可以快速单击“应用”按钮。

我尝试了以下内容：

$(function() {
    $(document).on('click', '.ranges li', function(e) {
        e.preventDefault();
    });
});

这有效地阻止了下拉关闭，但它并没有执行＆＃34; clickRange＆＃34;函数，以便在适当的输入中设置开始和结束日期。

Answer 1

当您选择＆＃34;自定义范围＆＃34;以外的范围时，只需显示电话show()功能。

您可以使用以下代码：

＆＃13;

	$(function() {
		var listItem,applyClicked=false;
		/* $(document).on('click', '.ranges li', function(e) {
			e.preventDefault();
		}); */

		var start = moment().subtract(29, 'days');
		var end = moment();

		function cb(start, end) {
			/* console.log(start.format('MMMM D, YYYY') + ' - '
					+ end.format('MMMM D, YYYY')); */
			$('#reportrange span').html(
					start.format('MMMM D, YYYY') + ' - '
							+ end.format('MMMM D, YYYY'));
		}

		$('#reportrange').daterangepicker(
				{
					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);

		$(".ranges ul li").click(function() {
			listItem = $(this).text();
		});
		$(".range_inputs ").click(function() {
			applyClicked=true;
		});

		$('#reportrange').on('apply.daterangepicker', function(ev, picker) {
			console.log(listItem +" : "+ applyClicked);
			if(listItem!="Custom Range" && !applyClicked){
				picker.show();
				applyClicked=false;
			}
				
			//ev.preventDefault();

		});

		cb(start, end);

	});

＆＃13;

<!-- Include Required Prerequisites -->
<script type="text/javascript"
	src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript"
	src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />

<!-- 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 id="reportrange" class="pull-right"
		style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
		<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp; <span></span>
		<b class="caret"></b>
	</div>

＆＃13;

如果您还有其他需要，请告诉我。

Answer 2

尝试使用此代码，其中config-demo是textbox的id，您可以替换文本框ID：

$(function () {
     $(document).on('click', '.ranges li', function (e) {
         $("#config-demo").focus();
     });
});

选择预定义范围时，阻止Daterangepicker关闭

2 个答案: