重置daterangepicker上的时间

Question

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

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

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

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

Answer 1

我不知道你是怎么做到的，但jQuery的方式看起来就像那样。基本上，我们听了apply.daterangepicker和cancel.daterangepicker并处理它。调用prepareDateRangeControl将初始化所有日期范围选择器。注意，这是我们在ASP.NET MVC项目上执行它的方式，因为服务器端呈现和jQuery仅在呈现页面后触摸某些UI元素。

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));
    });
}

对于Angular项目，我们也使用ng2-daterangepicker但是这个用例我们不需要处理时间选择器作为您的要求。我希望这个想法与上面的代码相同，因为它还封装并提供与原始库相同的事件。

Answer 2

我在角度6项目中使用它

@ViewChild（datePicker）私有选择器：datePicker;

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

这适合你吗？它为我工作