問題描述

我正在使用這個日期范圍選擇器組件:http://www.daterangepicker.com/ 和默認情況下，小部件顯示兩個日歷.我想只顯示一個日歷并能夠使用 <> 選擇開始和結束日期時選擇下一個/上一個月份的按鈕，即，可以通過單擊 > 按鈕選擇一月份的開始日期(僅顯示一月)，然后選擇三月份的結束日期(僅顯示三月).singleDatePicker 有一個選項:true，但這會禁用選擇日期范圍的功能.

I'm using this date range picker component: http://www.daterangepicker.com/ and by default the widget shows two calendars. I would like to show only one calendar and be able to use the < > buttons to select next/previous months when selecting start and end dates i.e., be able to select a start date in January (showing only January) and then select an end date in March (showing only March), by clicking the > button. There is an option for singleDatePicker: true, but this disables the ability to select a range of dates.

推薦答案

刪除第二個日歷的代碼:http://www.daterangepicker.com將能夠在一個日歷中選擇一個日期范圍.

Code to remove second calendar for: http://www.daterangepicker.com Will be able to select a date range within one calendar.

/* REMOVE SECOND CALENDAR */

.daterangepicker .drp-calendar.right {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
}

.daterangepicker .drp-calendar.right tbody {
    display: none !important;
}

.daterangepicker .drp-calendar.right thead > tr:nth-child(2) {
    display: none !important;
}

.daterangepicker .drp-calendar.right th.month {
    display: none !important;
}

.daterangepicker .drp-calendar.right .calendar-table {
    background: transparent !important;
}

.daterangepicker .daterangepicker.ltr .ranges, .daterangepicker.ltr .drp-calendar {
    float: none !important;
}

.daterangepicker .drp-calendar.right .daterangepicker_input {
    position: absolute !important;
}

/* REMOVE SECOND CALENDAR */

這篇關于Javascript 日期范圍選擇器 - 用于范圍選擇的單個日歷的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！