devbox
人工智能uu
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：人工智能uu | 2024-07-15 18:39:51

赞

踩

easyui月份选择器

各位博友大家好

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

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

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

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

实现效果：

js文件：

  1. // 查询条件-时间维度
  2. var enumDateDimensionType = {
  3.     dateDimensionTypeDay: "1", // 时间维度-日
  4.     dateDimensionTypeWeek: "2", // 时间维度-周
  5.     dateDimensionTypeMonth: "3", // 时间维度-月
  6. };
  7.  
  8. // 设置一周的第一天是星期几（0是周日，1是周一）
  9. var firstDayIsMonday = 1;
  10. var maxIntervalWeeks = 12; // 最大间隔周数
  11. var maxIntervalDays = 31; // 最大间隔天数
  12. var maxIntervalMonths = 12; // 最大间隔月数
  13.  
  14. /**
  15.  * 初始化时间维度
  16.  * @param {any} type  时间维度：1:日 默认  2: 周  3: 月
  17.  * @param {any} startDateControlId  起始日期控件Id
  18.  * @param {any} endDateControlId  结束日期控件Id
  19.  */
  20. function InitSearchDateDimension(type = 1, startDateControlId = "beginSearchDate", endDateControlId = "endSearchDate") {
  21.  
  22.     // #region 日期选择器  - 日
  23.  
  24.     if (type.toString() === enumDateDimensionType.dateDimensionTypeDay) {
  25.         $("#" + startDateControlId).next().click(function () {
  26.             var dateBegin = $("#" + startDateControlId).datebox("getValue");
  27.             var dateEnd = $("#" + endDateControlId).datebox("getValue");
  28.             if (dateEnd !== "") {
  29.                 var validateStartTime = moment(dateEnd).add(-(maxIntervalDays - 1), "days");
  30.                 var validateEndTime = moment(dateEnd);
  31.                 $("#" + startDateControlId).datebox("calendar").calendar({
  32.                     firstDay: firstDayIsMonday,
  33.                     validator: function (date) {
  34.                         return date >= validateStartTime && date <= validateEndTime;
  35.                     }
  36.                 });
  37.                 if (dateBegin == "") {
  38.                     $("#" + startDateControlId).datebox("calendar").calendar('moveTo', validateStartTime._d);
  39.                 } else {
  40.                     $("#" + startDateControlId).datebox("calendar").calendar('moveTo', dateBegin);
  41.                 }
  42.             } else {
  43.                 $("#" + startDateControlId).datebox("calendar").calendar({
  44.                     firstDay: firstDayIsMonday,
  45.                     validator: function (date) {
  46.                         return date;
  47.                     }
  48.                 });
  49.                 $("#" + startDateControlId).datebox("calendar").calendar('moveTo', dateBegin == "" ? new Date() : dateBegin);
  50.             }
  51.         });
  52.  
  53.         $("#" + endDateControlId).next().click(function () {
  54.             var dateBegin = $("#" + startDateControlId).datebox("getValue");
  55.             var dateEnd = $("#" + endDateControlId).datebox("getValue");
  56.             if ($("#" + startDateControlId).datebox("getValue") !== "") {
  57.                 var validateStartTime = moment(dateBegin);
  58.                 var validateEndTime = moment(dateBegin).add(maxIntervalDays - 1, "days");
  59.                 $("#" + endDateControlId).datebox("calendar").calendar({
  60.                     firstDay: firstDayIsMonday,
  61.                     validator: function (date) {
  62.                         return date >= validateStartTime && date <= validateEndTime;
  63.                     }
  64.                 });
  65.                 if (dateEnd == "") {
  66.                     $("#" + endDateControlId).datebox("calendar").calendar('moveTo', validateEndTime._d);
  67.                 } else {
  68.                     $("#" + endDateControlId).datebox("calendar").calendar('moveTo', dateEnd);
  69.                 }
  70.             } else {
  71.                 $("#" + endDateControlId).datebox("calendar").calendar({
  72.                     firstDay: firstDayIsMonday,
  73.                     validator: function (date) {
  74.                         return date;
  75.                     }
  76.                 });
  77.                 $("#" + endDateControlId).datebox("calendar").calendar('moveTo', dateEnd == "" ? new Date() : dateEnd);
  78.             }
  79.         });
  80.  
  81.         var calendarButtonsDay = $.extend([], $.fn.datebox.defaults.buttons);
  82.         // 重写按钮事件
  83.         calendarButtonsDay.splice(0, 1, {
  84.             text: '今天',
  85.             handler: function (target) {
  86.                 var beginTemp = new Date();
  87.                 var endTemp = new Date();
  88.                 var validateStartTime = null;
  89.                 var validateEndTime = null;
  90.                 var ctrlId = target.id;
  91.                 if (ctrlId.indexOf("end") >= 0) {
  92.                     beginTemp = $(`#${ctrlId.replace("end", "begin")}`).datebox("getValue");
  93.                     if (beginTemp && beginTemp != "") {
  94.                         validateStartTime = moment(beginTemp);
  95.                         validateEndTime = moment(beginTemp).add(maxIntervalDays - 1, "days");
  96.                         if (endTemp < validateStartTime || endTemp > validateEndTime) {
  97.                             alert(`结束日期需设置大于开始日期的${maxIntervalDays}天范围内。`);
  98.                             return;
  99.                         }
  100.                     }
  101.                 }
  102.                 else if (ctrlId.indexOf("begin") >= 0) {
  103.                     endTemp = $(`#${ctrlId.replace("begin", "end")}`).datebox("getValue");
  104.                     if (endTemp && endTemp != "") {
  105.                         validateStartTime = moment(endTemp).add(-(maxIntervalDays - 1), "days");
  106.                         validateEndTime = moment(endTemp);
  107.                         if (beginTemp < validateStartTime || beginTemp > validateEndTime) {
  108.                             alert(`开始日期需设置小于结束日期的${maxIntervalDays}天范围内。`);
  109.                             return;
  110.                         }
  111.                     }
  112.                 }
  113.                 var now = new Date();
  114.                 $(`#${target.id}`).datebox("setValue", moment(now).format("YYYY-MM-DD"));
  115.                 $(target).datebox("hidePanel");
  116.             },
  117.         });
  118.  
  119.         $('#' + startDateControlId).datebox({
  120.             buttons: calendarButtonsDay
  121.         });
  122.  
  123.         $('#' + endDateControlId).datebox({
  124.             buttons: calendarButtonsDay
  125.         });
  126.     }
  127.  
  128.     // #endregion
  129.  
  130.     // #region 日期选择器  - 周
  131.  
  132.     if (type.toString() === enumDateDimensionType.dateDimensionTypeWeek) {
  133.         $("#" + startDateControlId).next().click(function () {
  134.             var dateBegin = $(`#${startDateControlId}Value`).val();
  135.             var dateEnd = $(`#${endDateControlId}Value`).val();
  136.             if ($("#" + endDateControlId).datebox("getValue") !== "") {
  137.                 var validateStartTime = moment(dateEnd).startOf("isoWeek").add(-maxIntervalWeeks, "weeks");
  138.                 var validateEndTime = moment(dateEnd);
  139.                 $("#" + startDateControlId).datebox("calendar").calendar({
  140.                     firstDay: firstDayIsMonday,
  141.                     validator: function (date) {
  142.                         return date >= validateStartTime && date <= validateEndTime;
  143.                     },
  144.                     current: dateBegin == "" ? new Date() : dateBegin,
  145.                 });
  146.                 if (dateBegin == "") {
  147.                     $("#" + startDateControlId).datebox("calendar").calendar('moveTo', validateStartTime._d);
  148.                 } else {
  149.                     $("#" + startDateControlId).datebox("calendar").calendar('moveTo', dateBegin);
  150.                 }
  151.             } else {
  152.                 $("#" + startDateControlId).datebox("calendar").calendar({
  153.                     firstDay: firstDayIsMonday,
  154.                     validator: function (date) {
  155.                         return date;
  156.                     },
  157.                     current: dateBegin == "" ? new Date() : dateBegin,
  158.                 });
  159.  
  160.                 $("#" + startDateControlId).datebox("calendar").calendar('moveTo', dateBegin == "" ? new Date() : dateBegin);
  161.             }
  162.         });
  163.  
  164.         $("#" + endDateControlId).next().click(function () {
  165.             var dateBegin = $(`#${startDateControlId}Value`).val();
  166.             var dateEnd = $(`#${endDateControlId}Value`).val();
  167.             if ($("#" + startDateControlId).datebox("getValue") !== "") {
  168.                 var validateStartTime = moment(dateBegin);
  169.                 var validateEndTime = moment(dateBegin).endOf("isoWeek").add(maxIntervalWeeks, "weeks");
  170.                 $("#" + endDateControlId).datebox("calendar").calendar({
  171.                     firstDay: firstDayIsMonday,
  172.                     validator: function (date) {
  173.                         return date >= validateStartTime && date <= validateEndTime;
  174.                     },
  175.                     current: dateEnd == "" ? new Date() : dateEnd
  176.                 });
  177.                 if (dateEnd == "") {
  178.                     $("#" + endDateControlId).datebox("calendar").calendar('moveTo', validateEndTime._d);
  179.                 } else {
  180.                     $("#" + endDateControlId).datebox("calendar").calendar('moveTo', dateEnd);
  181.                 }
  182.             } else {
  183.                 $("#" + endDateControlId).datebox("calendar").calendar({
  184.                     firstDay: firstDayIsMonday,
  185.                     validator: function (date) {
  186.                         return date;
  187.                     },
  188.                     current: dateEnd == "" ? new Date() : dateEnd
  189.                 });
  190.                 $("#" + endDateControlId).datebox("calendar").calendar('moveTo', dateEnd == "" ? new Date() : dateEnd);
  191.             }
  192.         });
  193.  
  194.         var calendarButtonsWeek = $.extend([], $.fn.datebox.defaults.buttons);
  195.         // 重写按钮事件
  196.         calendarButtonsWeek.splice(0, 2, {
  197.             text: '今天',
  198.             handler: function (target) {
  199.                 var beginTemp = new Date();
  200.                 var endTemp = new Date();
  201.                 var validateStartTime = null;
  202.                 var validateEndTime = null;
  203.                 var ctrlId = target.id;
  204.                 if (ctrlId.indexOf("end") >= 0) {
  205.                     beginTemp = $(`#${ctrlId.replace("end", "begin")}Value`).val();
  206.                     if (beginTemp && beginTemp != "") {
  207.                         validateStartTime = moment(beginTemp);
  208.                         validateEndTime = moment(beginTemp).endOf("isoWeek").add(maxIntervalWeeks, "weeks");
  209.                         if (endTemp < validateStartTime || endTemp > validateEndTime) {
  210.                             alert(`结束日期需设置大于开始日期的${maxIntervalWeeks}周范围内。`);
  211.                             return;
  212.                         }
  213.                     }
  214.                 }
  215.                 else if (ctrlId.indexOf("begin") >= 0) {
  216.                     endTemp = $(`#${ctrlId.replace("begin", "end")}Value`).val();
  217.                     if (endTemp && endTemp != "") {
  218.                         validateStartTime = moment(endTemp).startOf("isoWeek").add(-maxIntervalWeeks, "weeks");
  219.                         validateEndTime = moment(endTemp);
  220.                         if (beginTemp < validateStartTime || beginTemp > validateEndTime) {
  221.                             alert(`开始日期需设置小于结束日期的${maxIntervalWeeks}周范围内。`);
  222.                             return;
  223.                         }
  224.                     }
  225.                 }
  226.                 var now = new Date();
  227.                 showWeekText(now, target.id);
  228.                 $(`#${target.id}Value`).val(now);
  229.                 $(target).datebox("hidePanel");
  230.             },
  231.         }, {
  232.             text: '清空',
  233.             handler: function (target) {
  234.                 $(`#${target.id}Value`).val("")
  235.                 $(target).datebox("setValue", "");
  236.                 $(target).datebox("hidePanel");
  237.             },
  238.         }
  239.         );
  240.  
  241.         $('#' + startDateControlId).datebox({
  242.             onSelect: function (date) {
  243.                 $(`#${startDateControlId}Value`).val(date);
  244.                 showWeekText(date, startDateControlId);
  245.             },
  246.             buttons: calendarButtonsWeek
  247.         });
  248.  
  249.         $('#' + endDateControlId).datebox({
  250.             onSelect: function (date) {
  251.                 $(`#${endDateControlId}Value`).val(date);
  252.                 showWeekText(date, endDateControlId);
  253.             },
  254.             buttons: calendarButtonsWeek
  255.         });
  256.  
  257.         // 周选择器显示一年的周数
  258.         function showWeekText(date, ctrlId) {
  259.             if (date) {
  260.                 moment.updateLocale('zh-cn', {
  261.                     week: {
  262.                         dow: 1,
  263.                         doy: 1    // 7 + dow - janX
  264.                     }
  265.                 });
  266.                 var momDate = moment(date);
  267.                 var y = momDate.get('year');
  268.                 var m = momDate.get('month');
  269.                 var w = momDate.week();
  270.                 // 如果月份为1月，并且周数大于10，则该日期是上一年的最后一周
  271.                 if (m === 0 && w > 10) {
  272.                     y -= 1;
  273.                 } else if (m === 11 && w === 1) {
  274.                     y += 1;
  275.                 }
  276.                 var wStr = w.toString();
  277.                 if (wStr.length === 1) {
  278.                     wStr = "0" + wStr;
  279.                 }
  280.                 $('#' + ctrlId).datebox('setText', `${y}-${wStr}`);
  281.             }
  282.         }
  283.     }
  284.  
  285.     // #endregion
  286.  
  287.     // #region 日期选择器  - 月
  288.  
  289.     if (type.toString() === enumDateDimensionType.dateDimensionTypeMonth) {
  290.  
  291.         $('#' + startDateControlId).datebox({
  292.             onShowPanel: function () {
  293.                 //日期组合框对象
  294.                 var $datebox = $(this);
  295.                 //获取输入框的值
  296.                 var date = $datebox.datebox('getText');
  297.                 if (date != "") {
  298.                     //给日期组合框重新赋值，保证展开月份时显示正常的月份
  299.                     $datebox.datebox('setValue', date + '-1');
  300.                 }
  301.                 //找到弹窗的 panel
  302.                 var panel = $(this).datebox('panel');
  303.                 // 给临时样式追加calendar-text样式，以便下一行代码可以执行
  304.                 panel.find('.calendar-text-temp').addClass("calendar-text");
  305.                 //找到日历月份选择的dom并触发点击事件让其弹出
  306.                 panel.find('.calendar-text').trigger('click');
  307.                 // 隐藏今天按钮
  308.                 panel.find('a[datebox-button-index="0"]').hide();
  309.                 // 清楚calendar-text样式，禁止月度点击切换回日期，追加临时样式
  310.                 panel.find('.calendar-text').addClass("calendar-text-temp").removeClass("calendar-text");
  311.                 //监听 月份 块的点击事件，点击某个月份的话，则获取到新的年月，重新给输入框赋值
  312.                 panel.find('.calendar-menu-month').click(function () {
  313.                     //获取年月
  314.                     var year = panel.find('.calendar-menu-year').val();
  315.                     var month = $(this).attr('abbr');
  316.                     $datebox.datebox('setValue', year + '-' + month + '-1');
  317.                     //关闭弹窗
  318.                     $datebox.datebox('hidePanel');
  319.                 })
  320.             }
  321.             , formatter: function (date) {
  322.                 var temp = moment(date).format("YYYY-MM");
  323.                 return temp;
  324.             }
  325.         });
  326.  
  327.         $('#' + endDateControlId).datebox({
  328.             onShowPanel: function () {
  329.                 //日期组合框对象
  330.                 var $datebox = $(this);
  331.                 //获取输入框的值
  332.                 var date = $datebox.datebox('getText');
  333.                 if (date != "") {
  334.                     //给日期组合框重新赋值，保证展开月份时显示正常的月份
  335.                     $datebox.datebox('setValue', date + '-1');
  336.                 }
  337.                 //找到弹窗的 panel
  338.                 var panel = $(this).datebox('panel');
  339.                 // 给临时样式追加calendar-text样式，以便下一行代码可以执行
  340.                 panel.find('.calendar-text-temp').addClass("calendar-text");
  341.                 //找到日历月份选择的dom并触发点击事件让其弹出
  342.                 panel.find('.calendar-text').trigger('click');
  343.                 // 隐藏今天按钮
  344.                 panel.find('a[datebox-button-index="0"]').hide();
  345.                 // 清楚calendar-text样式，禁止月度点击切换回日期，追加临时样式
  346.                 panel.find('.calendar-text').addClass("calendar-text-temp").removeClass("calendar-text");
  347.                 //监听 月份 块的点击事件，点击某个月份的话，则获取到新的年月，重新给输入框赋值
  348.                 panel.find('.calendar-menu-month').click(function () {
  349.                     //获取年月
  350.                     var year = panel.find('.calendar-menu-year').val();
  351.                     var month = $(this).attr('abbr');
  352.                     $datebox.datebox('setValue', year + '-' + month + '-1');
  353.                     //关闭弹窗
  354.                     $datebox.datebox('hidePanel');
  355.                 })
  356.             }
  357.             , formatter: function (date) {
  358.                 var temp = moment(date).format("YYYY-MM");
  359.                 return temp;
  360.             }
  361.         });
  362.     }
  363.  
  364.     // #endregion
  365. }
  366.  
  367. $(document).ready(function () {
  368.     // #region 时间维度条件
  369.  
  370.     // 初始化时间维度及关联日期选择控件
  371.     InitSearchDateDimension(
  372.         enumDateDimensionType.dateDimensionTypeDay,
  373.         "beginSearchDateDay",
  374.         "endSearchDateDay"
  375.     );
  376.     InitSearchDateDimension(
  377.         enumDateDimensionType.dateDimensionTypeWeek,
  378.         "beginSearchDateWeek",
  379.         "endSearchDateWeek"
  380.     );
  381.     InitSearchDateDimension(
  382.         enumDateDimensionType.dateDimensionTypeMonth,
  383.         "beginSearchDateMonth",
  384.         "endSearchDateMonth"
  385.     );
  386.     // 默认日选择器
  387.     hideDateBox(enumDateDimensionType.dateDimensionTypeDay);
  388.     // 清空日期控件的值
  389.     function clearDateBox() {
  390.         $("#beginSearchDateDay").datebox("setValue", "");
  391.         $("#endSearchDateDay").datebox("setValue", "");
  392.  
  393.         $("#beginSearchDateWeek").datebox("setValue", "");
  394.         $("#beginSearchDateWeekValue").val("");
  395.         $("#endSearchDateWeek").datebox("setValue", "");
  396.         $("#endSearchDateWeekValue").val("");
  397.  
  398.         $("#beginSearchDateMonth").datebox("setValue", "");
  399.         $("#beginSearchDateMonthValue").val("");
  400.         $("#endSearchDateMonth").datebox("setValue", "");
  401.         $("#endSearchDateMonthValue").val("");
  402.     }
  403.  
  404.     // 时间维度下拉改变
  405.     $("#dateDimension").on("change", function () {
  406.         const dateDimensionType = $("#dateDimension").val();
  407.         clearDateBox();
  408.         hideDateBox(dateDimensionType);
  409.     });
  410.  
  411.     function hideDateBox(dateDimensionType) {
  412.         $("[id^='divBeginSearchDate']")
  413.             .removeClass("showStyle")
  414.             .addClass("hideStyle");
  415.         $("[id^='divEndSearchDate']")
  416.             .removeClass("showStyle")
  417.             .addClass("hideStyle");
  418.         if (dateDimensionType == enumDateDimensionType.dateDimensionTypeDay) {
  419.             $("#divBeginSearchDateDay")
  420.                 .removeClass("hideStyle")
  421.                 .addClass("showStyle");
  422.             $("#divEndSearchDateDay")
  423.                 .removeClass("hideStyle")
  424.                 .addClass("showStyle");
  425.         } else if (
  426.             dateDimensionType == enumDateDimensionType.dateDimensionTypeWeek
  427.         ) {
  428.             $("#divBeginSearchDateWeek")
  429.                 .removeClass("hideStyle")
  430.                 .addClass("showStyle");
  431.             $("#divEndSearchDateWeek")
  432.                 .removeClass("hideStyle")
  433.                 .addClass("showStyle");
  434.             $("#divEndSearchDateWeek .easyui-fluid").width(
  435.                 $("#divBeginSearchDateWeek .easyui-fluid").width()
  436.             );
  437.             $("#divEndSearchDateWeek .textbox-text").width(
  438.                 $("#divBeginSearchDateWeek .textbox-text").width()
  439.             );
  440.         } else if (
  441.             dateDimensionType == enumDateDimensionType.dateDimensionTypeMonth
  442.         ) {
  443.             $("#divBeginSearchDateMonth")
  444.                 .removeClass("hideStyle")
  445.                 .addClass("showStyle");
  446.             $("#divEndSearchDateMonth")
  447.                 .removeClass("hideStyle")
  448.                 .addClass("showStyle");
  449.             $("#divEndSearchDateMonth .easyui-fluid").width(
  450.                 $("#divBeginSearchDateMonth .easyui-fluid").width()
  451.             );
  452.             $("#divEndSearchDateMonth .textbox-text").width(
  453.                 $("#divBeginSearchDateMonth .textbox-text").width()
  454.             );
  455.         }
  456.     }
  457.  
  458.     // 时间维度：日 的起始时间和结束时间
  459.     var startMonthDayOfNow = moment()
  460.         .add(-(maxIntervalDays - 1), "days")
  461.         .format("YYYY-MM-DD");
  462.     var endMonthDayOfNow = moment().format("YYYY-MM-DD");
  463.     $("#beginSearchDateDay").datebox("setValue", startMonthDayOfNow);
  464.     $("#endSearchDateDay").datebox("setValue", endMonthDayOfNow);
  465.  
  466.     // #endregion
  467. });
  468.  
  469. //@ sourceURL=SearchDateDimension.js

Html文件：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>EasyUI-日期选择器(日/周/月)</title>
  5.     <meta http-equiv="X-UA-Compatible" content="IE=9" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <link href="./css/easyui.css" rel="stylesheet" />
  8.     <link href="./css/easyui_icon.css" rel="stylesheet" />
  9.     <link href="./css/customer.css" rel="stylesheet" />
  10.     <script src="./scripts/jquery-1.12.4.js"></script>
  11.     <script src="./scripts/jquery.easyui.min.js"></script>
  12.     <script src="./scripts/easyui-lang-zh_CN.js"></script>
  13.     <script src="./scripts/moment.js"></script>
  14.     <script src="./scripts/menu.js"></script>
  15.     <script src="./scripts/SearchDateDimension.js"></script>
  16.   </head>
  17.   <body id="main-body" class="easyui-layout" style="margin-top: 20px">
  18.     <div class="divSearchDate">
  19.       <div class="search_div_15">
  20.         <div class="search_text_30">时间维度</div>
  21.         <div class="search_input_70">
  22.           <select
  23.             id="dateDimension"
  24.             name="dateDimension"
  25.             style="height: 26px; width: 163px"
  26.           >
  27.             <option value="1" selected="">日</option>
  28.             <option value="2">周</option>
  29.             <option value="3">月</option>
  30.           </select>
  31.         </div>
  32.       </div>
  33.       <div class="search_div_15 showStyle" id="divBeginSearchDateDay">
  34.         <div class="search_text_30">日选择</div>
  35.         <div class="search_input_70">
  36.           <input
  37.             id="beginSearchDateDay"
  38.             data-options="editable:false"
  39.             class="easyui-datebox input_style input_width input_height"
  40.           />
  41.         </div>
  42.       </div>
  43.       <div class="search_div_15 showStyle" id="divEndSearchDateDay">
  44.         <div class="search_text_30">—</div>
  45.         <div class="search_input_70">
  46.           <input
  47.             id="endSearchDateDay"
  48.             data-options="editable:false"
  49.             class="easyui-datebox input_style input_width input_height"
  50.           />
  51.         </div>
  52.       </div>
  53.  
  54.       <div class="search_div_15 showStyle" id="divBeginSearchDateWeek">
  55.         <div class="search_text_30">周选择</div>
  56.         <div class="search_input_70">
  57.           <input
  58.             id="beginSearchDateWeek"
  59.             data-options="editable:false"
  60.             class="easyui-datebox input_style input_width input_height"
  61.           />
  62.           <span hidden id="beginSearchDateWeekValue"></span>
  63.         </div>
  64.       </div>
  65.       <div class="search_div_15 showStyle" id="divEndSearchDateWeek">
  66.         <div class="search_text_30">—</div>
  67.         <div class="search_input_70">
  68.           <input
  69.             id="endSearchDateWeek"
  70.             data-options="editable:false"
  71.             class="easyui-datebox input_style input_width input_height"
  72.           />
  73.           <span hidden id="endSearchDateWeekValue"></span>
  74.         </div>
  75.       </div>
  76.  
  77.       <div class="search_div_15 showStyle" id="divBeginSearchDateMonth">
  78.         <div class="search_text_30">月选择</div>
  79.         <div class="search_input_70">
  80.           <input
  81.             id="beginSearchDateMonth"
  82.             data-options="editable:false"
  83.             class="easyui-datebox input_style input_width input_height"
  84.           />
  85.         </div>
  86.       </div>
  87.       <div class="search_div_15 showStyle" id="divEndSearchDateMonth">
  88.         <div class="search_text_30">—</div>
  89.         <div class="search_input_70">
  90.           <input
  91.             id="endSearchDateMonth"
  92.             data-options="editable:false"
  93.             class="easyui-datebox input_style input_width input_height"
  94.           />
  95.         </div>
  96.       </div>
  97.     </div>
  98.     <br /><br />
  99.     <div style="width: 100%; margin: 15px">
  100.       <ul>
  101.         <span>备注说明：</span>
  102.         <li>
  103.           <span> 1.日期选择器可以提供日选择器、周选择器、月选择器 </span>
  104.         </li>
  105.         <li>
  106.           <span>
  107.             2.日选择器最大31天，选择起始日期后，在选择结束日期时，会在日历上默认开始日期+最大天数后的日期
  108.           </span>
  109.         </li>
  110.         <li>
  111.           <span>
  112.             3.周选择最大选择12个周，选择起始周后，在选择结束周时，会在日历上默认开始周+最大周数后所在周的最后一天
  113.           </span>
  114.         </li>
  115.         <li>
  116.           <span>
  117.             4.周选择器时，日历从星期一开始，星期天结束；每周的第一天是周一；每年的最后一天（即12月31号）所在的周是该年的最后一周，若包含来年的1号，则就归为去年的最后一周，否则就是来年的第一周
  118.           </span>
  119.         </li>
  120.         <li>
  121.           <span> 5.月选择器最大12个月，暂未实现，待完善 </span>
  122.         </li>
  123.       </ul>
  124.       <br />
  125.     </div>
  126.   </body>
  127. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/人工智能uu/article/detail/830618
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号