Daterangepicker disable the 2nd calendar and use it as a datepicker

1.2k Views Asked by At

I have this example

    $('#datepicker').daterangepicker({
            timePicker: true,
            startDate: new Date(),
            endDate: new Date(),
            locale: {
                format: 'MM/DD/YYYY HH:mm'
            }

        }, function(start, end, label) {
            $("#range1").val(start.format('MM/DD/YYYY HH:mm:00')+" - "+end.format('MM/DD/YYYY HH:mm:00'));
    });

How I can change dynamically a daterangepicker into a datepicker?

2

There are 2 best solutions below

0
On

remove the time fields from the code like this

$('#datepicker').daterangepicker({
            timePicker: true,
            startDate: new Date(),
            endDate: new Date(),
            locale: {
                format: 'MM/DD/YYYY'
            }

        }, function(start, end, label) {
            $("#range1").val(start.format('MM/DD/YYYY')+" - "+end.format('MM/DD/YYYY'));
    });

hope it will work for you

0
On

Just add: "singleDatePicker: true" to your code:

 $('#datepicker').daterangepicker({
        singleDatePicker: true,
        timePicker: true,
        startDate: new Date(),
        endDate: new Date(),
        locale: {
            format: 'MM/DD/YYYY HH:mm'
        }

    }, function(start, end, label) {
        $("#range1").val(start.format('MM/DD/YYYY HH:mm:00')+" - "+end.format('MM/DD/YYYY HH:mm:00'));
});

Documentation: http://www.daterangepicker.com/#example3

You can test all the variables here: http://www.daterangepicker.com/#config