shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
68.56k stars 4.06k forks source link

Popup Closes on Next Month Click and Repositions Incorrectly in JSP #4378

Open josmi-hash opened 1 month ago

josmi-hash commented 1 month ago

Describe the bug

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.

Screenshot 2024-07-22 at 7 17 43 PM Screenshot 2024-07-22 at 7 19 28 PM

Affected component/components

DateRange picker

How to reproduce

`

  <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('');
    });`

Codesandbox/StackBlitz link

No response

Logs

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.

System Info

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.

Before submitting

mason-smith commented 1 month ago

Hey @josmi-hash, looks like you are using daterangepicker which is not related to this project. I'd recommend opening a ticket in that project or ask your question on a forum like Stack Overflow.