How to show only time picker in date range picker

Question

I am using daterange picker i want show only timepicker but its not working following is the link which is i am using for reference.

$(function() {
    $('#single_cal4').daterangepicker({
		singleDatePicker: true,
        datePicker: false,
        timePicker: true,
 
    });
})

http://www.daterangepicker.com/

Paravane

datePicker: false is simply not a part of the plug-in. If any use, I use keith-wood.name/timeentry.html when I need just a time picker. – Afflict

@Darren Sweeney thankyou. But whenever I am trying to include another time picker in it is is throwing error. – Paravane

Pretty broad statement, can you clarify what you mean throwing error? What error? – Afflict

If you don't NEED daterangepicker you might consider simple html with the type="time" format. Seems like it's exactly what you want: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time – Vendace

Answer 1

$('#duration').daterangepicker({
            timePicker: true,
            timePicker24Hour: true,
            timePickerIncrement: 1,
            timePickerSeconds: true,
            locale: {
                format: 'HH:mm:ss'
            }
        }).on('show.daterangepicker', function (ev, picker) {
            picker.container.find(".calendar-table").hide();
        });

Handily

As simple as that... I wish I found this earlier... KUDOS! – Chastitychasuble

Answer 2

If you want a range of time :

$(function() {
   $('#single_cal4').daterangepicker({
            timePicker : true,
            timePicker24Hour : true,
            timePickerIncrement : 1,
            timePickerSeconds : true,
            locale : {
                format : 'HH:mm:ss'
            }
        }).on('show.daterangepicker', function(ev, picker) {
            picker.container.find(".calendar-table").hide();
   });
})

If you want single time picker:

$(function() {
   $('#single_cal4').daterangepicker({
            timePicker : true,
            singleDatePicker:true,
            timePicker24Hour : true,
            timePickerIncrement : 1,
            timePickerSeconds : true,
            locale : {
                format : 'HH:mm:ss'
            }
        }).on('show.daterangepicker', function(ev, picker) {
            picker.container.find(".calendar-table").hide();
   });
})

Wiburg

Answer 3

Those above does not work for me. But this works

$(function() { $('#single_cal4').daterangepicker({ timePicker : true, singleDatePicker:true, timePicker24Hour : true, timePickerIncrement : 1, timePickerSeconds : true, locale : { format : 'HH:mm:ss' } }).on('show.daterangepicker', function(ev, picker) { picker.container.find(".calendar-date").hide(); }).on('showCalendar.daterangepicker', function(ev, picker){ picker.container.find('.calendar-date').remove(); }); })

Robbirobbia

Answer 4

If you are using Angular 2+, you can use this:

https://github.com/evansmwendwa/ng2-daterangepicker

and then hide the calendar with this:

::ng-deep .calendar-table {
  display: none;
}

Mortimer