11

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/

dev1
  • 231
  • 2
  • 5
  • 12
  • `datePicker: false` is simply not a part of the plug-in. If any use, I use http://keith-wood.name/timeentry.html when I need just a time picker. – StudioTime Sep 08 '16 at 07:58
  • @Darren Sweeney thankyou. But whenever I am trying to include another time picker in it is is throwing error. – dev1 Sep 08 '16 at 08:24
  • Pretty broad statement, can you clarify what you mean throwing error? What error? – StudioTime Sep 08 '16 at 09:31

4 Answers4

28
$('#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();
        });
James De Souza
  • 648
  • 1
  • 7
  • 20
11

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();
   });
})
Jay Prakash
  • 787
  • 6
  • 22
0

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(); }); })

Dat TT
  • 2,850
  • 2
  • 16
  • 18
0

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;
}
Larel Bruton
  • 1