如何在日期范围选择器 JQuery 插件中限制时间

Question

我正在使用日期范围选择器 JQuery 插件，我无法限制时间。我希望用户可以 select 上午 8 点到下午 5 点。

我的代码：

$('input[name="date"]').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    timePicker: true,
    timePicker24Hour: true,
    timePickerIncrement: 30,
    "locale": {
        "format": "YYYY-MM-DD hh:mm",
        "applyLabel": "Onayla",
        "cancelLabel": "İptal",
        "weekLabel": "H",
        "daysOfWeek": [
            "Pa",
            "Pt",
            "Sa",
            "Ça",
            "Pe",
            "Cu",
            "Ct"
        ],
        "monthNames": [
            "Ocak",
            "Şubat",
            "Mart",
            "Nisan",
            "Mayıs",
            "Haziran",
            "Temmuz",
            "Ağustos",
            "Eylül",
            "Ekim",
            "Kasım",
            "Aralık"
        ],
        "firstDay": 1
    },
    minDate: moment().startOf('day').add(1,'day'),
    maxDate: moment().startOf('month').add(6,'month'),
    startDate: moment().startOf('day').add(1,'day'),
    MinTime: moment().hour(0).add(8)
});

我用这段代码解决了这个问题：

$('input[name="date"]').on('apply.daterangepicker', function(ev, picker) {
    if(picker.startDate.hour() > 17 || picker.startDate.hour() < 8){
        $('input[name="date"]').data('daterangepicker').setStartDate(picker.startDate.hour(0).add(8,'hour'));
        //ev.preventDefault();
    }
});

但我不想让他们看到 0 到 24 小时。刚好 8 到 17。

编辑：我使用了那个代码但没有改变任何东西。

hourMin: 8,
hourMax: 16,

Answer 1

看来该库本身不允许实现您想要实现的功能。最好有 minHour 和 maxHour（如您所建议的）。

你可以用来欺骗用户的是 CSS 隐藏你不想让他选择的时间：

// This will hide the first 8 items so that 8 hours is the first option shown.
.hourselect option:nth-child(-n+8) {
    display: none;
}
// This will hide the hours from 18 onwards.
.hourselect option:nth-child(n+19) {
    display: none;
}

这样你就可以隐藏不需要的时间。问题是您第一次打开范围选择器时，您会看到 0 作为选定的小时。要更正此问题，您可以设置 startDate 使其从 8:

开始

startDate: moment().startOf('day').add(1,'day').add(8, 'hours'),

基于JavaScript的另一种解决方案是去除用户打开范围选择器时不需要的时间：

$('input[name="daterange"]').on('show.daterangepicker', function(ev, picker) {
    var $hours = picker.container.find('.hourselect').children();

    $hours.filter(':gt(17)').remove();    
    $hours.filter(':lt(8)').remove();
});

如何在日期范围选择器 JQuery 插件中限制时间

How to limit hour in Date Range Picker JQuery Plugin

jquery

daterangepicker