如何在日期范围选择器中仅显示时间选择器

Question

我正在使用daterange选择器我想只显示timepicker但是它不能正常工作的链接是我用来参考的链接。

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

http://www.daterangepicker.com/

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

Answer 2

如果您需要一定的时间范围：

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

如果要使用单次选择器：

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

Answer 3

以上这些对我不起作用。但这有效

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

Answer 4

如果您使用的是Angular 2+，则可以使用以下方法：

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

，然后使用以下隐藏日历：

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