在 daterangepicker 上重置时间答案

【问题标题】：Reset time on daterangepicker在 daterangepicker 上重置时间
【发布时间】：2018-05-31 04:50:48
【问题描述】：

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

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

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

有什么方法可以在不修改源代码的情况下实现吗？

【问题讨论】：

你能把你正在使用的代码也贴出来吗？

标签： javascript angular typescript daterangepicker

【解决方案1】：

我在 Angular 6 项目中使用它

@ViewChild(datePick) 私有选择器：datePick;

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

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

【讨论】：

【解决方案2】：

我不知道你是怎么做到的，但是使用 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，但这个用例我们不需要按照您的要求处理时间选择器。我希望这个想法和上面的代码一样，因为它也封装并提供了与原始库相同的事件。

【讨论】：