DateRangePicker Custom Date single calendar switch

cfsinc commented on Jun 28, 2021

Custom Range is defined in JS and I would like to ad an option on date select that is like Custom Range Called Custom Date.

When I select Custom Date a single view calendar will open to chose a single date with 1 click.

I see how to add functions for different ranges and what Im trying to do is keep the user from having to click 2 times on the calendar to select a start and end date that is a single date.

The only example I see of dateRangePicker single date picker and I cant get it to work as a custom option?

https://www.daterangepicker.com/#example3 single date picker.

I dont know how to call this correctly as JS to create a Custom Date like Custom Range is in daterangepicker.js

        this.locale = {
            direction: 'ltr',
            format: moment.localeData().longDateFormat('L'),
            separator: ' - ',
            applyLabel: 'Apply',
            cancelLabel: 'Cancel',
            weekLabel: 'W',
            customRangeLabel: 'Custom Range',
            daysOfWeek: moment.weekdaysMin(),
            monthNames: moment.monthsShort(),
            firstDay: moment.localeData().firstDayOfWeek()
        };

Sebastian Morales commented on Jun 29, 2021

If you want to use DateRangePicker's client properties pls try to add them to DateRangePicker php widget's options like this:

DateRangePicker::create(array(
    ...
    "options" => array(
        //convert javascript object to php array here
        "direction" => "ltr",
        "format" => "function() { return moment.localeData().longDateFormat('L'); }", // use function in double quotes for js function call
        "separator" => " - ",
        ...

Let us know if we understand your question correctly. Tks,

cfsinc commented on Jun 29, 2021

I know how to use DateRangePicker and I know how to create functions to pick a range of days.

I want to add the following in the dropdown list

Custom Date

Like

Yesterday
Today
Custom Date
Custom Range

I then want the selection of Custom Date to open a single date picker calendar like example 3 here

https://www.daterangepicker.com/#example3 single date picker.

when the calendar opens I want to be able to click on a single date in the calendar with 1 click and it fill in the date as start and end with the date.

Currently if you want to do this its in custom range and click the date 2 times.

Yes its not a big deal to click the date 2 time but a new user to this will get confused if not shown

If I can do the above, they will not be confused to 1 click a single date.

Sebastian Morales commented on Jun 30, 2021

Ok, it took me several hours to come up with this not so simple solution:

<script>
    function initDateRangePicker() {
        console.log('initDateRangePicker');
        var options = myDateRange.options;
        var myDateRangeValue = myDateRange.val();
        options.ranges["Custom Date"] = [myDateRangeValue[0], myDateRangeValue[1]];
        myDateRange = new DateRangePicker('myDateRange', options);
        addDateRangePickerEvents();
    }
    function addDateRangePickerEvents() {
        console.log('addDateRangePickerEvents');
        document.querySelector('li[data-range-key="Custom Date"]').addEventListener('click', function(e) {
            console.log('Custom Date clicked');
            e.preventDefault();
            e.stopPropagation();
            var options = myDateRange.options;
            if (typeof options.singleDatePicker === "undefined" || options.singleDatePicker == false) {
                options.singleDatePicker = true;
                myDateRange = new DateRangePicker('myDateRange', options);
                $("#myDateRange").data('daterangepicker').show(); 
                addDateRangePickerEvents();
            }
        });

        document.querySelector('li[data-range-key="Custom Range"]').addEventListener('click', function() {
            console.log('Custom Range clicked');
            var options = myDateRange.options;
            if (options.singleDatePicker == true) {
                options.singleDatePicker = false;
                myDateRange = new DateRangePicker('myDateRange', options);
                $("#myDateRange").data('daterangepicker').show(); 
                addDateRangePickerEvents();
            }
        });
    }
</script>
<?php
DateRangePicker::create(array(
    "name"=>"myDateRange", //if you use another name, remember to change all the strings myDateRange in the above functions to the new name as well
    "options" => [
        "alwaysShowCalendars" => true,
    ],
    "onReady" => "initDateRangePicker"
));
?>

Pls try it and let us know if there's any issue. Tks,

cfsinc commented on Jun 30, 2021

You are absolutely brilliant!!!!!

cfsinc commented on Jun 30, 2021

I really try to do as much on my own as possible. When I get stuck and you help me like this, I appreciate it very much!!!

Koolreport product is amazing!!!

Support and knowledge is amazing!!!

Wow!!!

KoolReport's Forum

DateRangePicker Custom Date single calendar switch #2168

Build Your Excellent Data Report