how to apply date range picker to current clicked element of date dynamically?

Question

I bind click event to date field element, but date calendar not showing on click an element, on first click only current date fills in input fields, but calendar not showing. Can you please check my code where I did mistake.

Ex:

$('#datefield').click(function (e) {
    $(this).daterangepicker({
        singleDatePicker    : true,
        locale              : {
           format           : 'DD-MM-YYYY'
        },
        minDate             : new Date(),
        autoApply           : false,
        endDate             : new Date()
        });
    });
}

Answer 1

You should not initialize the daterangepicker in the event handler. Do it after the DOM is loaded:

$(function() {
    $('#datefield').daterangepicker({
        singleDatePicker: true,
        locale: {
            format: 'DD-MM-YYYY'
        },
        minDate: new Date(),
        autoApply: false,
        endDate: new Date()
    });
});