EasyUI-日期选择器(日/周/月)

置顶 WHI

已于 2024-01-17 13:53:59 修改

阅读量969

点赞数 8

文章标签： easyui 前端 javascript

于 2024-01-17 13:52:36 首次发布

本文链接：https://blog.csdn.net/wanghuiWHI/article/details/135648572

版权

各位博友大家好

最近一个项目上调研了要给日期选择器的功能点，主要使用Jquery+easyUI实现日/周/月的日期选择。因为easyUI的日期组件暂时没有提供周选择，所以需要自己去实现。

现将实现的Demo分享给大家，如果有好的想法也可以提，我下来有时间会完善并更新博文，谢谢。

实列文件已上传，资源地址：

https://download.csdn.net/download/wanghuiWHI/88753351

实现效果：

js文件：

// 查询条件-时间维度
var enumDateDimensionType = {
    dateDimensionTypeDay: "1", // 时间维度-日
    dateDimensionTypeWeek: "2", // 时间维度-周
    dateDimensionTypeMonth: "3", // 时间维度-月
};

// 设置一周的第一天是星期几（0是周日，1是周一）
var firstDayIsMonday = 1;
var maxIntervalWeeks = 12; // 最大间隔周数
var maxIntervalDays = 31; // 最大间隔天数
var maxIntervalMonths = 12; // 最大间隔月数

/**
 * 初始化时间维度
 * @param {any} type  时间维度：1:日 默认  2: 周  3: 月
 * @param {any} startDateControlId  起始日期控件Id
 * @param {any} endDateControlId  结束日期控件Id
 */
function InitSearchDateDimension(type = 1, startDateControlId = "beginSearchDate", endDateControlId = "endSearchDate") {

    // #region 日期选择器  - 日

    if (type.toString() === enumDateDimensionType.dateDimensionTypeDay) {
        $("#" + startDateControlId).next().click(function () {
            var dateBegin = $("#" + startDateControlId).datebox("getValue");
            var dateEnd = $("#" + endDateControlId).datebox("getValue");
            if (dateEnd !== "") {
                var validateStartTime = moment(dateEnd).add(-(maxIntervalDays - 1), "days");
                var validateEndTime = moment(dateEnd);
                $("#" + startDateControlId).datebox("calendar").calendar({
                    firstDay: firstDayIsMonday,
                    validator: function (date) {
                        return date >= validateStartTime && date <= validateEndTime;
                    }
                });
                if (dateBegin == "") {
                    $("#" + startDateControlId).datebox("calendar").calendar('moveTo', validateStartTime._d);
                } else {
                    $("#" + startDateControlId).datebox("calendar").calendar('moveTo', dateBegin);
                }
            } else {
                $("#" + startDateControlId).datebox("calendar").calendar({
                    firstDay: firstDayIsMonday,
                    validator: function (date) {
                        return date;
                    }
                });
                $("#" + startDateControlId).datebox("calendar").calendar('moveTo', dateBegin == "" ? new Date() : dateBegin);
            }
        });

        $("#" + endDateControlId).next().click(function () {
            var dateBegin = $("#" + startDateControlId).datebox("getValue");
            var dateEnd = $("#" + endDateControlId).datebox("getValue");
            if ($("#" + startDateControlId).datebox("getValue") !== "") {
                var validateStartTime = moment(dateBegin);
                var validateEndTime = moment(dateBegin).add(maxIntervalDays - 1, "days");
                $("#" + endDateControlId).datebox("calendar").calendar({
                    firstDay: firstDayIsMonday,
                    validator: function (date) {
                        return date >= validateStartTime && date <= validateEndTime;
                    }
                });
                if (dateEnd == "") {
                    $("#" + endDateControlId).datebox("calendar").calendar('moveTo', validateEndTime._d);
                } else {
                    $("#" + endDateControlId).datebox("calendar").calendar('moveTo', dateEnd);
                }
            } else {
                $("#" + endDateControlId).datebox("calendar").calendar({
                    firstDay: firstDayIsMonday,
                    validator: function (date) {
                        return date;
                    }
                });
                $("#" + endDateControlId).datebox("calendar").calendar('moveTo', dateEnd == "" ? new Date() : dateEnd);
            }
        });

        var calendarButtonsDay = $.extend([], $.fn.datebox.defaults.buttons);
        // 重写按钮事件
        calendarButtonsDay.splice(0, 1, {
            text: '今天',
            handler: function (target) {
                var beginTemp = new Date();
                var endTemp = new Date();
                var validateStartTime = null;
                var validateEndTime = null;
                var ctrlId = target.id;
                if (ctrlId.indexOf("end") >= 0) {
                    beginTemp = $(`#${ctrlId.replace("end", "begin")}`).datebox("getValue");
                    if (beginTemp && beginTemp != "") {
                        validateStartTime = moment(beginTemp);
                        validateEndTime = moment(beginTemp).add(maxIntervalDays - 1, "days");
                        if (endTemp < validateStartTime || endTemp > validateEndTime) {
                            alert(`结束日期需设置大于开始日期的${maxIntervalDays}天范围内。`);
                            return;
                        }
                    }
                }
                else if (ctrlId.indexOf("begin") >= 0) {
                    endTemp = $(`#${ctrlId.replace("begin", "end")}`).datebox("getValue");
                    if (endTemp && endTemp != "") {
                        validateStartTime = moment(endTemp).add(-(maxIntervalDays - 1), "days");
                        validateEndTime = moment(endTemp);
                        if (beginTemp < validateStartTime || beginTemp > validateEndTime) {
                            alert(`开始日期需设置小于结束日期的${maxIntervalDays}天范围内。`);
                            return;
                        }
                    }
                }
                var now = new Date();
                $(`#${target.id}`).datebox("setValue", moment(now).format("YYYY-MM-DD"));
                $(target).datebox("hidePanel");
            },
        });

        $('#' + startDateControlId).datebox({
            buttons: calendarButtonsDay
        });

        $('#' + endDateControlId).datebox({
            buttons: calendarButtonsDay
        });
    }

    // #endregion

    // #region 日期选择器  - 周

    if (type.toString() === enumDateDimensionType.dateDimensionTypeWeek) {
        $("#" + startDateControlId).next().click(function () {
            var dateBegin = $(`#${startDateControlId}Value`).val();
            var dateEnd = $(`#${endDateControlId}Value`).val();
            if ($("#" + endDateControlId).datebox("getValue") !== "") {
                var validateStartTime = moment(dateEnd).startOf("isoWeek").add(-maxIntervalWeeks, "weeks");
                var validateEndTime = moment(dateEnd);
                $("#" + startDateControlId).datebox("calendar").calendar({
                    firstDay: firstDayIsMonday,
                    validator: function (date) {
                        return date >= validateStartTime && date <= validateEndTime;
                    },
                    current: dateBegin == "" ? new Date() : dateBegin,
                });
                if (dateBegin == "") {
                    $("#" + startDateControlId).datebox("calendar").calendar('moveTo', validateStartTime._d);
                } else {
                    $("#" + startDateControlId).datebox("calendar").calendar('moveTo', dateBegin);
                }
            } else {
                $("#" + startDateControlId).datebox("calendar").calendar({
                    firstDay: firstDayIsMonday,
                    validator: function (date) {
                        return date;
                    },
                    current: dateBegin == "" ? new Date() : dateBegin,
                });

                $("#" + startDateControlId).datebox("calendar").calendar('moveTo', dateBegin == "" ? new Date() : dateBegin);
            }
        });

        $("#" + endDateControlId).next().click(function () {
            var dateBegin = $(`#${startDateControlId}Value`).val();
            var dateEnd = $(`#${endDateControlId}Value`).val();
            if ($("#" + startDateControlId).datebox("getValue") !== "") {
                var validateStartTime = moment(dateBegin);
                var validateEndTime = moment(dateBegin).endOf("isoWeek").add(maxIntervalWeeks, "weeks");
                $("#" + endDateControlId).datebox("calendar").calendar({
                    firstDay: firstDayIsMonday,
                    validator: function (date) {
                        return date >= validateStartTime && date <= validateEndTime;
                    },
                    current: dateEnd == "" ? new Date() : dateEnd
                });
                if (dateEnd == "") {
                    $("#" + endDateControlId).datebox("calendar").calendar('moveTo', validateEndTime._d);
                } else {
                    $("#" + endDateControlId).datebox("calendar").calendar('moveTo', dateEnd);
                }
            } else {
                $("#" + endDateControlId).datebox("calendar").calendar({
                    firstDay: firstDayIsMonday,
                    validator: function (date) {
                        return date;
                    },
                    current: dateEnd == "" ? new Date() : dateEnd
                });
                $("#" + endDateControlId).datebox("calendar").calendar('moveTo', dateEnd == "" ? new Date() : dateEnd);
            }
        });

        var calendarButtonsWeek = $.extend([], $.fn.datebox.defaults.buttons);
        // 重写按钮事件
        calendarButtonsWeek.splice(0, 2, {
            text: '今天',
            handler: function (target) {
                var beginTemp = new Date();
                var endTemp = new Date();
                var validateStartTime = null;
                var validateEndTime = null;
                var ctrlId = target.id;
                if (ctrlId.indexOf("end") >= 0) {
                    beginTemp = $(`#${ctrlId.replace("end", "begin")}Value`).val();
                    if (beginTemp && beginTemp != "") {
                        validateStartTime = moment(beginTemp);
                        validateEndTime = moment(beginTemp).endOf("isoWeek").add(maxIntervalWeeks, "weeks");
                        if (endTemp < validateStartTime || endTemp > validateEndTime) {
                            alert(`结束日期需设置大于开始日期的${maxIntervalWeeks}周范围内。`);
                            return;
                        }
                    }
                }
                else if (ctrlId.indexOf("begin") >= 0) {
                    endTemp = $(`#${ctrlId.replace("begin", "end")}Value`).val();
                    if (endTemp && endTemp != "") {
                        validateStartTime = moment(endTemp).startOf("isoWeek").add(-maxIntervalWeeks, "weeks");
                        validateEndTime = moment(endTemp);
                        if (beginTemp < validateStartTime || beginTemp > validateEndTime) {
                            alert(`开始日期需设置小于结束日期的${maxIntervalWeeks}周范围内。`);
                            return;
                        }
                    }
                }
                var now = new Date();
                showWeekText(now, target.id);
                $(`#${target.id}Value`).val(now);
                $(target).datebox("hidePanel");
            },
        }, {
            text: '清空',
            handler: function (target) {
                $(`#${target.id}Value`).val("")
                $(target).datebox("setValue", "");
                $(target).datebox("hidePanel");
            },
        }
        );

        $('#' + startDateControlId).datebox({
            onSelect: function (date) {
                $(`#${startDateControlId}Value`).val(date);
                showWeekText(date, startDateControlId);
            },
            buttons: calendarButtonsWeek
        });

        $('#' + endDateControlId).datebox({
            onSelect: function (date) {
                $(`#${endDateControlId}Value`).val(date);
                showWeekText(date, endDateControlId);
            },
            buttons: calendarButtonsWeek
        });

        // 周选择器显示一年的周数
        function showWeekText(date, ctrlId) {
            if (date) {
                moment.updateLocale('zh-cn', {
                    week: {
                        dow: 1,
                        doy: 1    // 7 + dow - janX
                    }
                });
                var momDate = moment(date);
                var y = momDate.get('year');
                var m = momDate.get('month');
                var w = momDate.week();
                // 如果月份为1月，并且周数大于10，则该日期是上一年的最后一周
                if (m === 0 && w > 10) {
                    y -= 1;
                } else if (m === 11 && w === 1) {
                    y += 1;
                }
                var wStr = w.toString();
                if (wStr.length === 1) {
                    wStr = "0" + wStr;
                }
                $('#' + ctrlId).datebox('setText', `${y}-${wStr}`);
            }
        }
    }

    // #endregion

    // #region 日期选择器  - 月

    if (type.toString() === enumDateDimensionType.dateDimensionTypeMonth) {

        $('#' + startDateControlId).datebox({
            onShowPanel: function () {
                //日期组合框对象
                var $datebox = $(this);
                //获取输入框的值
                var date = $datebox.datebox('getText');
                if (date != "") {
                    //给日期组合框重新赋值，保证展开月份时显示正常的月份
                    $datebox.datebox('setValue', date + '-1');
                }
                //找到弹窗的 panel
                var panel = $(this).datebox('panel');
                // 给临时样式追加calendar-text样式，以便下一行代码可以执行
                panel.find('.calendar-text-temp').addClass("calendar-text");
                //找到日历月份选择的dom并触发点击事件让其弹出
                panel.find('.calendar-text').trigger('click');
                // 隐藏今天按钮
                panel.find('a[datebox-button-index="0"]').hide();
                // 清楚calendar-text样式，禁止月度点击切换回日期，追加临时样式
                panel.find('.calendar-text').addClass("calendar-text-temp").removeClass("calendar-text");
                //监听 月份 块的点击事件，点击某个月份的话，则获取到新的年月，重新给输入框赋值
                panel.find('.calendar-menu-month').click(function () {
                    //获取年月
                    var year = panel.find('.calendar-menu-year').val();
                    var month = $(this).attr('abbr');
                    $datebox.datebox('setValue', year + '-' + month + '-1');
                    //关闭弹窗
                    $datebox.datebox('hidePanel');
                })
            }
            , formatter: function (date) {
                var temp = moment(date).format("YYYY-MM");
                return temp;
            }
        });

        $('#' + endDateControlId).datebox({
            onShowPanel: function () {
                //日期组合框对象
                var $datebox = $(this);
                //获取输入框的值
                var date = $datebox.datebox('getText');
                if (date != "") {
                    //给日期组合框重新赋值，保证展开月份时显示正常的月份
                    $datebox.datebox('setValue', date + '-1');
                }
                //找到弹窗的 panel
                var panel = $(this).datebox('panel');
                // 给临时样式追加calendar-text样式，以便下一行代码可以执行
                panel.find('.calendar-text-temp').addClass("calendar-text");
                //找到日历月份选择的dom并触发点击事件让其弹出
                panel.find('.calendar-text').trigger('click');
                // 隐藏今天按钮
                panel.find('a[datebox-button-index="0"]').hide();
                // 清楚calendar-text样式，禁止月度点击切换回日期，追加临时样式
                panel.find('.calendar-text').addClass("calendar-text-temp").removeClass("calendar-text");
                //监听 月份 块的点击事件，点击某个月份的话，则获取到新的年月，重新给输入框赋值
                panel.find('.calendar-menu-month').click(function () {
                    //获取年月
                    var year = panel.find('.calendar-menu-year').val();
                    var month = $(this).attr('abbr');
                    $datebox.datebox('setValue', year + '-' + month + '-1');
                    //关闭弹窗
                    $datebox.datebox('hidePanel');
                })
            }
            , formatter: function (date) {
                var temp = moment(date).format("YYYY-MM");
                return temp;
            }
        });
    }

    // #endregion
}

$(document).ready(function () {
    // #region 时间维度条件

    // 初始化时间维度及关联日期选择控件
    InitSearchDateDimension(
        enumDateDimensionType.dateDimensionTypeDay,
        "beginSearchDateDay",
        "endSearchDateDay"
    );
    InitSearchDateDimension(
        enumDateDimensionType.dateDimensionTypeWeek,
        "beginSearchDateWeek",
        "endSearchDateWeek"
    );
    InitSearchDateDimension(
        enumDateDimensionType.dateDimensionTypeMonth,
        "beginSearchDateMonth",
        "endSearchDateMonth"
    );
    // 默认日选择器
    hideDateBox(enumDateDimensionType.dateDimensionTypeDay);
    // 清空日期控件的值
    function clearDateBox() {
        $("#beginSearchDateDay").datebox("setValue", "");
        $("#endSearchDateDay").datebox("setValue", "");

        $("#beginSearchDateWeek").datebox("setValue", "");
        $("#beginSearchDateWeekValue").val("");
        $("#endSearchDateWeek").datebox("setValue", "");
        $("#endSearchDateWeekValue").val("");

        $("#beginSearchDateMonth").datebox("setValue", "");
        $("#beginSearchDateMonthValue").val("");
        $("#endSearchDateMonth").datebox("setValue", "");
        $("#endSearchDateMonthValue").val("");
    }

    // 时间维度下拉改变
    $("#dateDimension").on("change", function () {
        const dateDimensionType = $("#dateDimension").val();
        clearDateBox();
        hideDateBox(dateDimensionType);
    });

    function hideDateBox(dateDimensionType) {
        $("[id^='divBeginSearchDate']")
            .removeClass("showStyle")
            .addClass("hideStyle");
        $("[id^='divEndSearchDate']")
            .removeClass("showStyle")
            .addClass("hideStyle");
        if (dateDimensionType == enumDateDimensionType.dateDimensionTypeDay) {
            $("#divBeginSearchDateDay")
                .removeClass("hideStyle")
                .addClass("showStyle");
            $("#divEndSearchDateDay")
                .removeClass("hideStyle")
                .addClass("showStyle");
        } else if (
            dateDimensionType == enumDateDimensionType.dateDimensionTypeWeek
        ) {
            $("#divBeginSearchDateWeek")
                .removeClass("hideStyle")
                .addClass("showStyle");
            $("#divEndSearchDateWeek")
                .removeClass("hideStyle")
                .addClass("showStyle");
            $("#divEndSearchDateWeek .easyui-fluid").width(
                $("#divBeginSearchDateWeek .easyui-fluid").width()
            );
            $("#divEndSearchDateWeek .textbox-text").width(
                $("#divBeginSearchDateWeek .textbox-text").width()
            );
        } else if (
            dateDimensionType == enumDateDimensionType.dateDimensionTypeMonth
        ) {
            $("#divBeginSearchDateMonth")
                .removeClass("hideStyle")
                .addClass("showStyle");
            $("#divEndSearchDateMonth")
                .removeClass("hideStyle")
                .addClass("showStyle");
            $("#divEndSearchDateMonth .easyui-fluid").width(
                $("#divBeginSearchDateMonth .easyui-fluid").width()
            );
            $("#divEndSearchDateMonth .textbox-text").width(
                $("#divBeginSearchDateMonth .textbox-text").width()
            );
        }
    }

    // 时间维度：日 的起始时间和结束时间
    var startMonthDayOfNow = moment()
        .add(-(maxIntervalDays - 1), "days")
        .format("YYYY-MM-DD");
    var endMonthDayOfNow = moment().format("YYYY-MM-DD");
    $("#beginSearchDateDay").datebox("setValue", startMonthDayOfNow);
    $("#endSearchDateDay").datebox("setValue", endMonthDayOfNow);

    // #endregion
});

//@ sourceURL=SearchDateDimension.js

Html文件：

<!DOCTYPE html>
<html>
  <head>
    <title>EasyUI-日期选择器(日/周/月)</title>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="./css/easyui.css" rel="stylesheet" />
    <link href="./css/easyui_icon.css" rel="stylesheet" />
    <link href="./css/customer.css" rel="stylesheet" />
    <script src="./scripts/jquery-1.12.4.js"></script>
    <script src="./scripts/jquery.easyui.min.js"></script>
    <script src="./scripts/easyui-lang-zh_CN.js"></script>
    <script src="./scripts/moment.js"></script>
    <script src="./scripts/menu.js"></script>
    <script src="./scripts/SearchDateDimension.js"></script>
  </head>
  <body id="main-body" class="easyui-layout" style="margin-top: 20px">
    <div class="divSearchDate">
      <div class="search_div_15">
        <div class="search_text_30">时间维度</div>
        <div class="search_input_70">
          <select
            id="dateDimension"
            name="dateDimension"
            style="height: 26px; width: 163px"
          >
            <option value="1" selected="">日</option>
            <option value="2">周</option>
            <option value="3">月</option>
          </select>
        </div>
      </div>
      <div class="search_div_15 showStyle" id="divBeginSearchDateDay">
        <div class="search_text_30">日选择</div>
        <div class="search_input_70">
          <input
            id="beginSearchDateDay"
            data-options="editable:false"
            class="easyui-datebox input_style input_width input_height"
          />
        </div>
      </div>
      <div class="search_div_15 showStyle" id="divEndSearchDateDay">
        <div class="search_text_30">—</div>
        <div class="search_input_70">
          <input
            id="endSearchDateDay"
            data-options="editable:false"
            class="easyui-datebox input_style input_width input_height"
          />
        </div>
      </div>

      <div class="search_div_15 showStyle" id="divBeginSearchDateWeek">
        <div class="search_text_30">周选择</div>
        <div class="search_input_70">
          <input
            id="beginSearchDateWeek"
            data-options="editable:false"
            class="easyui-datebox input_style input_width input_height"
          />
          <span hidden id="beginSearchDateWeekValue"></span>
        </div>
      </div>
      <div class="search_div_15 showStyle" id="divEndSearchDateWeek">
        <div class="search_text_30">—</div>
        <div class="search_input_70">
          <input
            id="endSearchDateWeek"
            data-options="editable:false"
            class="easyui-datebox input_style input_width input_height"
          />
          <span hidden id="endSearchDateWeekValue"></span>
        </div>
      </div>

      <div class="search_div_15 showStyle" id="divBeginSearchDateMonth">
        <div class="search_text_30">月选择</div>
        <div class="search_input_70">
          <input
            id="beginSearchDateMonth"
            data-options="editable:false"
            class="easyui-datebox input_style input_width input_height"
          />
        </div>
      </div>
      <div class="search_div_15 showStyle" id="divEndSearchDateMonth">
        <div class="search_text_30">—</div>
        <div class="search_input_70">
          <input
            id="endSearchDateMonth"
            data-options="editable:false"
            class="easyui-datebox input_style input_width input_height"
          />
        </div>
      </div>
    </div>
    <br /><br />
    <div style="width: 100%; margin: 15px">
      <ul>
        <span>备注说明：</span>
        <li>
          <span> 1.日期选择器可以提供日选择器、周选择器、月选择器 </span>
        </li>
        <li>
          <span>
            2.日选择器最大31天，选择起始日期后，在选择结束日期时，会在日历上默认开始日期+最大天数后的日期
          </span>
        </li>
        <li>
          <span>
            3.周选择最大选择12个周，选择起始周后，在选择结束周时，会在日历上默认开始周+最大周数后所在周的最后一天
          </span>
        </li>
        <li>
          <span>
            4.周选择器时，日历从星期一开始，星期天结束；每周的第一天是周一；每年的最后一天（即12月31号）所在的周是该年的最后一周，若包含来年的1号，则就归为去年的最后一周，否则就是来年的第一周
          </span>
        </li>
        <li>
          <span> 5.月选择器最大12个月，暂未实现，待完善 </span>
        </li>
      </ul>
      <br />
    </div>
  </body>
</html>