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

Question

我正在使用这个日期范围选择器组件：http : //www.daterangepicker.com/，默认情况下小部件显示两个日历。我只想显示一个日历，并且能够在选择开始和结束日期时使用 < > 按钮选择下个月/上个月，即，能够选择一月的开始日期（仅显示一月），然后选择一个结束日期三月的日期（仅显示三月），点击 > 按钮。singleDatePicker 有一个选项：true，但这会禁用选择日期范围的能力。

Answer 1

删除第二个日历的代码：http : //www.daterangepicker.com 将能够在一个日历中选择一个日期范围。

/* 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 */

Answer 2

我也遇到了同样的问题，但是通过添加一些CSS解决了它，希望它也对你有帮助。

.drp-calendar.right thead>tr:nth-child(2) {
    display: none;
}
.drp-calendar.right tbody {
    display: none;
}
.daterangepicker.ltr .ranges, .daterangepicker.ltr .drp-calendar {
    float: none !important;
}
.daterangepicker .drp-calendar.right .daterangepicker_input {
    position: absolute;
    top: 45px;
    left: 8px;
    width: 230px;
}
.drp-calendar.left .drp-calendar-table {
    margin-top: 45px;
}