重置daterangepicker

Question

我们在启用了时间选择器的项目中使用daterangepicker，我们希望重置某人选择日期范围的时间。

所以我有一个像这样的初始选择，有日期和时间范围：

现在，当用户选择新的日期范围时，我希望将时间范围重置回所选日期的开始（中午12:00）和所选日期的结束时间（上午11:59）：

有没有办法在不修改源代码的情况下实现这一目标？

Answer 1

I don't know how did you do it, but the way with jQuery will look like that. Basically, we listened to apply.daterangepicker and cancel.daterangepicker and handle it. Call prepareDateRangeControl will init all the date range picker. Noted that it is the way we did it on our ASP.NET MVC project as server-side rendering and jQuery present to touch some UI element after the page was rendered only.

function prepareDateRangeControl() {
    function adjustWidth(control) {
        control.attr('size', control.val().length);
    }

    $(".form-control.daterange").each(function () {

        $(this).daterangepicker({
            autoUpdateInput: false,
            applyClass: "btn-primary",
            timePicker: true,
            timePicker24Hour: true,

            format: $(this).data("format"),
            locale: {
                cancelLabel: "Clear",
                format: $(this).data("format")
            },
            ranges: {
                "Today": [moment().startOf("day"), moment().endOf("day")],
                "Yesterday": [moment().subtract(1, "days").startOf("day"), moment().subtract(1, "days").endOf("day")],
                "Last 7 Days": [moment().subtract(6, "days").startOf("day"), moment().endOf("day")],
                "Last 30 Days": [moment().subtract(29, "days").startOf("day"), moment().endOf("day")],
                "This Month": [moment().startOf("month"), moment().endOf("month")]
            }
        });

        adjustWidth($(this));
    });

    $(".form-control.daterange").on("apply.daterangepicker", function (event, picker) {

        if (picker.startDate.hour() === 0 && picker.startDate.minute() === 0) {
            if (picker.endDate.hour() === 0 && picker.endDate.minute() === 0) {

                picker.endDate.hour("23");
                picker.endDate.minute("59");
            }
        }

        var format = $(this).data("format");
        var text = picker.startDate.format(format) + " - " + picker.endDate.format(format);
        picker.element.val(text);
        adjustWidth($(this));
    });

    $(".form-control.daterange").on("cancel.daterangepicker", function (event, picker) {
        picker.element.val("");
        adjustWidth($(this));
    });
}

For the Angular project, we are also using ng2-daterangepicker but this use case we don't need to handle the time picker as your requirement. I hope the idea will be the same as the above code because it also encapsulates and provides the same event as the original library.

Answer 2

我正在6号角项目中使用它

@ViewChild（datePick）专用选择器：datePick;

//用于重置默认日期 this.datePick = null;

这对您有用吗？它对我有用