js完全化日历控件，适用于周报月报或者自定义周期计划查询

最新推荐文章于 2023-04-04 13:27:08 发布
最新推荐文章于 2023-04-04 13:27:08 发布
阅读量528 收藏 1
点赞数
分类专栏： 工具包 文章标签： 周期配置 查询 日期计算 工作计划 周期状态
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43739125/article/details/112967440
版权

页面样式
在这里插入图片描述

首先是选择一个计划，然后根据计划开始时间制定后续区段


	/**
	 * 选周期配置方法
	 */
	this.cycleAllocationSelect = function (){
		
		$m('lingan/basic/sysConstants').cycleAllocationSelect('选择周期配置','QTCL',function(data){
			debugger;
			$('[name = allocationId]').val(data.id);
			$('[name = allocationName]').val(data.cycleName);
			$('#cycleallocationName').html("当前周期配置名称:"+data.cycleName);
			startDate = data.cycleStartdate;
			cycleStartTime = data.cycleStartdate;
			var d = new Date(startDate);
			startYear = d.getFullYear();
			startMonth = d.getMonth() + 1;
			cycleNum = 1;
			cycleStatus = data.cycleStatus;
			$('[name = allocationId]').val(data.id);
			$('[name = cycleStatus]').val(cycleStatus);
			if(cycleStatus=="cycle_week"){
				var day = d.getDay();
				var sd = new Date(cycleStartTime-(day*86400000)+86400000);
				startYear = sd.getFullYear(); 
				startMonth = sd.getMonth() + 1;
				startDate = sd.getDate();
				var ed = new Date(cycleStartTime-(day*86400000)+7*86400000);
				endYear = ed.getFullYear(); 
				endMonth = ed.getMonth() + 1;
				endDate = ed.getDate();
			}else if(cycleStatus=="cycle_month"){
				var day = new Date(startYear,startMonth,0);
				startDate = 1;
				endDate = day.getDate();
				endYear = startYear; 
				endMonth = startMonth;
			}else{
				customizeDay = data.cycleDay;
				startDate = d.getDate();
				var ed = new Date(cycleStartTime+(customizeDay-1)*86400000);
				endYear = ed.getFullYear(); 
				endMonth = ed.getMonth() + 1;
				endDate = ed.getDate();
				cycleStartTime = new Date(startYear+'/'+startMonth+'/'+startDate);
			}
			$('#currentBtn').linkbutton('enable');
			$("#itemizedNameQuery").show();
			$('#downBtn').linkbutton('enable');
			$('#addBtn').linkbutton('enable');
			$('#editBtn').linkbutton('enable');
			$('#removeBtn').linkbutton('enable');
			$('#querybtn').linkbutton('enable');
			$('#resetbtn').linkbutton('enable');
			$('#morebutton').linkbutton('enable');
			$('#itemizedName').attr('disabled',false);
			$('#cycleNum').datebox({disabled:false});
			$('#currentCycle').html("当前查询周期段:"+startYear+"年"+startMonth+"月"+startDate+"日至"+endYear+"年"+endMonth+"月"+endDate+"日"+"     （第"+cycleNum+"期）");
			var model = queryForm.form('getRecord');
			model.sDate = startYear+'-'+startMonth+'-'+startDate;
			model.eDate = endYear+'-'+endMonth+'-'+endDate;
			grid.datagrid('load', model);
		});
	}

上期事件

/****
	 * 上期事件
	 */
	this.upQuery = function (){
		$('#itemizedName').val(null);
		$('#cycleNum').datebox('setValue',null);
		cycleNum = cycleNum-1;
		if(cycleNum==1){
			$('#upBtn').linkbutton('disable');
		}
		var oldsDate = new Date(startYear+'/'+startMonth+'/'+startDate);
		var oldeDate = new Date(endYear+'/'+endMonth+'/'+endDate);
		if(cycleStatus=="cycle_week"){
			var sd = new Date(oldsDate.getTime()-86400000*7); 
			var ed = new Date(oldeDate.getTime()-86400000*7); 
			startYear = sd.getFullYear(); 
			startMonth = sd.getMonth() + 1;
			startDate = sd.getDate();
			endYear = ed.getFullYear(); 
			endMonth = ed.getMonth() + 1;
			endDate = ed.getDate();
		}else if(cycleStatus=="cycle_month"){
			if(startMonth==1){
				startYear = startYear-1;
				startMonth = 12;
				startDate = 1;
				endYear = endYear-1; 
				endMonth = 12;
				endDate = 31;
			}else{ 
				startMonth = oldsDate.getMonth();
				endMonth = oldsDate.getMonth();
				var day = new Date(startYear,startMonth,0);
				endDate = day.getDate();
			}
		}else{
			var sd = new Date(oldsDate.getTime()-86400000*customizeDay); 
			var ed = new Date(oldeDate.getTime()-86400000*customizeDay); 
			startYear = sd.getFullYear(); 
			startMonth = sd.getMonth() + 1;
			startDate = sd.getDate();
			endYear = ed.getFullYear(); 
			endMonth = ed.getMonth() + 1;
			endDate = ed.getDate();
		}
		$('#currentCycle').html("当前查询周期段:"+startYear+"年"+startMonth+"月"+startDate+"日至"+endYear+"年"+endMonth+"月"+endDate+"日"+"     （第"+cycleNum+"期）");
		var model = queryForm.form('getRecord');
		model.sDate = startYear+'-'+startMonth+'-'+startDate;
		model.eDate = endYear+'-'+endMonth+'-'+endDate;
		grid.datagrid('load', model);
	}

本期事件

/****
	 * 本期事件
	 */
	this.currentQuery = function (){
		debugger;
		var d = new Date();
		if(cycleStatus=="cycle_week"){
			var day = d.getDay();
			var sd = new Date(d.getTime()-(day*86400000)+86400000);
			startYear = sd.getFullYear(); 
			startMonth = sd.getMonth() + 1;
			startDate = sd.getDate();
			var ed = new Date(d.getTime()-(day*86400000)+7*86400000);
			endYear = ed.getFullYear(); 
			endMonth = ed.getMonth() + 1;
			endDate = ed.getDate();
			cycleNum = Math.ceil((ed.getTime()-cycleStartTime)/86400000/7);
		}else if(cycleStatus=="cycle_month"){
				startYear = d.getFullYear(); 
				startMonth = d.getMonth() + 1;
				startDate = 1;
				endYear = d.getFullYear(); 
				endMonth =d.getMonth() + 1;
				var day = new Date(startYear,startMonth,0);
				endDate = day.getDate();
				var eDate = new Date(endYear+'/'+endMonth+'/'+endDate);
				cycleNum =Math.ceil((eDate.getTime()-cycleStartTime) / (24 * 3600 * 1000) / 30);
		}else{
			cycleNum =Math.ceil((d.getTime()-cycleStartTime.getTime()) / (24 * 3600 * 1000) / customizeDay);
			var sd = new Date(cycleStartTime.getTime()+(cycleNum-1)*86400000*customizeDay);
			var ed = new Date(cycleStartTime.getTime()+(cycleNum)*86400000*customizeDay-86400000);
			startYear = sd.getFullYear(); 
			startMonth = sd.getMonth() + 1;
			startDate = sd.getDate();
			endYear = ed.getFullYear(); 
			endMonth = ed.getMonth() + 1;
			endDate = ed.getDate();
		}
		if(cycleNum<1){
			$.Msg.alert('提示','当前时间在周期开始时间之前，请从第一期开始安排工作');
			return;
		}
		$('#itemizedName').val(null);
		$('#cycleNum').datebox('setValue',null);
		if(cycleNum!=1){
			$('#upBtn').linkbutton('enable');
		}
		if(cycleNum==1){
			$('#upBtn').linkbutton('disable');
		}
		$('#currentCycle').html("当前查询周期段:"+startYear+"年"+startMonth+"月"+startDate+"日至"+endYear+"年"+endMonth+"月"+endDate+"日"+"     （第"+cycleNum+"期）");
		var model = queryForm.form('getRecord');
		model.sDate = startYear+'-'+startMonth+'-'+startDate;
		model.eDate = endYear+'-'+endMonth+'-'+endDate;
		grid.datagrid('load', model);
	}

下期事件

	/****
	 * 下期事件
	 */
	this.downQuery = function (){
		$('#itemizedName').val(null);
		$('#cycleNum').datebox('setValue',null);
		cycleNum = cycleNum+1;
		$('#upBtn').linkbutton('enable');
		var oldsDate = new Date(startYear+'/'+startMonth+'/'+startDate);
		var oldeDate = new Date(endYear+'/'+endMonth+'/'+endDate);
		if(cycleStatus=="cycle_week"){
			var sd = new Date(oldsDate.getTime()+86400000*7); 
			var ed = new Date(oldeDate.getTime()+86400000*7); 
			startYear = sd.getFullYear(); 
			startMonth = sd.getMonth() + 1;
			startDate = sd.getDate();
			endYear = ed.getFullYear(); 
			endMonth = ed.getMonth() + 1;
			endDate = ed.getDate();
		}else if(cycleStatus=="cycle_month"){
			debugger;
			if(startMonth==12){
				startYear = startYear+1;
				startMonth = 1;
				startDate = 1;
				endYear = endYear+1; 
				endMonth = 1;
				endDate = 31;
			}else{
				startMonth = oldsDate.getMonth() + 2;
				endMonth = oldsDate.getMonth() + 2;
				var day = new Date(startYear,startMonth,0);
				endDate = day.getDate();
			}
		}else{
			var sd = new Date(oldsDate.getTime()+86400000*customizeDay); 
			var ed = new Date(oldeDate.getTime()+86400000*customizeDay); 
			startYear = sd.getFullYear(); 
			startMonth = sd.getMonth() + 1;
			startDate = sd.getDate();
			endYear = ed.getFullYear(); 
			endMonth = ed.getMonth() + 1;
			endDate = ed.getDate();
		}
		$('#currentCycle').html("当前查询周期段:"+startYear+"年"+startMonth+"月"+startDate+"日至"+endYear+"年"+endMonth+"月"+endDate+"日"+"     （第"+cycleNum+"期）");
		var model = queryForm.form('getRecord');
		model.sDate = startYear+'-'+startMonth+'-'+startDate;
		model.eDate = endYear+'-'+endMonth+'-'+endDate;
		grid.datagrid('load', model);
		
	}

跳转到指定日期所在期事件

this.savecycleplan=function(data){
		debugger;
		var itemizedName = $('#itemizedName').val();
		var cycleNum = $('#cycleNum').datebox('getValue');
		if($('#cycleNum').datebox('getValue')!=""&&$('#cycleNum').datebox('getValue')!=null){
		var d =	new Date(Date.parse($('#cycleNum').datebox('getValue').replace(/-/g,   "/")));   
		if(cycleStatus=="cycle_week"){
			var day = d.getDay();
			var sd = new Date(d.getTime()-(day*86400000)+86400000);
			startYear = sd.getFullYear(); 
			startMonth = sd.getMonth() + 1;
			startDate = sd.getDate();
			var ed = new Date(d.getTime()-(day*86400000)+7*86400000);
			endYear = ed.getFullYear(); 
			endMonth = ed.getMonth() + 1;
			endDate = ed.getDate();
			cycleNum = Math.ceil((ed.getTime()-cycleStartTime)/86400000/7);
		}else if(cycleStatus=="cycle_month"){
				startYear = d.getFullYear(); 
				startMonth = d.getMonth() + 1;
				startDate = 1;
				endYear = d.getFullYear(); 
				endMonth =d.getMonth() + 1;
				var day = new Date(startYear,startMonth,0);
				endDate = day.getDate();
				var eDate = new Date(endYear+'/'+endMonth+'/'+endDate);
				cycleNum =Math.ceil((eDate.getTime()-cycleStartTime) / (24 * 3600 * 1000) / 30);
		}else{
			cycleNum =Math.ceil((d.getTime()+1-cycleStartTime.getTime()) / (24 * 3600 * 1000) / customizeDay);
			var sd = new Date(cycleStartTime.getTime()+(cycleNum-1)*86400000*customizeDay);
			var ed = new Date(cycleStartTime.getTime()+(cycleNum)*86400000*customizeDay-86400000);
			startYear = sd.getFullYear(); 
			startMonth = sd.getMonth() + 1;
			startDate = sd.getDate();
			endYear = ed.getFullYear(); 
			endMonth = ed.getMonth() + 1;
			endDate = ed.getDate();
		}
		if(cycleNum<1){
			$('#cycleNum').datebox('setValue',null);
			$.Msg.alert('提示','当前查询时间在周期开始时间之前，请从第一期开始安排工作');
			return;
		}
		if(cycleNum!=1){
			$('#upBtn').linkbutton('enable');
		}
		if(cycleNum==1){
			$('#upBtn').linkbutton('disable');
		}
		$('#currentCycle').html("当前查询周期段:"+startYear+"年"+startMonth+"月"+startDate+"日至"+endYear+"年"+endMonth+"月"+endDate+"日"+"     （第"+cycleNum+"期）");
		var model = queryForm.form('getRecord');
		model.sDate = startYear+'-'+startMonth+'-'+startDate;
		model.eDate = endYear+'-'+endMonth+'-'+endDate;
		model.itemizedName = itemizedName;
		grid.datagrid('load', model);
		}else{
			var model = queryForm.form('getRecord');
			model.sDate = startYear+'-'+startMonth+'-'+startDate;
			model.eDate = endYear+'-'+endMonth+'-'+endDate;
			model.itemizedName = itemizedName;
			grid.datagrid('load', model);
		}
	}

注：上面代码d为传入日期
可以支持月，周，和自定义时间区段，例如5.10.20天等进行规划工作

Rich是个小白
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
主流云协作办公平台竞品分析报告及融合企业自身产品/功能思考
weixin_42818380的博客
06-09 4965
OA竞品软件核心功能分析一、竞品选择1、市场及行业分析2、确定竞品二、服务客户特征三、满足的核心需求四、核心产品功能1、产品服务形态及功能架构（1） 钉钉（2） 飞书（3） 企业微信（4） Welink产品服务形态：功能框架：2、OA工具流互联方式（1） 钉钉（2） 飞书（3） 企业微信（4） Welink3、后台管理平台应用（1） 钉钉（2） 飞书（3） 企业微信（4） Welink4、第三方赋能权限（1） 钉钉（2） 飞书（3） 企业微信（4） Welink五、商业模式六、结论注释也是必不可少的KaTe
Qt 自定义 Calendar 日历控件
07-31
这涉及到使用Qt库中的QCalendarWidget或者完全从头构建一个自定义的日历组件。通过自定义，我们可以更好地控制日历的显示、交互和样式，以适应应用程序的独特设计和功能要求。 1. **QCalendarWidget**: Qt库提供了...
Vue手写一个日历组件（附源码）
最新发布
记性不好，写作只为记录，下次直接搬。
04-04 1849
vue自定义日历组件
前端汇总（转载）
yuanbotao219的博客
01-14 8502
文章目录前端汇总一、概要二、优秀的网站三、前端技术分类综合四、各类前端资源综合类入门类工具类综合效果搜索平台团队Blog开发中心Nodejs综合APIEcmascriptVueAngularjsReactWebpackGulpJs templateHTML5(HTML)CSS3(CSS)移动端APIjQueryD3RequriejsSeajsLess,sassMarkdown兼容性UI相关其它AP......
使用Infoagent 构造调度输配系统
monkst的专栏
09-16 3007
使用Infoagent 构造调度输配系统Develop SCADA SYTEM WITH INFOAGENT顾恺、谢彬 上海时博飞奥自控有限公司(上海市西藏中路656号201  200001)      摘要... 2一、       项目背景... 2二、       INFOAGENT的介绍... 22.1  infoAgent 结构... 22.2 与iFIX 和FIX 集成... 22.3
java日期处理工具类
courage89的专栏
05-06 835
import java.text.ParseException;  import java.text.SimpleDateFormat;  import java.util.Calendar;  import java.util.Date;  import java.util.HashMap;  import java.util.Map;    /**  *   * @author yli  *
dwz+struts+ajax,dwz_group.sql
weixin_36296215的博客
08-06 241
# ************************************************************# Sequel Pro SQL dump# Version 4096## http://www.sequelpro.com/# http://code.google.com/p/sequel-pro/## Host: 127.0.0.1 (MySQL 5.6.14)# Da...
Winform自定义日历控件
12-25
当我们需要在Winform应用中实现特定的日历功能，如考勤管理、日程安排或任务计划时，自定义日历控件就显得尤为重要。本文将详细讨论如何创建一个Winform自定义日历控件，并探讨其在实际业务中的应用。 首先，创建...
winform自定义日历控件
04-19
这个自定义控件通常会包含日期选择、事件标记、颜色定制等功能，以提供更加友好和个性化的用户体验。 在C#中，我们可以继承`System.Windows.Forms.UserControl`类，以此为基础来构建我们的自定义日历控件。首先，...
Android自定义控件实现可多选课程日历CalendarView
01-20
本示例中，我们探讨的是如何实现一个名为`CalendarView`的自定义控件，该控件允许用户在日历上进行多选课程。在项目的实际应用场景中，这个控件可以帮助用户方便地在日历上选择多个课程日期。 首先，`CalendarView`...
C# Winform 自定义 日程日历控件Demo.zip
10-21
本文将深入探讨如何利用C# WinForm来创建一个自定义的日程日历控件，旨在帮助开发者实现更高效、更个性化的日程管理功能。 首先，理解C# WinForm的基础是必要的。WinForm是.NET Framework提供的一个用于构建桌面...
通过hutool实现webservice接口调用
weixin_43739125的博客
09-29 5773
String authenticationUrl = "http://139.196.206.126:8081/services/WorkflowService?wsdl"; // HashMap<String, Object> map = new HashMap<>(); // map.put("userId",1); HashMap<String, Object> WorkflowRequestInfomap = new.
基于vue来前端生成excel模板（支持多sheet，动态表头等，导入模板，傻瓜式模板）
weixin_43739125的博客
09-07 4059
workbook2blob (workbook) { // 生成excel的配置项 var wopts = { // 要生成的文件类型 bookType: 'xlsx', // // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性 bookSST: false, type: 'binary' .
java接口接收中文乱码解决方案
weixin_43739125的博客
01-05 1616
方案一：简单 <Connector connectionTimeout="20000" port="80" protocol="HTTP/1.1" redirectPort="8443" maxPostSize="0" URIEncoding="UTF-8"/> tomcat加上utf8就行 方案二：点对点修改 String parts = URLDecoder.decode(map.get("parts").toString(), "UTF-8"); 只能一对一，批量会很大工作
用java实现xml的接收并且转换成List
weixin_43739125的博客
07-09 1548
用java实现xml的接收并且转换成List 服务器代码 package com.baosight.mro.common.util; import java.io.File; import java.io.IOException; import java.io.OutputStream; import java.net.Socket; import java.net.UnknownHostException; import org.dom4j.Document; import org.dom4j.io.SA
vue遮罩层正在提交功能（兼容基本所有页面）页面转圈等待效果
weixin_43739125的博客
04-13 1528
代码很简单，如下 <div style="height:850px" v-loading="loading" element-loading-text="正在提交..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"> 需要遮罩的内容 </div> //j
ExcelUtil工具类，用于读取Excel文件
weixin_43739125的博客
07-09 1480
ExcelUtil工具类，用于读取Excel文件 直接上代码 package com.baosight.mro.common.util; import org.apache.poi.openxml4j.exceptions.InvalidFormatException; import org.apache.poi.ss.usermodel.*; import java.io.File; import java.io.IOException; import java.util.*; public cla
纯js导出并下载excel文件模板（用于导入模板下载等），还有导入excel转换成list方便后台保存等（纯前端解析excel）
weixin_43739125的博客
07-07 1372
上代码 页面端 <div style="display: none"> <table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <th style="font-size: 18px;color: red;height: 30px">用户账号</th>
打造个性化Android自定义日历控件：代码与功能详解
在Android开发中，实现自定义日历是一个常见的需求，特别是在需要高度定制化或者特殊功能的场景下。本文档提供了一个自定义日历类的源码示例，允许开发者根据自己的需求添加或修改功能，以创建独特且符合项目特定...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值