easyui datebox 周选择器 结合moment.js获取一周的时间范围

项目里用的easyui，用weekpicker的话需要与easyui代码有冲突会导致页面报错，所以直接改造一下easyui的datebox实现这一功能

1 <input type="text" class="easyui-datebox" data-options="formatter:myformatter,parser:myparser,onSelect:onSelect" id="S_Week">




 1 function myformatter(date){
 2     var y = date.getFullYear();
 3     var m = date.getMonth()+1;
 4     var d = date.getDate();
 5     return y+'第'+moment(date).week()+'周_'+y+'/'+m+'/'+d;
 6 }
 7 function myparser(s){
 8     if (!s) return new Date();
 9     var date = s.split('_')[1]
10     var ss = (date.split('/'));
11     var y = parseInt(ss[0],10);
12     var m = parseInt(ss[1],10);
13     var d = parseInt(ss[2],10);
14     if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
15         return new Date(y,m-1,d);
16     } else {
17         return new Date();
18     }
19 }
20 function onSelect(date){
21         // 获取当前日期所在的周的第一天（周一）
22         var monday = moment(date).clone().startOf('isoWeek');
23         // 获取当前日期所在的周的最后一天（周日）
24         var sunday = moment(date).clone().endOf('isoWeek');
25         const w_StartDate = monday.format('YYYY-MM-DD');
26         const w_EndDate = sunday.format('YYYY-MM-DD');
27         $('#S_StartDate').datebox('setValue', w_StartDate);
28         $('#S_EndDate').datebox('setValue', w_EndDate);
29         var parentElement = $('.calendar-selected').parent();
30         var childElements = parentElement.children();
31         // 遍历子节点并输出
32         childElements.each(function() {
33         $(this).addClass('calendar-selected')
34         });
35 }
36 function getDayDiv(t){
37     var day=$(t).closest(".calendar-day");
38     if(day.length){
39     return day;
40     }else{
41     return $(t);
42     }
43     };
44 
45 $(function () {
46     var calendarDiv = $('#S_Week').datebox().datebox('calendar')
47     calendarDiv.calendar({
48         firstDay:1,
49         showWeek:true,
50         weekNumberHeader:'week'
51     })
52     calendarDiv.on("mouseover",function(e){
53         var t=getDayDiv(e.target)
54         if(t.hasClass("calendar-nav")||t.hasClass("calendar-text")||(t.hasClass("calendar-day")&&!t.hasClass("calendar-disabled"))){
55             t.addClass("calendar-nav-hover")
56             var parentElement = t.parent();
57             var childElements = parentElement.children();
58             childElements.each(function() {
59                 $(this).addClass('calendar-nav-hover')
60             });
61         }
62         }).on("mouseout",function(e){
63         var t=getDayDiv(e.target);
64         if(t.hasClass("calendar-nav")||t.hasClass("calendar-text")||(t.hasClass("calendar-day")&&!t.hasClass("calendar-disabled"))){
65         t.removeClass("calendar-nav-hover");
66         var parentElement = t.parent();
67             var childElements = parentElement.children();
68             childElements.each(function() {
69                 $(this).removeClass('calendar-nav-hover')
70             });
71         }
72       })
73     
74     $('#S_Week').datebox({
75         onShowPanel: function() {
76           // 在打开面板前进行一些预处理操作
77           var parentElement = $('.calendar-selected').parent();
78           var childElements = parentElement.children();
79           // 遍历子节点并输出
80           childElements.each(function() {
81           $(this).addClass('calendar-selected')
82           });
83 
84         }
85       });
86 })




 








            

            
posted @ 
2024-01-16 10:28 
WinniVVV 
阅读(139) 
评论(0) 
 
收藏 
举报