DateRangePicker - Selected date range not getting correctly highlighted

Question

 $("input[name='MyDaterange']").daterangepicker({ ranges: { 'This Week': [moment().day("Sunday"), moment().day("Saturday")], 'This Month': [moment().startOf('month'), moment().endOf('month')], 'This Year': [moment().startOf('year'), moment().endOf('year')], 'Year to Date': [moment().startOf('year'), moment()] }, maxDate: moment() // this is required }); 

 <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" /> <input type="text" name="MyDaterange" id="MyDaterange" value="" /> 

I am using daterangepicker for selecting predefined dates. When I select Year To Date another option This Year gets highlighted.

1. How to make only that range active which was clicked.
2. Is this a bug with daterangepicker?

Code:

$("input[name='MyDaterange']").daterangepicker({
  ranges: {
    'This Week': [moment().day("Sunday"), moment().day("Saturday")],
    'This Month': [moment().startOf('month'), moment().endOf('month')],
    'This Year': [moment().startOf('year'), moment().endOf('year')],
    'Year to Date': [moment().startOf('year'), moment()]
  },
  maxDate: moment() // this is required
});

Answer 1

Since you added maxDate: moment() it means, all dates after today is not counted, it means:

• when you select `This Year' , you will get from jan 01 to today .
• when you select `Year to Date' , you will get from jan 01 to today .

They are the same, and since the plugin check the start and the end date to check for activated range, 'This year' would always the first activated.

Solution:

• remove 'this year' since you use maxDate = today, it's not really useful