Prevent Daterangepicker from closing when predefined range selected

Issue

I’m using Dan Grossman’s DateRangePicker plugin to provide users with a way to select both predefined and custom date ranges for a specific feature on my site. I have it working, but I have one nagging issue that I have not been able to resolve.

When the user clicks on a predefined date range, the bootstrap dropdown menu closes. This causes the user to have to reopen the date picker and click the “apply” button to execute the function.

I would like the dropdown menu to remain open after a predefined date range has been clicked. Then the user can quickly click the apply button if they are happy with the range.

I have tried the following:

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

This effectively prevents the dropdown from closing, but it doesn’t then execute the “clickRange” function in order to set the start and end dates in the appropriate inputs.

Solution

Just show call show() function when you select range other than “Custom Range”.

You can use following code :

	$(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);

	});
<!-- 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>

Let me know if you need anything else.

Answered By – Abhijeet

Answer Checked By – Gilberto Lyons (AngularFixing Admin)

Leave a Reply

Your email address will not be published.