Как ограничить час в палитре дат диапазона JQuery плагин - PullRequest
Новая
       9

Как ограничить час в палитре дат диапазона JQuery плагин

0 голосов
/ 14 февраля 2020

Я использую плагин Date Range Picker JQuery и не могу ограничить час. Я хочу, чтобы пользователь мог выбрать с 8:00 до 17:00.

Мой код: 

$('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,

1 Ответ

0 голосов
/ 15 февраля 2020

Кажется, что библиотека изначально не позволяет достичь того, чего вы хотите достичь. Было бы неплохо иметь 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();
});
...