Javascript 日期范围选择器 - 用于范围选择的单个日历

2022-01-11 00:00:00 calendar javascript angular-daterangepicker

我正在使用这个日期范围选择器组件: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 */

相关文章