enter image description here

I’m encountering an issue with a datepicker in my JSP application. When I click to navigate to the next month, the main datepicker popup closes unexpectedly. On the second click, the datepicker popup reappears, but it is misaligned and positioned incorrectly at the top-left corner of the screen. Additionally, the popup’s position changes inconsistently upon subsequent interactions.

I need the datepicker to remain open when navigating between months and to maintain a consistent position. Also, I want to enable a single-month view and allow users to select a date range within that view.

>
      <script src="https://code.jquery.com/jquery-3.6.0.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>

$('#daterange-icon').daterangepicker({
            autoUpdateInput: false,
            locale: {
                format: 'DD/MM/YY',
                cancelLabel: 'Clear'
            },
            singleDatePicker: false,
            showDropdowns: false,
            alwaysShowCalendars: false,
            linkedCalendars: false,
            autoApply: true
        }, function(start, end, label) {
            $('#daterange').val(start.format('DD/MM/YY') + ' - ' + end.format('DD/MM/YY'));
        });
        $('head').append('<style>.daterangepicker .drp-calendar.left { display: none; } </style>');
        $('#daterange').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });

I need the datepicker to remain open when navigating between months and to maintain a consistent position. Also, I want to enable a single-month view and allow users to select a date range within that view. and ui issue of 2nd row thursday date issue