Event Handler - apply.daterangepicker is not working

[anshul-budhiraja]

Hi,

My event function is not working. Can someone please help me out asap. It is calling scope. I confirmed it by using another option "opens". Open is working fine but eventhandler is not.

My HTML is <input type="text" date-range-picker ng-model="col.filter_text" class="small_input form-control date-picker"min="'2015-08-01'" max="'2016-02-21'" options="dateoptions"/>

JS

$scope.dateoptions = {
            eventHandlers: {
                'apply.daterangepicker': function (ev, picker) {
                    console.log('anshul');
                }
            },
            opens : "center"
        };

[fabiomcj]

This worked for me: JS

$scope.dateRange = {
            startDate: null,
            endDate: null
        };

$scope.dateRangeOptions = {
        locale : {
            format : 'DD/MM/YYYY'
        },
        eventHandlers : {
            'apply.daterangepicker' : function() {  
                console.log($scope.dateRange);          
            }
        }
    };

HTML <input date-range-picker id="daterange4" name="daterange4" class="form-control date-picker" type="text" ng-model="dateRange" clearable="true" options="dateRangeOptions" />

[ehthisham]

Is there any way to close the calendar upon selecting the range, I don't want the Apply button in my UI

[anshul-budhiraja]

Yes, You can. For more information you can refer "http://www.daterangepicker.com//". "autoApply": true,

[anshul-budhiraja]

@fabiomcj Thanks for replying. Let me try by defining dateRange scope. I think this is the only difference between what I tried and what you gave. Also, Can you please have a look my another issue as well that I am facing with this package. Its really important for me.

[riteshthakur]

@anshul-budhiraja hey can u tell me where to add the code or how to add that code of autoApply:true i have no idea about this i already added the calendar succcessfully but i don't want apply and cancel btn

[shivbachan14]

Hey, you can add like this $(function() { $("#e1").daterangepicker({ "autoApply": true }, function(start, end) { var startDate; var endDate; startDate = start; endDate = end;

            console.log(startDate.format('D MMMM YYYY') + ' - ' + endDate.format('D MMMM YYYY'));
        });
    });

Hope, this will be helpfull for you.

[vishalsingh119]

$scope.dateoptions = { eventHandlers: { 'apply.daterangepicker': function (ev, picker) { console.log('anshul'); } }, opens : "center" }; In above code instead of clicking of apply.daterangepicker, can we add something like on selection of date range, its auto update the secound picker. For more info refer - https://jsfiddle.net/vishalsingh119/8auw2rcp/7/

[KaushikNandwana]

bellow click event for apply is not working $('#duration').on('apply.daterangepicker', function (ev, picker) { alert('apply clicked!'); });

[zanozik]

+1