时间控件daterangepicker 小bug 修复

最新推荐文章于 2024-12-19 09:38:33 发布

原创最新推荐文章于 2024-12-19 09:38:33 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#daterangepicker #bug #被选中 #不一致 #点击空白

datepicker 专栏收录该内容

5 篇文章

订阅专栏

本文针对时间选择控件存在的两个主要问题提供了解决方案：一是点击空白区域导致时间选取异常；二是下拉框更改后时间显示不更新。通过修改JS代码实现功能修正。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BUG ①

描述：时间控件在选中时间后未点击确定或者取消而是点击了空白部分，按理说这应该默认为取消然而实际是确认在国外是很正常的但这不符合中国习惯

如图：

正常应该还是三月七号而实际变成了三月三十一号

解决方案

找到对应的js文件，如图所示：

找到outsideClick方法

将该方法替换成

 outsideClick: function(e) {
            var target = $(e.target);
            // if the page is clicked anywhere except within the daterangerpicker/button
            // itself then call this.hide()
            if (
                // ie modal dialog fix
                e.type == "focusin" ||
                target.closest(this.element).length ||
                target.closest(this.container).length ||
                target.closest('.calendar-table').length
                ) return;
            this.startDate = this.oldStartDate;
            this.endDate = this.oldEndDate;
            this.container.hide();
            this.isShowing = false;
            this.element.trigger('outsideClick.daterangepicker', this);

        },

BUG ②

描述：当下拉框改变后将新的值赋值到时间文本框中然后点击时间文本框发现选中的时间还是未改变（初始化）的时间，正常应该是改变后的时间被选中

如图所示1

如图所示2

解决方案

在chang（）事件中添加下面那段代码

重点是

formatDateNew(order_data[dd][6]),表示chang后最新的时间  格式要转成年-月-日 时分秒格式 下方是做了国际化 你可以直接换成中文

startDate:formatDateNew(order_data[dd][6]),

  $('#scheduledEndTime').daterangepicker({
    startDate: formatDateNew(order_data[dd][6]),
    showDropdowns: true,
    showWeekNumbers: false,
    changeMonth: true,
    changeYear: true,
    timePicker: true,
    timePickerIncrement: 2,
    singleDatePicker: true,
    timePicker24Hour: true,
    locale: { //中文汉化
        format: 'YYYY-MM-DD HH:mm:ss',
        applyLabel: '' + $.i18n.prop('i18n_sure'),
        cancelLabel: '' + $.i18n.prop('i18n_cancel'),
        daysOfWeek: ['' + $.i18n.prop('星期天'), '' + $.i18n.prop('星期一'), '' + $.i18n.prop('星期二'), '' + $.i18n.prop('星期三'), '' + $.i18n.prop('星期四'), '' + $.i18n.prop('星期五'), '' + $.i18n.prop('星期六')],
        monthNames: ['' + $.i18n.prop('i18n_january'), '' + $.i18n.prop('i18n_february'), '' + $.i18n.prop('i18n_march'), '' + $.i18n.prop('i18n_april'), '' + $.i18n.prop('i18n_may'), '' + $.i18n.prop('i18n_june'), '' + $.i18n.prop('i18n_july'), '' + $.i18n.prop('i18n_august'), '' + $.i18n.prop('i18n_september'), '' + $.i18n.prop('i18n_october'), '' + $.i18n.prop('i18n_november'), '' + $.i18n.prop('i18n_december')],
        firstDay: 1
    }
});