alumuko / vanilla-datetimerange-picker

A JavaScript component that is a date & time range picker, no need to build, no dependencies except Moment.js, that is based on Dan Grossman's bootstrap-daterangepicker.
MIT License
148 stars 17 forks source link

To Year stuck at 2023 #13

Closed shaunroselt closed 1 year ago

shaunroselt commented 1 year ago

Can someone maybe help me and explain why my To year is stuck at 2023. I'd like it to be max up to 2023 and min from 2000.

Here's my From which works like it should:

image

And then my To which only shows 2023:

image

Here's my code:

            let drp;
            let rangeChange = function(){
                drp.updateRanges({
                    'Last 3 Days': [moment().subtract(2, 'days').startOf('day'), moment().endOf('day')],
                    'This Year': [moment().startOf('year').startOf('day'), moment().endOf('year').endOf('day')],
                });
            };
            window.addEventListener("load", function (event) {
                drp = new DateRangePicker('datetimerange-input1',
                    {
                        startDate: '2023-01-01',
                        endDate: '2023-03-09',
                        maxDate: '2023-03-10',
                        showDropdowns: true,
                        minYear: 2000,
                        maxYear: 2023,
                        linkedCalendars: false,
                        ranges: {
                            'Today': [moment().startOf('day'), moment().endOf('day')],
                            'Yesterday': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
                            'Last 7 Days': [moment().subtract(6, 'days').startOf('day'), moment().endOf('day')],
                            'This Month': [moment().startOf('month').startOf('day'), moment().endOf('month').endOf('day')],
                        },
                        locale: {
                            format: "YYYY-MM-DD HH:mm:ss",
                        }
                    },
                    function (start, end) {
                        alert(start.format() + " - " + end.format());
                    })
                //drp.setStartDate('2014/03/01');
                //drp.setEndDate('2014/03/03');
                window.addEventListener('apply.daterangepicker', function (ev) {
                    console.log(ev.detail.startDate.format('YYYY-MM-DD'));
                    console.log(ev.detail.endDate.format('YYYY-MM-DD'));
                });
            });

Is there a way to start the datetime picker to be from 2023-01-01 to 2023-03-09 and then stop someone from selecting older than 2023-03-10, but they should still be able to select say from 2010 to 2015 as an example, but currently the To Year is stuck at 2023.

What's the correct way to do this?

shaunroselt commented 1 year ago

After posting this, I realized that it does actually work fine. I just need to select a From date older than 2023 first and then my To Date goes back further than 2023.