How to disable showing dropdown options in DateRangePicker? - datetime

Question

I am using this
$('input[name="datefilter"]').daterangepicker({
opens: 'left',
"showDropdowns": true,
autoUpdateInput: true,
autoApply:true,
ranges: {
'All' :["",""],
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 15 Days': [moment().subtract(14, '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')],
'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
'Last 6 Months': [moment().subtract(6, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
'This Year': [moment().startOf('year'), moment().endOf('year')],
'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')]
},
locale: {
format: 'DD/MM/YYYY'
}
}, function(start, end, label) {
console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
});
It is working fine, but it always shows the range list whenever I refresh the page. I have another text input box with autofocus attribute but always focused on the date range picker after page loades.
See this screenshot
How to prevent this when refreshing the page or show this after clicking the date range picker?
Please help...